1

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';
};
BenMorel
  • 34,448
  • 50
  • 182
  • 322
Buck Hicks
  • 1,534
  • 16
  • 27
  • `$` takes function arg, it can be named or anonymous. Your first method is annonymous function and the second is named function.. so there is no difference. – Selvakumar Arumugam Jun 27 '13 at 16:53
  • You can consider adding a function to the jQuery prototype: http://stackoverflow.com/questions/7740051/custom-jquery-functions if you're planning on applying this function to jquery objects. – Bassem Jun 27 '13 at 16:54
  • if you are using jQuery your searchCustomers function can be changed to this:`var searchvalue = $("#searchText2").value;` `var seachtype = $("#searchtype2").value;`. There is no difference between the two, just minimizes the number of keystrokes. – stackErr Jun 27 '13 at 16:55
  • 2
    You already know how to define a function like your `searchCustomers()`. So why aren't you just doing the same thing for your other function? –  Jun 27 '13 at 16:55
  • Crazy Train I mistakenly thought that the JQuery code that was inside the function had to be wrapped in a Jquery function. I didn't realize that it could be placed inside a regular JavaScript function until I received the answer. – Buck Hicks Jun 27 '13 at 17:00

4 Answers4

5

Unwrap it

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

should be

function dothis() {
    // Do stuff here
}
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • 3
    I assume you're going to add some explanation to clear OP's confusion? – John Dvorak Jun 27 '13 at 16:53
  • 2
    Add some explanation please.. I don't want him to just get rid of this issue by copy paste and then come back tomorrow with a new question for a similar problem. – Selvakumar Arumugam Jun 27 '13 at 16:54
  • 1
    @JanDvorak Should he lose his time in explanation when OP obviously didn't show any initiative and effort to try to learn code he's using? Sorry, just wondering. – A. Wolff Jun 27 '13 at 16:57
  • I learned a lot from copy pasting others work, even if the OP might not understand it now, the more he uses the better he will know what hes doing, until that he just need the black box with the right output for his input to let the work done. –  Jun 27 '13 at 17:08
  • 1
    roasted I am not sure how obvious or not my effort can be determined by my post but I assure you I have spent a lot time trying to figure it out. Maybe the differences in JS and JQ syntax are obvious to you but is not to me, which is why I asked the question. I don't ever ask questions here lightly because many times I end up feeling worse after getting my answer because someone has to come along and imply that I am stupid or lazy for asking. I can live it because I got the answer I needed but I have to wonder why some find it necessary to criticize OPs for asking questions on a Q&A forum. – Buck Hicks Jun 27 '13 at 17:29
  • 1
    No worries @roasted. I do. And I am thankful for the answer and the additional knowledge passed along in this thread. – Buck Hicks Jun 27 '13 at 17:57
0

Or like that:

var dothis = function(){
  //...
}
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
0

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.

0

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();
};
jcsanyi
  • 8,133
  • 2
  • 29
  • 52