Calling a function from a ajax response content

Question

Hi guys.

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.

Answer 2

The problem is scope related. Your do_ajax function is declared inside the scope of the function run when the page is loaded - thus you can't just arbitrarily call it elsewhere on the page.

There a few ways you could attempt to solve this, the easiest being move the do_ajax function definition outside of your onLoad code, but that also pollutes the global namespace and is generally less desirable.

A better approach is during you onLoad code, bind the click method on your selector to your function that calls do_ajax(). It will create a closure around it, and subsequent click events will know how to fire correctly.

$(function(){
  function do_ajax(){
    // do some stuff
  }
  // bind the click handler
  $(selector).click(function(){ do_ajax(); });
});

then later...

$(selector).click(); // fire the click event, which will call do_ajax()

Also note, you probably should return either true or false from your click handler function, as that will control bubbling of the event.

I am not familiar enough with the datepicker control. You should also really separate your questions out.

Answer 3

I think your looking for the Ready() method in the jQuery library.

Change:

$(selector).click(function(){ do_ajax(); });

To:

$(document).ready(function(){$(selector).click(function(){ do_ajax(); }}));

This will only run your event when the document object model is fully loaded.