Execute Javascript after ajax response has been rendered

Question

I want to execute a piece of javascript after the ajax response has been rendered. The javascript function is being generated dynamically during the ajax request, and is in the ajax response. 'complete' and 'success' events to not do the job. I inspected the ajax request in Firebug console and response hasn't been rendered when the complete callback executes.

Does not work:
 function reloadForm() {
 jQuery.ajax({
 url: "<generate_form_url>",
 type: "GET",
 complete: custom_function_with_js_in_response()
 });
 };

ajaxComplete does the job, but it executes for all the ajax calls on the page. I want to avoid that. Is there a possible solution?

$('#link_form').ajaxComplete(function() {
 custom_function_with_js_in_response();
});

• Salketer: Why not use ajaxComplete? It may execute for every ajax calls but using a condition in it would fix the errors that may occur on "normal" requests. Or you could use a wrapper for such ajax calls that define the ajaxComplete method and inside it it removes itself once it is called...
• Kapil Sharma: Please put the code. Ideally if you are putting code in success/error method of ajax, it should work. However if code is present, we can figure out if you are doing any mistake.
• Mat: what JS framework do you use? Can yu put the code sample?
• amit_saxena: @Salketer...didn't get the second part of your comment. Can you please elaborate. Added code, and I use jquery.

Answer 1

you can also use $.ajax(..).done( do_things_here() );

$(document).ready(function() {
 $('#obj').click(function() {
 $.ajax({
 url: "<url>"
 }).done(function() {
 do_something_here();
 });
});

});

or is there another way

$(document).ready(function() {
 $('#obj').click(function() {
 $.ajax({
 url: "<url>",
 success: function(data){
 do_something_with(data);
 }
 })
});

});

Please, utilize this engine for share your problem and try solutions. Its very efficient.

http://jsfiddle.net/qTDAv/7/ (PS: this contains a sample to try)

Hope to help

• amit_saxena: Thanks, the done callback was what I needed. I have used $.ajax().always() instead.

Answer 2

Checking (and deferring call if needed) and executing the existence of the callback function might work:

// undefine the function before the AJAX call
// replace myFunc with the name of the function to be executed on complete()
myFunc = null; 
$.ajax({
 ...
 complete: function() {
 runCompleteCallback(myFunc);
 },
 ...
});
function runCompleteCallback(_func) {
 if(typeof _func == 'function') {
 return _func();
 }
 setTimeout(function() {
 runCompleteCallback(_func);
 }, 100);
}

• amit_saxena: Awesome! This works. Would you mind explaining the runCompleteCallback function that defers the call. Will it keep on retrying multiple times after 100ms, until the function is executed, or will it just try once?
• techfoobar: The runCompleteCallback function checks if the passed in function exists (which mean the AJAX response has already gone into the DOM) and executes it if it does. If it doesn't, it tries again after 100ms (change this duration as needed). In most cases, it will pass in the second run max (unless data-insertion into the DOM takes a long time, which is unlikely).
• amit_saxena: But I already have that function in DOM on initial load, and reload it via the ajax call (The js function is generated dynamically). So it will always find the function there. Will it execute the older version of the function if the ajax call isn't completed in the timeout duration, or my understanding is incorrect?
• techfoobar: Oh.. In that case you'll need some mechanism to ensure that the correct (latest) version of the function is being executed. You can do that by redefining the function to null ( myFunc = null; ) immediately before the AJAX call, so that runCompleteCallback thinks it does not exist and will wait till the new version gets pushed into the DOM.

Answer 3

Can't help a lot without code. As an general example from JQuery ajax complete page

$('.log').ajaxComplete(function(e, xhr, settings) {
 if (settings.url == 'ajax/test.html') {
 $(this).text('Triggered ajaxComplete handler. The result is ' +
 xhr.responseHTML);
 }
});

In ajaxComplete, you can put decisions to filter the URL for which you want to write code.

• amit_saxena: I wouldn't prefer adding if condition based on the ajax request path because the routes may change, and the code will fail without anyone noticing. Additionally, I request the same url with GET, POST and PUT requests. Is there an alternative way of doing it?

Answer 4

Try to specify function name without () in ajax options:

function reloadForm() {
 jQuery.ajax({
 url: "<generate_form_url>",
 type: "GET",
 complete: custom_function_with_js_in_response
 });
 };