rails3 rails.js и jquery ловят успех и сбой запросов ajax

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

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

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

(пример из документации ). Этот пример при успешном обновлении html-элемента будет содержать класс «cart», а при ошибке - «error».

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

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

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

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

, но как вы справляетесь с ошибкой? Обращаюсь ли я с этим в своем контроллере и использую отдельные представления?

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

25
задан Steve Weet 17 August 2010 в 10:46
поделиться

1 ответ

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

  • ajax: loading: запускается перед выполнением запроса AJAX
  • ajax: success: запускается после успешного запроса AJAX
  • ajax: complete: запускается после завершения запроса AJAX , независимо от статуса ответа
  • ajax: failure: срабатывает после неудачного запроса 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);
    });
});

Отлично! :)

[ОБНОВЛЕНИЕ: 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) {})
71
ответ дан 28 November 2019 в 18:00
поделиться
Другие вопросы по тегам:

Похожие вопросы: