Event ajax:complete does not get triggered after form-replacement

[stayhero]

Hey.

Today I upgraded from jquery-rails gem 1.0.16 to 1.0.17. I found out that the "ajax:complete" event is not always triggered anymore.

I prepared a simple Rails app to show the problem:
https://github.com/easychris/jquery17-rails-ujs-broken

In application.js I want to trigger all ajax:complete events for existing and new forms (hence the .live call):

$(function() {
  $('form').live('ajax:complete', function() {
    alert('ajax:complete event triggered');
  });
});

I prepared two sample data-remote=true forms, one page using jQuery 1.6.4, the other 1.7. The ajax call simply returns javascript code to replace the existing form by another form (in real life the new form would contain error messages etc).

$('#test_form_container').html(' <%= j (render :partial => 'form')  %> ');

When using jQuery 1.6.4 the ajax:complete event gets triggered, but unfortunately not using 1.7. I found out that in jquery-ujs the line

element.trigger('ajax:complete', [xhr, status]);

gets called, but it doesn't trigger any event. I guess because the form to which the ajax event belongs doesn't exist anymore (as it got replaced by the new form). But it should work, as I use the .live event to bind the event to any form-tag. And it does work in 1.6.4.

Any ideas? I tried a couple of hours to find the error, without success. Maybe someone else already has an idea?

[stayhero]

BTW: The git version of jquery (1.7.1rc1) doesn't work either. I hoped this commit had possibly fix the issue. jquery/jquery@6736dd7

I just found out that this code works (maybe a global ajaxComplete listener is even better for this purpose but I guess as the ajax-form replacement is common idiom we should at least be aware of that "breaking"-change):

$(function() {
  $('body').bind('ajaxComplete', function() {
    alert('ajaxComplete triggered');
  });
});

[JangoSteve]

As an aside, I didn't change anything between 1.0.16 and 1.0.17, except switching from jquery 1.6.4 to 1.7 (and changing a comment in the JS). It sounds to me like a possible regression in jquery, not in jquery-ujs.

That fact aside, I don't understand what you're doing.

I guess because the form to which the ajax event belongs doesn't exist anymore (as it got replaced by the new form). But it should work, as I use the .live event to bind the event to any form-tag. And it does work in 1.6.4.

No it shouldn't work. If we call element.trigger(), but you've gotten rid of the element already, then the element on which jquery-ujs is triggering the event isn't in the DOM anymore and that event would not propagate up the DOM, and thus live would not catch it. Maybe read up on how live works.

The fact that it works in jquery 1.6.4, probably means that they were triggering the complete event before evaluating the javascript response. And if it no longer works in 1.7, then they probably trigger the event and then evaluate the JS response. Either way, if you're replacing the element in your return JS, then you should not be relying on the ajax:complete event of the element you've already gotten rid of. The fact that it worked in 1.6.4 is a fluke.

I set up a demo in jsfiddle which shows that the ajax:complete event gets triggered reliably in both 1.6.4 and 1.7.

Your best options probably are to have your ajax response just send the HTML, and then replace your form in the ajax:complete callback itself, or to stop relying on the ajax:complete callback.

[stayhero]

It sounds to me like a possible regression in jquery, not in jquery-ujs.

Yes, I didn't expected that you broke something. I just thought that if jQuery 1.7 changed the way it handles events it could be worth to change jquery.ujs to make it work like before. Of course if I'm the only dumb person who uses jquery-ujs in that way we shouldn't do that.

That fact aside, I don't understand what you're doing.

Maybe I really do my ajax form handling not in the right way. I asked a question on Stack Overflow about Rails Ajax forms Best Practice because the Rails documentation really doesn't suggest a way how to do this. Any of course there are multiple reasonable solutions.

Maybe offtopic, but as you're an expert regarding Rails UJS you might want to give me a hint:
http://stackoverflow.com/questions/8184512/ajax-forms-with-rails-3-best-practice

The fact that it works in jquery 1.6.4, probably means that they were triggering the
complete event before evaluating the javascript response.

No, I checked this. In 1.6.4 they were triggering the event after the form got replaced.

Ok, so, sorry for opening this issue, I thought there were more people affected by this change that just me.

[JangoSteve]

Sure enough, I was able to boil this issue down to it's simplest form using jquery only. Try out this new example; it works with jquery 1.6.4, but doesn't trigger the event in 1.7.

I'll leave some information on the stackoverflow post as well.

[JangoSteve]

As a follow up to this ticket, I actually found where this behavior was intentionally changed in jquery 1.7 (i.e. it was considered a bug in prior versions). See tickets 9951 and 10489 in jquery.

[rfb]

Curious, has anyone found a way to trigger an event after a replacement without resorting to the global ajaxComplete?

[phurni]

@rfb Yes I patched rails.js, locate the line that triggers the ajax:complete event

element.trigger('ajax:complete', [xhr, status]);

and replace with this code:

if (element.parents().last().parent().get(0) == document)
  element.trigger('ajax:complete', [xhr, status]);
else
  $(document).trigger('ajax:complete', [xhr, status]);

It checks whether the element is still in the DOM, in which case simply triggers the event and if not triggers the event directly on the document. Because of this, you have to bind ajax:complete (or .live(), .delegate(), .on()) without a selector.

[kgx]

Despite the new behavior in jQuery 1.7, I really think is an issue and should be re-opened.

In my case, I am replacing search results via UJS along with their associated pagination controls. When I click on a pagination link, which is ultimately dom-replaced using using JQuery html(), the "ajax:complete" event bound to search results container is not fired. However the normal JQuery "ajaxComplete" event is fired, which is a good workaround, but makes me think that "ajax:complete" should also be fired to be consistent. Otherwise what is the point of having this more granular event if it can only be used in certain use cases?

Using JQuery 1.8:

 $("#container").on("ajax:complete", () ->
    //does not work
  )
 $("#container").on("ajaxComplete", () ->
     //DOES WORK!
  )

In my opinion the "ajax:complete" event should be propagated from the first parent still in the DOM from the original triggering element.

[JangoSteve]

@kgx To address your point, the ajax:complete event is not meant to be analogous to the ajaxComplete event in jquery; it's meant to be analogous with the complete callback to the ajax() function. The ajaxComplete is still called because it's a global function; the ajax:complete is not (and is not meant to be) a global function. As of jQuery 1.8, it's only supposed to be called on the document node.

[tomrossi7]

I am having this issue as well and don't totally understand the running dialogue here. What is the solution? So far, I have had to bind directly using the $.ajax complete callback rather than using the :remote => true and binding to "ajax:complete".

[JangoSteve]

@tomrossi7 The best solution is to not use a js.erb response to replace the element that triggered the ajax request, because if you do, then the ajax:complete event (which fires after jquery evaluates the response javascript) has no element left in the page DOM on which to fire. If you want to replace the element that triggers an ajax request after the request is made, then your best bet is to respond with the HTML you want replaced and the replace it using jQuery in either the ajax:success or ajax:complete callback so that you have control over the order of events.

[scratchoo]

hi @JangoSteve, what do you means by "respond with the HTML you want replaced an replace it using jQuery" ? i have the same issue, i have a link which send an ajax request to destroy action, what i did is commented out my respond_to (html and js) in destroy action then in js file i write some code :

 $(document).ready ->
    $(document).on("ajax:success", "a.invitation-box", ->
      $("#friend_form").html("<%= escape_javascript( render('users/cancel_link') ) %>")
     ).on "ajax:error", "a.invitation-box", ->
       alert "error"

is you can see, i tried to replace html inside #friend_form with my partiel, but the asset prevent us from rendering partial inside js file ...

it will be thankful if you show us some example on how to do this :)