Question

I have a page with multiple forms on it. These forms are using a data attribute data-remote=”true
so that the Rails jquery-ui-rails.js automatically adds events to submit these forms via javascript.

When a user submits any of these forms I would like to add a class so I can style it as needed. As Rails is automatically adding the ajax handlers to submit the form I can’t just add this class at the point the handlers are added – I need to manually add code for this myself (I think).

The following code was my first attempt – this attaches okay, but as ajaxStart is a global event it triggers it simultaneously for every form on the page.

$('form').ajaxStart(function(e) {
  console.log("element is " + ($(e).attr('id')));
  return $(e).addClass('submitting');
})

I have also tried beforeSend as according to http://docs.jquery.com/Ajax_Events this is a local event and seems to be the only relevant one:

$('form').beforeSend(function(e) {
  console.log("element is " + ($(e).attr('id')));
  return $(e).addClass('submitting');
})

However, this raises the error:

Uncaught TypeError: Object [object Object] has no method 'beforeSend' 

How can I attach this event to all of the forms on my page so that it fires once per ajax submission, and only for the current form that is being submitted?

Answer 1

I think you can use ajax:beforeSend.rails and ajax:complete.rails events:

https://github.com/rails/jquery-ujs/blob/8b147fb023f0d13deebea750e7e9827b6d3bc8ba/src/rails.js#L405