Rails3 rails.js и успешный успех jquery и отказ от запросов ajax

Раньше в rails 2.3.8 я использовал прототипы-помощники link_to_remote и form_remote_for (среди прочих).

У них была опция :update следующим образом:

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

(пример из документация). Этот пример с успехом обновит html-элемент с помощью класса "cart", а при сбое - "ошибка" класса.

Теперь я считаю, что modus operandi изменился, вместо этого мы пишем:

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

и больше нет возможности установить :update. Вместо обычного html мы теперь отображаем javascript, как это (в jquery):

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

но как вы справляетесь с ситуацией с ошибкой? Я обрабатываю его в своем контроллере и использую отдельные представления?

Мне было бы полезно как-то подражать поведению, которое у нас было раньше. Любые идеи?

Ответы

Ответ 1

Ха! Я нашел это описано в этой статье. В rails.js отмечены следующие обратные вызовы:

  • ajax: загрузка: срабатывает перед выполнением запроса AJAX
  • ajax: успех: срабатывает после успешного запроса AJAX
  • ajax: complete: запускается после завершения запроса AJAX, независимо от состояния ответа
  • ajax: сбой: вызван после неудачного запроса AJAX, в отличие от ajax: success

Поскольку javascript должен быть ненавязчивым, эта связь не выполняется в HTML.

Пример (с того же сайта): следующие Rails 2.3.8

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

переводится на это:

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

и внутри некоторого javascript (application.js), вы связываете события

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);
    });
});

Отлично!:)

[UPDATE: 29/12/2011]

В последнее время были переименованы два события:

  • ajax:beforeSend: заменить поздний ajax:loading
  • ajax:error заменяет ajax:failure (я предполагаю, что он больше соответствует самому jQuery)

Итак, мой пример:

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

Для полноты события и ожидаемые параметры:

 .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) {})

Ответ 2

Связанный рельс 4-гид можно найти по адресу: http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Он указывает на документацию о событиях по адресу: https://github.com/rails/jquery-ujs/wiki/ajax, как упоминалось ncherro

Фактические значения, переданные обратным вызовам, могут быть выведены из метода jQuery ajax http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

.bind устарел в пользу .on по jQuery: http://api.jquery.com/on/

Итак, рекомендуемый подход:

Шаблон:

<%= link_to 'Click me!',
    'path/to/ajax',
    remote: true,
    id: 'button',
    method: :get,
    data: {type: 'text'}
%>

CoffeScript:

$(document).ready ->
  $("#button").on("ajax:success", (e, data, status, xhr) ->
    alert xhr.responseText
  ).on "ajax:error", (e, xhr, status, error) ->
    alert "error"

Ответ 3

Я знаю, что этот вопрос составляет 3 года, но он очень высок в результатах Google, и некоторые из перечисленных выше событий больше не используются.

См. здесь для текущего списка - https://github.com/rails/jquery-ujs/wiki/ajax