rails3 rails.js和jQuery捕捉成功和Ajax请求失败 [英] rails3 rails.js and jquery catching success and failure of ajax requests

问题描述

previously，在轨2.3.8我使用的原型佣工 link_to_remote 和 form_remote_for （除其他）。

Previously, in rails 2.3.8 i used the prototype-helpers link_to_remote and form_remote_for (amongst others).

这些有选择：更新如下：

link_to_remote "Add to cart",
  :url => { :action => "add", :id => product.id },
  :update => { :success => "cart", :failure => "error" }

（从<一个一个例子href="http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html">documentation). 这个例子，成功后更新HTML元素与一流的购物车，失败时的类错误。

(an example from the documentation). This example would, upon success update the html-element with class "cart", and upon failure the class "error".

现在我相信作案手法已经改变，而不是我们写的：

Now i believe the modus operandi has changed, instead we write:

link_to "Add to cart", :url => {:action => "add", :id => product.id}, 
    :remote => true

和没有选项来设置：更新了。 取而代之的是普通的HTML，我们现在的JavaScript渲染，像这样（jQuery中）：

and there is no option to set :update anymore. Instead of a normal html, we now render javascript, like this (in jquery) :

$('.cart').replaceWith(<%= escape_javascript(render :partial => 'cart') %>)

但你如何处理错误的情况？ 我是否处理它在我的控制器，并使用单独的看法？

but how do you handle an error situation? Do i handle it in my controller, and use seperate views?

这似乎对我很有用某种方式能够模仿我们以前的行为。任何想法？

It would seem useful to me to somehow be able to mimic the behaviour we had before. Any ideas?

推荐答案

哈！我发现它在描述了这个文章。在rails.js以下回调检查：

Ha! I found it described in this article. In rails.js the following callbacks are checked:

• AJAX：加载：执行AJAX请求之前触发
• AJAX：成功：成功的Ajax请求后触发
• AJAX：完整：触发后的AJAX请求完成，响应无论状态
• AJAX：失败：失败的AJAX请求后触发，因为对面的ajax：成功

由于JavaScript的应该是不显眼，这种耦合是不在HTML进行。

As the javascript should be unobtrusive, this coupling is not done in the HTML.

这是例子（来自同一个站点）：下面的Rails 2.3.8

An example (from the same site) : the following Rails 2.3.8

<% form_remote_tag :url => { :action => 'run' },
        :id => "tool-form",
        :update => { :success => "response", :failure => "error" },
        :loading => "$('#loading').toggle()", :complete => "$('#loading').toggle()" %>

被翻译成这样的：

is translated to this :

<% form_tag url_for(:action => "run"), :id => "tool-form", :remote => true do %>

和一些JavaScript（的application.js）里面，你绑定事件

and inside some javascript (application.js), you bind the events

jQuery(function($) {
  // create a convenient toggleLoading function
  var toggleLoading = function() { $("#loading").toggle() };

  $("#tool-form")
    .bind("ajax:loading",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(xhr, data, status) {
      $("#response").html(status);
    });
});

太棒了！ ：）

Great! :)

[更新：29/12/2011]

[UPDATE: 29/12/2011]

两个事件已经改名近来：

Two events have been renamed lately:

• AJAX：beforeSend ：接替已故的 AJAX：加载
• AJAX：误差替换 AJAX：失败（我猜是更符合jQuery的本身）

• ajax:beforeSend: replace the late ajax:loading
• ajax:error replaces the ajax:failure (I guess to be more in line with jQuery itself)

所以，我举的例子将成为：

So my example would become:

  $("#tool-form")
    .bind("ajax:beforeSend",  toggleLoading)
    .bind("ajax:complete", toggleLoading)
    .bind("ajax:success", function(xhr, data, status) {
      $("#response").html(status);
    });

有关完整的事件及其预期的参数：

For completeness, the events and their expected parameters:

 .bind('ajax:beforeSend', function(xhr, settings) {})
 .bind('ajax:success',    function(xhr, data, status) {})
 .bind('ajax:complete', function(xhr, status) {})
 .bind('ajax:error', function(xhr, data, status) {})

这篇关于rails3 rails.js和jQuery捕捉成功和Ajax请求失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！