Форма Rails 5 ajax: отправьте форму, нажав на одну из 2 кнопок-переключателей в Ajax - PullRequest
Новая
       35

Форма Rails 5 ajax: отправьте форму, нажав на одну из 2 кнопок-переключателей в Ajax

0 голосов
/ 20 сентября 2019

Примечание: подобные вопросы существуют, но ни один из них не похож на мой случай

Я делаю маленькую форму Ajax в моих представлениях рельсов с переключателями да или нет, я создал эту форму с remote: true, и она действуетправильно, как Ajax, если я использую отдельную кнопку отправки (перезагрузка страницы не происходит и форма передается контроллеру)

Если я использую Jquery, чтобы переключатели самостоятельно отправляли форму, то она отправляет, но не в Ajax (но с перезагрузкой страницы)

Итак, как это исправить:

Отправьте форму, нажав одну из 2 переключателей в Ajax?

Две вещи, которые я пробовал:

1) Создайте две разные кнопки отправки и попробуйте настроить значение формы в самом btn для отправки, если я сделаю их кнопками отправки, Ajax работает хорошо, но форма не получаетмое обязательное значение 

    <div class="radio-button-btn-wrapper mr-2">
      <%= f.submit t('yes'), recommended: true,  class: "radio-button-btn-label-white background-green"  %>
    </div>
    <div class="radio-button-btn-wrapper mr-2">
      <%= f.submit t('no'), recommended: false, class: "radio-button-btn-label-white background-red" %>
    </div>

2) Настройте переключатели для отправки формы в Ajax-режиме (пробовал, но это не сработало) 

  <%= simple_form_for [...model names], remote: true do |f| %>
  <div class="flex">

    <div class="radio-button-btn-wrapper mr-2">
      <%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, true, onclick: "$(this).closest('form').submit();", class: "radio-button-btn background-green" %>
    </div>
    <div class="radio-button-btn-wrapper">
      <%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, false, onclick: "$.ajax((this).closest('form').submit());", class: "radio-button-btn background-red" %>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 20 сентября 2019

Пожалуйста, посмотрите на код ниже и попробуйте адаптировать его для вашего случая.Это рабочий код, который я протестировал в своем приложении Rails.

Основная идея состоит в том, чтобы вместо попытки сделать переключатели кнопками отправки, я использовал подход скрытой формы, а затем привязывал события щелчков на переключателях.В обработчике нажатия кнопки я устанавливаю значение выбранного переключателя в качестве значения скрытого поля в скрытой форме и отправляю скрытую форму.Он отправляется в виде запроса AJAX и на стороне контроллера обрабатывает ответ JS.

Надеюсь, это поможет.

rout.rb 

  root "welcome#index"

  post "welcome_submit_form" => "welcome#submit_form", as: :welcome_submit_form

app / controllers / welcome_controller.rb 

  class WelcomeController < ApplicationController

    def index

    end

    def submit_form
      @received_radio_value = params[:selected_radio_value]

      render file: "welcome/submit_form_response.js.haml"
    end
  end

app / views / welcome / index.html.haml 

  .my-container<
    %div(style='display: none;')
      = form_tag(welcome_submit_form_path, class: 'my-hidden-form', remote: true) do |f|
        = hidden_field_tag "selected_radio_value", nil

    = radio_button_tag 'favorite_color', 'red', false, class: 'my-radio-btn'
    Red
    = radio_button_tag 'favorite_color', 'blue', false, class: 'my-radio-btn'
    Blue

  .my-selected-radio-value(style='display: none')

app / views / welcome / submit_form_response.html.haml 

  %h2= "My Radio Value: #{@received_radio_value}"

app / views / welcome / submit_form_response.js.haml 

  - response_markup = escape_javascript(render( partial: "welcome/submit_form_response.html.haml" ))

  :plain

    var responseMarkup = "#{response_markup}";

    var responseContainer = $('.my-selected-radio-value');

    responseContainer.html(responseMarkup);
    responseContainer.show();

app / assets / javascripts / welcome.js 

(function ($) {

  bindClickEventOnMyRadioBtn = function() {
    $('.my-container .my-radio-btn').off('click').on('click', function(event) {
      var selectedRadioVal = $(this).val();

      var myHiddenForm = $('.my-container .my-hidden-form');
      var radioValueField = myHiddenForm.find('input[name=selected_radio_value]');
      radioValueField.val(selectedRadioVal);

      myHiddenForm.submit();
    })
  }

}) (jQuery);

var ready;

ready = function() {
  bindClickEventOnMyRadioBtn();
};

$(document).ready(ready);
0 голосов
/ 20 сентября 2019

Что мне помогло, так это добавление «обычной» кнопки отправки и настройка ее на отображение ни одной.Затем добавьте eventListener, который прослушивает щелчок на переключателе, и если это произойдет, пусть он нажимает на скрытую кнопку отправки. 

  <%= simple_form_for [...model names], remote: true do |f| %>
  <div class="flex">

    <div class="radio-button-btn-wrapper mr-2">
      <%= label :recommended, t('yes'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, true, class: "radio-button-btn background-green" %>
    </div>
    <div class="radio-button-btn-wrapper">
      <%= label :recommended, t('no'), class: "radio-button-btn-label white" %>
      <%= f.radio_button :recommended, false, class: "radio-button-btn background-red" %>
    </div>
    <%= f.submit '', class: 'd-none', id: 'submitMyForm' %>
  </div>

document.addEventListener('click', function(event){
  if(event.target.classList.contains('radio-button-btn'){
    document.querySelector('#submitMyForm').click();
  }
});
...