Отправка формы с использованием турболинков из javascript - PullRequest
Новая
       15

Отправка формы с использованием турболинков из javascript

0 голосов
/ 13 июня 2018

Можно ли отправить форму из javascript, используя Turbolinks?У меня есть форма с удаленным: true, но я не хочу отправлять ее при нажатии кнопки «Отправить», вместо этого я хочу использовать обычную кнопку, которая находится за пределами формы и отправляет ее при нажатии.Можно ли отправить форму из js без сумасшедших читов, например, имитирующих нажатие кнопки «Отправить»?Я не хочу использовать ручной ajax, потому что тогда мне нужно создать xhr-запрос для каждой формы и каким-то образом прикрепить к нему CRSF-токен.

Если я попытаюсь сделать это с помощью 

$("#form").submit()

, я получу 

ActionController::InvalidAuthenticityToken

, что является вероятной проблемой взаимной подделки

, но у меня есть в моемapplication.html.erb 

<%= csrf_meta_tags %>

, но отправка с использованием jquery не прикрепляет токен, поскольку его xhr ...

Или, может быть, есть простой способ просто прикрепить токен к .submit ()?

РЕДАКТИРОВАТЬ 1:

Я добавил это в свою форму 

<input name="authenticity_token" 
           type="hidden" 
           value="<%= form_authenticity_token %>"/>

и работает

, но теперь отправляю форму как $(form).submit(), отправляет его дважды с турболинками ... Похоже, что турболинки работают, и после этого нормальная подача выполняется, и сайт перезагружается.Я предполагаю, что чем больше я пытаюсь взаимодействовать между turbolinks и обычными js, тем больше проблем я нахожу

form.html.erb 

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), remote: true) do |f| %>
<input name="authenticity_token" 
               type="hidden" 
               value="<%= form_authenticity_token %>"/>
  <%= devise_error_messages! %>

<div data-behavior="devise-error-messages">
  <%= devise_error_messages! %>
</div>
<div data-behavior="flashes">
  <%= flash[:notice] %>
  <%= flash[:error] %>
</div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

<!--  <div class="actions">
    <%= f.submit "Sign up" %>
  </div> -->
<% end %>
<div class="actions">
    <button id="sign_up">Sign up</button>
</div>
<%= render "devise/shared/links" %>

app.js 

$(document).on("ready", function(e){


$(document).on("submit", "#new_user", function(e){


    console.log(e);


});

$(document).on("click", "#sign_up", function(e){

    $("#new_user").submit();


})

});

РЕДАКТИРОВАТЬ 2 , поэтому я изменил свое событие click на это 

$(document).on("click", "#sign_up", function(e){

 var elem = document.getElementById('new_user') 
 Rails.fire(elem, 'submit');
 console.log("sign up click");
})

Теперь оно работает и форма отправляется один раз.

Другая проблема с турболинками заключается в том, что, когда я успешно регистрируюсь, я генерируюjavascript с Turbolinks.visit("/user_after_signed_up")

Я хотел запретить кнопку возврата, поэтому я не могу вернуться к форме входа в систему, поэтому я отключился от кеша, добавив это в application.html: <meta name="turbolinks-cache-control" content="no-cache">

Угадайте, что, не работает.

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

IMНЕ МОЖЕТ ВЫКЛЮЧИТЬ этот кеш, я также пытался

Turbolinks.cacheClear()

в нескольких местах и ​​до сих пор не работает.

РЕДАКТИРОВАТЬ 3

объединение обоих фактически делает его работоспособным, добавьте это в application.html <meta name="turbolinks-cache-control" content="no-cache"> и это в визуализированном js

Turbolinks.cacheClear() до Turbolinks.visit("/path_to_redirect")

Но, кажется, нелогично очищать кешгде предполагается, что кэширования вообще не существует ...

...