Rails UJS link_to: remote выполняет AJAX GET и обычный GET - PullRequest
Новая
       16

Rails UJS link_to: remote выполняет AJAX GET и обычный GET

1 голос
/ 23 марта 2012

EDIT:

В дополнение к полезным комментариям ниже, две прекрасные статьи Стива Шварца объясняют все ясно:

Rails 3.2.2 / jquery-rails 2.0.1 (использует jquery 1.7.1)

У меня есть ссылка, которая отправляет AJAX-запрос на добавление дополнительных полей для загрузки файла в форму. Все, что связано со страницей, работает правильно - новый фрагмент HTML поля формы извлекается с сервера и добавляется в div внутри формы.

Тем не менее,

Сервер получает два запроса GET. Одним из них является запрос AJAX; другой, кажется, является «нормальным» якорным элементом GET. Я ожидал, что "обычный" GET будет остановлен Rails UJS.

Должен ли я отключить обычное действие ссылки самостоятельно? Может кто-нибудь объяснить, что я неправильно понял, и что я должен делать вместо этого [чтобы предотвратить второй запрос]?

Я видел этот вопрос: Rails 3 UJS - контроллер вызывается дважды по link_to: remote . Соответственно, я попытался изменить компиляцию конвейера ресурсов config.assets.debug = false, но это не дало эффекта. Более того, это не двойной запрос GET AJAX, поэтому я думаю, что это другая проблема.

Спасибо за любую помощь!

Фрагмент журнала сервера: 

Started GET "/files/new?asset_number=2" for 127.0.0.1 at 2012-03-23 15:23:27 +0100

Started GET "/files/new" for 127.0.0.1 at 2012-03-23 15:23:27 +0100

Браузер HTML: 

<a href="/files/new" data-remote="true" id="add_another_file" position="after" update="files">Add another file</a>

Вид: 

<%= link_to 'Add another file', new_file_path, :remote   => true,
                                               :update   => 'files',
                                               :position => 'after',
                                               :id       => 'add_another_file' %>

Coffeescript контроллера: 

$( ->
  $('a#add_another_file').click( ->
    url = '/files/new?asset_number=' + $('#files input').length
    $.get(url, ((data) -> $('#files').append(data)), 'html')))

Ответы [ 3 ]

5 голосов
/ 24 марта 2012

Если вы хотите использовать опцию :remote => true, вы должны удалить пользовательское событие click , которое вы добавили.Это связано с тем, что опция :remote => true указывает библиотеке * jquery_ujs * перехватывать щелчки на a#add_another_file.Таким образом, вам не нужно создавать собственный HTTP-запрос.

Далее, чтобы продиктовать, что сделано с ответом, привязать различные события, которые произойдут в a#add_another_file, например, success и ошибка .

Вот полный список событий Ajax, который вы можете привязать к .

5 голосов
/ 23 марта 2012

Если вы добавляете событие click к a#add_another_file, вам не нужно использовать :remote => true, потому что вы делаете запрос Ajax вручную.

Также click событие должно препятствовать выполнению действия по умолчанию.Это можно сделать, добавив event.preventDefault(); в начало обратного вызова события click .Обратите внимание, что обратный вызов должен принимать аргумент event.

1 голос
/ 23 марта 2012

На самом деле все довольно просто, ваш пульт link_to отправляет один запрос (без параметров), и вы добавили событие щелчка по этой ссылке, чтобы отправить еще один (с параметрами).

Вам следует упроститьваш link_to как:

<%= link_to 'Add another file', new_file_path, :id => 'add_another_file' %>

Тогда в вашем click событии вы должны вернуть false, чтобы он не следовал за URL.

Похожевы используете много ненужных скобок в вашем кофейном тексте. 

$ ->
  $('a#add_another_file').click ->
    url = '/files/new?asset_number=' + $('#files input').length
    $.get url, ((data) -> $('#files').append(data)), 'html'
...