How do I run a jQuery function on demand from JavaScript and not on the (document).ready?

Question

I am working on some code that is based on a tutorial that uses jQuery's $(document).ready , which starts the work as soon as the page is loaded (or the document is ready). The code is pretty standard (from what little I know about jQuery) and does work when the page loads.

$(document).ready(function () {
    // Do stuff here
});

But now I want to change it so that the code runs from a functions instead. My first thought was that I could just change the function to this

$(function dothis() {
    // Do stuff here
});

and then call it with a dothis(); but when I did that I get a "dothis is not defined" error. I have also tried it a few different ways and have not been able to figure this out. What do I need to do to make this work the way that I want it to?

function searchCustomers() {
    var searchvalue = document.getElementById('searchText2').value;
    var searchtype = document.getElementById('searchType2').value;

    //Just checking to make sure this part is working...
    //alert(searchtype + '  ' + searchvalue)

    // Run the "Do Stuff here"

    var showDiv = document.getElementById('divCustomerGrid');
    showDiv.style.display = 'block';
};

Answer 1

Unwrap it

$(function dothis() {
    // Do stuff here
});

should be

function dothis() {
    // Do stuff here
}

Answer 2

Or like that:

var dothis = function(){
  //...
}

Answer 3

If the code inside the function is manipulating the DOM then you must make sure that the document is ready, so in that case you can simply declare the named function outside and and then call it only inside the document ready and also attach all the event handlers that calls your function from there. You should also consider making a draft about the whole event chain to see the dependences.

Answer 4

Keep in mind that jQuery isn't a language. Everything using jQuery is just javascript, so you create functions the same way you'd create any other javascript functions.

It makes it a bit clearer if I rewrite your first example like this:

function doStuff() {
    // Do stuff here
}
var doc = jQuery(document);
doc.ready(doStuff);

That has the exact same effect as what you wrote - we're defining a function, and passing it in as an event handler for the document's ready event. So if you want to call doStuff() from elsewhere, you can just do it like any other function.

In addition, if you're trying to call doStuff() later based on an event, you can bind it to a different event, rather than the document ready event. For example:

$('#myBtn').click(doStuff);

This will call doStuff() when the #myBtn element is clicked. In this case, that whole line should happen inside the document.ready event so we can be sure the #myBtn element actually exists. That could look like this:

$(document).ready(function() {
    $('#myBtn').click(doStuff);
});

However - based on some of the comments, I suspect you were only trying to put it in a function because you had to in order to use jQuery. Since that's not the case, you could just put the jQuery commands directly into your searchCustomers() function instead of calling a function (assuming you're not calling it from multiple places).

---

All that being said, there's a couple unrelated optimizations that you can make in your code.

1. passing a function directly into the jQuery or $ function is a shortcut for assigning a document.ready event handler. So you could write your original example like this:

    $(function () { // Do stuff here }); 

2. You can use jQuery to simplify much of what you're already doing inside your searchCustomers() function. I'd rewrite it like this:

    function searchCustomers() { var searchvalue = $('#searchText2').val(); var searchtype = $('#searchType2').val(); //Just checking to make sure this part is working... //alert(searchtype + ' ' + searchvalue) // Do more jQuery stuff here $('#divCustomerGrid').show(); };