Rails 4 如何捕获 ajax:success 事件 [英] Rails 4 how to catch ajax:success event

问题描述

我在使用 Rails 4.0.

I'm on Rails 4.0.

我正在发送这样的事件(注意 :remote=>true):

I'm sending an event like this (note the :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"} %>

我的控制器如下所示:

  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

我有点想使用 format.json/format.html，因为我不完全明白应该从 AJAX 请求中应用哪一个.

I'm kind of winging it with the format.json/format.html because I don't fully understand which one should apply from an AJAX request.

在视图(按钮所在的位置)上我有这个:

On the view (where the button lives) I have this:

$(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' );
    });

});

单击按钮后，我在控制台中获得了 ready，但是无论我做什么，我都无法让 test 显示在控制台中.我错过了什么?

After clicking the button, I get ready in the console, but no matter what I do I can't get the test to show up in the console. What am I missing?

更新:

我在观看/log/development.log 时尝试单击按钮，这是我看到的:

I tried clicking the button while watching /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)

我是 rails n00b，但我觉得还可以.

I'm a rails n00b but it looks ok to me.

推荐答案

button_to 帮助程序围绕提交按钮构建表单.表单是接收 data-remote 属性的内容(请参阅:http://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to).所以，我会试试这个:

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

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

由于您使用的是 Rails 4.0，我猜您使用的是 jQuery 1.9.事件绑定似乎在那里发生了一些变化.因此，如果这之前对您有用，那么这可能是其中的一部分.自 1.7 以来，使用 .on() 进行事件绑定已优于 .bind().

Since you're on Rails 4.0 I'm guessing you're on jQuery 1.9. Binding for events seems to have changed a bit there. So that could be part of it if this has worked for you before. Using .on() for event binding has been preferred over .bind() since 1.7.

这篇关于Rails 4 如何捕获 ajax:success 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！