Rails turbolinks break submit remote form

У меня довольно странная проблема с использованием Rails 4, Turbolinks и удаленной формы. У меня есть форму, похожую на:Rails turbolinks break submit remote form

<%= form_for [object], remote: true do |f| %>             
    <td><%= f.text_field :name, class: 'form-control' %></td>          
    <td><%= f.email_field :email, class: 'form-control' %></td>         
    <td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td> 
<% end %>

Эта форма добавляет (создает) новый объект. Однако он не всегда работает:

Когда я загружаю страницу напрямую с помощью URL-адреса или обновления; он работает
Когда я перехожу из своего приложения на эту страницу; он не работает

При отключении Turbolinks для этой ссылки страница работала отлично.

У меня есть два вопроса:

Почему это не работает? Это потому, что удаленные обработчики не привязаны к кнопке из-за проблемы с JQuery/Turbolinks?
Как я могу обойти эту проблему?

Заранее спасибо.

Решение

Благодаря @ богатому-клевать, решение было добавить кусочек JavaScript, который вручную отправляет форму при нажатии кнопки:

<%= javascript_tag do %> 
    var id = "#<%= dom_id(f.object) %>"; 
    var inputs = $(id).parent().find('input'); 
    console.log(inputs); 
    $(id).parent().find('button').on('click', function(e) { 
    e.preventDefault(); 
    $(id).append(inputs.clone()); 
    $(id).submit(); 
    }); 
<% end %>

Этот код добавляет JavaScript в сформировать таблицу строк, получить входные данные, добавить их к идентификатору и отправить форму. ПредотвращениеDefault(); предотвращает отправку запроса дважды, когда страница обновляется, и форма фактически работает.

источник

2014-03-09 Silox

Turbolinks

Как уже отмечалось, проблема с Turbolinks является то, что она перезагружает <body> часть DOM с вызовом AJAX - означая JS не перезагружается, так как это в голове

типичный способ решения этой проблемы заключается в delegate ваших JS из document, как это:

$(document).on("click", "#your_element", function() { 
    //your code here 
});

Поскольку document всегда будет присутствовать, это вызовет JS непрерывно

Remote

С вашего вопроса, это немного сложнее

Проблема заключается вы полагаетесь на JQuery UJS (ненавязчивый JavaScript) двигатель Rails, который трудно исправить самостоятельно

Мы никогда не га d в этом выпуске & мы постоянно используем Turbolinks - поэтому я предполагаю, что проблема может заключаться в том, как вы создаете форму/обрабатываете запрос. This GitHub казалось воссоздать этот вопрос, и он должен был сделать с таблицей

Может быть, вы могли бы попробовать:

<%= form_for [object], remote: true do |f| %>             
    <%= f.text_field :name, class: 'form-control' %>          
    <%= f.email_field :email, class: 'form-control' %>        
    <%= f.submit button_name, class: 'btn btn-sm btn-primary' %> 
<% end %>

источник

2014-03-09 13:02:07

Спасибо за ваш ответ - форма действительно находится в таблице (мы используем какой-то превосходный вид с надстройкой внизу и строками которые являются inline-editable, поэтому это также станет причиной проблемы. Я добавлю часть Javascript для каждой строки, которая отправит форму, нажав на кнопку, чтобы решить эту проблему. – Silox

Вы можете попробовать руководство ajax звоните - заполняя данные из определенных элементов? –

Я действительно попробую это и вернусь к вам! – Silox

Turbolinks не полностью перезагружает вашу страницу, а только ее часть. Это то, что делает их такими быстрыми, однако, если у вас есть JavaScript, требующий полной перезагрузки страницы, у вас возникнут проблемы. Причина, по которой он работает с обновлением, заключается в том, что теперь вы принудительно перезагружаете страницу.

Edit: Этот драгоценный камень может быть стоит попробовать: https://github.com/kossnocorp/jquery.turbolinks

Для немного дополнительной информации о внутренней работе turbolinks: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

Или: https://github.com/rails/turbolinks

P.S.Также убедитесь, что javascript_include_tag находится в пределах головного тега (а не в теле)

источник

2014-03-09 12:44:48

Нет - это в голове. – Silox

Мой javascript_include_tag был на теле ... thanks @ rails4guides.com – rizidoro

Rails turbolinks break submit remote form

ответ

Смежные вопросы