Отправить родительскую форму при частичном щелчке переключателя со всеми параметрами и без обновления в Rails - PullRequest
0 голосов
/ 07 февраля 2020

У меня есть форма, у которой есть частичное подобное:

parent_form. html .erb


<%= form_for :questions, url: { controller: 'questions', action: 'update' }, method: :put, authenticity_token: true, html: { id: 'questions_form' }, remote: true do |f| %>
  <%= render :partial => 'question', :locals => {
      :question => question,
      :answers => question.answers
    } %>
  <%= hidden_field_tag :marked_questions_list, '', :id=>'marked_questions_list' %>
  <%= hidden_field_tag :hidden_field_2, '', :id => 'hidden_field_2' %>

<button id="mark_question">Mark Question</button>

<%= f.submit 'Answer', :class => '', id: 'answer_btn' %>

_question. html .erb

<div><%= question.body %></div>
<table class="choices">
    <% answers.each do |answer| %>
      <tr class="answer_selection">
        <td class="answer_input" data-update-url="<%= update_path %>" id="answer_input">
          <%= radio_button_tag 'question[answer_id]',
                                answer.id,
                                false,
                                {
                                  class: 'answer_option',
                                  # onclick: "this.form.submit();"
                                  onclick: "answerQuestion(#{answer.id});"
                                } %>
        </td>
        <td class="answer_text">
          <%= label_tag 'question[answer_id]',
                        html_safe(answer.body_html) %>
        </td>
      </tr>
    <% end %>
  </table>

ajax. js

answerQuestion = async (answerId) => {
  let updateUrl = document.getElementById('answer_input').dataset.updateUrl;
  let marked_questions_list_value = document.getElementById('marked_questions_list').value;
  let hidden_field_2_value = document.getElementById('hidden_field_2').value;
  let data = { marked_questions_list: marked_questions_list_value, hidden_field_2: hidden_field_2_value }
  try {
    const resp = await fetch(updateAnswerUrl, {
      method: 'POST',
      credentials: 'include',
      body: data,
      headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
    });
    const response = await resp.json();
    if (response.success) {
      document.dispatchEvent(answerEvent);
    } else {
      alert('Oops !!! Something went wrong. Check Your Internet connection or try refreshing the page');
    }
  } catch (err) {
    alert('Oops !!! Something went wrong. Check Your Internet connection or try refreshing the page');
  }
};

Здесь, если я нажимаю answer_btn в parent_form или если я использую onclick: this.form.submit();, то форма отправляется вместе со всеми необходимыми параметрами в hidden_field_tag. Как я могу отправить форму без обновления частичного при нажатии кнопки radio_button через updateQuestion вместе с hidden_field_tag и другими параметрами формы? По сути, мне нужна функциональность answer_btn или onclick: this.form.submit(); без обновления страницы при частичном нажатии любой переключателя, чтобы я мог полностью удалить answer_button из parent_form. Также есть еще одна кнопка Mark Questions в parent_form. При нажатии на эту кнопку одна из hidden_field_tag изменяется. Значения hidden_field_tag s, которые отправляются из parent_form в контроллер при нажатии любой из кнопок, изменяются с javascript. Таким образом, они являются динамическими c. Поэтому hidden_field_tag должны присутствовать, когда я нажимаю переключатели частично или любую кнопку в parent_form.

1 Ответ

1 голос
/ 07 февраля 2020

В соответствии с природой рельсов, он будет ссылаться на sh, однако, обходной путь для того, что вы хотели -

После обновления в контроллере возьмите @marked_question_list и сохраните в нем помеченный вопрос. Затем сохраните значения hidden_field_2 в @ hidden_field_2.

Создайте обновление. js .erb В этом

$('#marked_questions_list').val(<%=@marked_question_list%>);
$('#hidden_field_2').val(<%=@hidden_field_2%>);

Если я правильно понял ваш вопрос, это должно решить вашу проблему. Попробуйте и дайте мне знать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...