Question

I have a function when the page is ready.

<script> 
$(function(){
  function do_ajax(){
  do some stuff
  }
});....

This works great on that page. Then I make a .post call and load the response into a div. The response has a

<script>$(selector).click(function(){ do_ajax(); });</script>

with the result. I get an error “do_ajax() is undefined”. How can I call do_ajax() from an event from the ajax content?

Another one.

I am using jquery ui datepicker. So, when the page is loaded, I invoke the

$(".datepicker").datepicker();

This works great on that page. Then I make a .post call and load the response into a div. The response has a couple of .datepicker fields. The problem is that the newly loaded datepicker fields don’t get the calendar unless I return

<script>$(".datepicker").datepicker();</script>

with the result. Is that how you guys do it or is there another way?

Thanks!

Answer 1

When you create functions/variables within the scope of a function, you can’t access them from outside (unless you defined them in the global namespace).

$(function(){
    // I'm inside a function

    var a = function() {...} // Defined locally

    b  = function() {...}    // Defined globally
});

// I can't call a()

// I am able to call b() because it is defined in global namespace.

---

EDIT:

Also, keep in mind that code inside:

$(function() {
     ...
     b  = function() {...}    // Defined globally
});

b(); // Fails, because the document hasn't fully loaded, so 'b' has not been initialized

…waits to run until the document is loaded. So code outside that needs to access globals defined inside will likely execute before the globally defined code is initialized.