Rails 4 how to catch ajax: success event

Question

I am on Rails 4.0.

I am sending such an event (note: remote => true):

<%= button_to 'yes', {controller:'videos', action:'rate', id: video.hashed_id, yesno:'yes'}, {:remote=>true, :class=>"rate-btn yes-btn btn btn-default btn-sm"} %> 

My controller is as follows:

  def rate video = Video.find_by( hashed_id: params[:id]) action = params[:yesno] puts video.hashed_id puts action respond_to do |format| if (action=='yes') new_rating = video.rating==1 ? 0 : 1 video.update( is_new:0, rating: new_rating ) format.html { redirect_to controller:'projects', action: show, id: video.project.hashed_id } format.json { head :no_content } format.js { render :nothing=>true } end if (action=='no') new_rating = video.rating==-1 ? 0 : -1 video.update( is_new:0, rating: new_rating ) format.html { redirect_to controller:'projects', action: show, id: video.project.hashed_id } format.json { head :no_content } format.js { render :nothing=>true } end end end 

I kind of cover it with format.json / format.html, because I don’t quite understand which one should be applied on AJAX request.

In the view (where the button lives) I have the following:

 $(document).ready( function($) { console.log('ready'); $(document).ajaxSuccess( function(data) {alert(data);} ) $(document).ajaxError( function(data) {alert(data);} ) $('.rate-btn').closest('form').on('ajax:success', function() { console.log('ajax:success!'); }); $('.button_to').bind("ajax:success", function() { console.log( 'test' ); }); }); 

After clicking the button, I get ready in the console, but no matter what I do, I cannot get test to display in the console. What am I missing?

Update:

I tried to click a button while viewing /log/development.log, and this is what I see:

 Started POST "/videos/rate/lq7lv3218c/yes" for 127.0.0.1 at 2013-08-29 17:14:59 -0400 Processing by VideosController#rate as JS Parameters: {"authenticity_token"=>"es4wPqFrxxxxxFsbHQR/gAzofDC+ZwYsiiJ7RAQZUHk=", "id"=>"lq7lv3218c", "yesno"=>"yes"} [1m[36mVideo Load (0.3ms)[0m [1mSELECT `videos`.* FROM `videos` WHERE `videos`.`hashed_id` = 'lq7lv3218c' LIMIT 1[0m [1m[35m (0.1ms)[0m BEGIN [1m[36mSQL (0.3ms)[0m [1mUPDATE `videos` SET `rating` = 0, `updated_at` = '2013-08-29 21:14:59' WHERE `videos`.`id` = 18[0m [1m[35m (0.3ms)[0m COMMIT Rendered videos/rate.html.erb (0.0ms) Completed 200 OK in 7ms (Views: 2.0ms | ActiveRecord: 1.1ms) 

I rail n00b, but it looks good to me.

Answer 1

The button_to creates a form around the submit button. And the form is what gets the data-remote attribute (see http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to ). So, I would try this:

 $('.rate-btn').closest('form').on('ajax:success', function() { console.log('ajax:success!') }); 

Since you are on Rails 4.0, I assume you are on jQuery 1.9. Event binding seems to have changed a bit. So this could be part of it if it worked for you before. Using .on() to bind an event was preferable to .bind() since 1.7.

Answer 2

Here is what solved the problem for me:

• I loaded my own jQuery in the layout (for example: <%= javascript_include_tag "jquery-1.10.2.min", "data-turbolinks-track" => true %> It did not throw any errors, but apparently Rails also loaded its own jQuery’s own, and they were somewhat inconsistent, because when I deleted mine, everything jQuery still worked, and I was immediately able to trigger AJAX error events in the view, but I still got ajax errors ...

• I always had the file /views/videos/rate.html.erb just because I was not sure if it was necessary or not (in CakePHP it), BUT I had nothing in it. It was empty. I'm not sure why, but when I added 1 to this view file, I suddenly started to fire ajax: success events.

I don’t understand why this solved my problem, so if anyone can explain it, I would like to understand better.

Answer 3

Check if you get a parsing error (or similar) by doing ajax: capture completed. Check the status argument. You can also set a breakpoint in jquery_ujs.js .