Rails 3.1 Remote Button Ненавязчивое событие JavaScript не обнаружено (JQuery) - PullRequest
Новая
       26

Rails 3.1 Remote Button Ненавязчивое событие JavaScript не обнаружено (JQuery)

2 голосов
/ 28 сентября 2011

Я хочу начать использовать события Ajax: ajax: success, ajax: fail, ajax: complete и ajax: beforeSend, как рекомендовано для ненавязчивого Javascript в сообщениях вроде:

Но по какой-то причине это не работает для меня. Я что-то упускаю (что-то маленькое), так как не могу заставить события запускать мой Javascript. Я надеюсь, что кто-то может обнаружить «очевидную» ошибку / упущение в моем коде.

Некоторые подробности о моей среде:

  • Рельсы 3.1
  • jQuery (драгоценный камень jquery-rails)
  • therubyracer для обработки js на стороне сервера (для моего примера это не так важно)

Чтобы попытаться решить, чего мне не хватает, я создал простое тестовое приложение, в котором есть одна кнопка для удаленного доступа. Когда кнопка нажата, я хочу, чтобы блоки оповещений срабатывали. Код этого приложения можно увидеть на github здесь:

http://github.com/jpmcgrath/rbtest

Я развернул приложение к героку здесь:

http://rbtest.heroku.com/projects/

Если вы посмотрите на приложение, вы можете нажать кнопку, и кнопка успешно создаст новый проект (чтобы увидеть его обновление вручную), но ajax: событие успеха, похоже, не произошло?

Суть кода в следующем:

In projects_controller.rb 

def remote_test
  @project = Project.new(:name => "remote test")

  respond_to do |format|
    if @project.save
      puts "project saved!\n\n\n"
      format.html { redirect_to @project, notice: 'Project was successfully created.' }
      format.json { render json: @project, status: :created, location: @project }
    else
      format.html { render action: "new" }
      format.json { render json: @project.errors, status: :unprocessable_entity }
    end
  end
end

В приложении. Js 

jQuery(document).ready(function() {

  jQuery(".remote_button").click(function() {
    alert('Handler for .click() called.');
  })
  .bind("ajax:complete", function() {
    alert('complete!');
  })
  .bind("ajax:beforeSend", function () {
    alert('loading!');
  })
  .bind("ajax:error", function (xhr, status, error) {
    alert('failure!');
  })
  .bind('ajax:success', function(event, data, status, xhr) {
    alert('success!');
  });
});

В представлении projects / index.html.erb 

<%= button_to "remote test", remote_test_path, :remote => true, :class => 'remote_button'  %>

Если бы кто-то мог указать, что мне не хватает (я подозреваю, что это как-то связано с типом ответа), это было бы очень признательно.

Ответы [ 2 ]

9 голосов
/ 28 сентября 2011

Причина, по которой ваш обработчик событий не срабатывает, заключается в том, что ваш селектор находится на неправильном элементе. button_to создает форму с одним тегом ввода, и именно этот тег ввода имеет класс, на котором вы выбрали, но события ajax запускаются в форме, а не тег ввода.

Попробуйте это 

jQuery(document).ready(function() {

  jQuery(".remote_button").click(function() {
    alert('Handler for .click() called.');
  });

  jQuery("form.button_to").bind("ajax:complete", function() {
    alert('complete!');
  })
  .bind("ajax:beforeSend", function () {
    alert('loading!');
  })
  .bind("ajax:error", function (xhr, status, error) {
    alert('failure!');
  })
  .bind('ajax:success', function(event, data, status, xhr) {
    alert('success!');
  });
});

Я сделал эквивалент в моей консоли Firebug, и он вызвал обработчик ajax: success, когда обратный вызов был в форме.

Чтобы изменить класс в форме, используйте параметр: form_class, чтобы изменить его с button_to на что-то другое 

<%= button_to "remote test", remote_test_path, :remote => true, :class => 'remote_button', :form_class => 'remote_button_form' %>

Затем добавьте ваши обратные вызовы ajax, используя 

jQuery(".remote_button_form").bind ...

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to

0 голосов
/ 28 сентября 2011

Rails изменил способ обработки файлов JavaScript.

В Railscasts есть несколько примеров.

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

http://railscasts.com/episodes/267-coffeescript-basics?autoplay=true

...