Rails 3/JQuery Form Repeated on the Page

Question

I have a form that looks similar to this -

<Form (Unique Form ID) (Common Form Class)>
Some Value: <select_list_element> <submit_button> <image_tag_for_progress_indicator>
<Form Close Tag>

Pretty straight forward - repeat 20x for the page. The basic purpose is to let users go down the form list, update values on a one off, and then move on.

To make it a little nicer, I'm doing the submission via AJAX, and wanted to allow for indicating things were updating. However, I can't seem to get it to work right - here's the javascript I'm using:

$('(Common Form Class)')
.bind('ajax:loading', function(){ $(this).find('(image tag class').attr('src', '(spinning gif)'); })
.bind('ajax:success', function(){ $(this).find('(image tag class').attr('src', '(success gif)'); })
.bind('ajax:failure', function (){ $(this).find('(image tag class').attr('src', '(failure gif)'); })

I'm 99% positive that I'm getting the use of "this" wrong - but I can't seem to debug why.

Answer 1

Where in the request/response are you having trouble? Have you confirmed the form submits but no response comes back?

Are you using the Rails 3-prepackaged UJS (rails.js) to aid in submitting the form?

Also, how do you know which form to update upon the AJAX result?

Answer 2

Sadly, (or not sadly?) the bug was not with my code. The rails guys decided to update the UJS events, and now "ajax:loading" is no longer correct - it's now "ajax:beforeSend", and all the tutorials out there are wrong.

Hope someone sees this and is able to correct their own code.

Here's a tutorial that has it correct:

http://www.alfajango.com/blog/rails-3-remote-links-and-forms/