Javascript 通过jQuery ui对话框提交部分表单，无需重定向

我在一页上填写一份表格，要求注册会员。如果提供的条目没有匹配的成员，则会弹出一个对话框窗口，将其添加到数据库中。目标是在不重新加载或重定向页面的情况下关闭模式窗口，以防止擦除以前输入的任何数据。我在Rails 5上工作，使用jQueryUI中包含的对话框模式

我已把问题缩小到我的局部范围。该对话框正在为另一个模型参与者拉取该部分，一旦创建成功，它将重定向回该页面。除了创建一个单独的冗余表单之外，我不知道如何在不干扰partial的正常行为的情况下停止对话框窗口上的重定向。我试着看看执行一个简单的redirect_back命令是否有帮助，但它仍然删除了以前的数据

参与者\u controller.rb：

class ParticipantsController < ApplicationController
  def create
    @member = Participant.new(member_params)
    if @member.save
      flash.now[:notice] = "#{@member.badge} has been added."
    else
      flash.now[:alert] = "#{@member.badge} already exists."
    end
    render 'new'
  end
end

_addmember.html.erb

<%= form_with url: participants_path, model: @participant, id: "member_submit" do |form| %>
  <div class="member_info">Badge: <%= form.number_field "member[badge]", {required: true} %></div><br>
  <div class="member_info">Name: <%= form.text_field "member[name]", {required: true} %></div><br>
  <div class="member_info">Phone: <%= form.telephone_field "member[phone]" %></div><br>
  <div class="member_info">Email: <%= form.text_field "member[email]" %></div><br>
  <div class="member_info">Preference: <%= form.select "member[pref]", ["Text", "Call", "Email"] %></div><br>
  <div class="member_info">Proxy Info: Yes<%= form.radio_button "member[proxy]", :true %>
  No<%= form.radio_button "member[proxy]", :false %></div>
<% end %>

游戏日志-new.html.erb

<script>
  $(document).ready(function() {
    $('[name="badge_0"]').prop('required',true);
    $('#dialog_addmember').dialog({
      autoOpen: false,
      modal: true,
      width: 700,
      buttons: [
        {
          text: "Add non-registered Participant",
          click: function() {
            if ($("form#member_submit")[0].checkValidity()) {
              $("form#member_submit").submit();
              alert($("form#member_submit > div > input")[0].value + " has been added.");
              $(this).dialog("close");
            } else {
              alert("Please ensure both badge and name are provided.");
            }
          }
        }
      ]
    });
    $('.column_badge').change(function () {
      console.log($(this).val());
      //Modal box
      $.ajax ({
        url: "/check_entry/" + $(this)[0].value,
        dataType: 'JSON',
        error: function(data) {
          $('#dialog_addmember').dialog( "open" );
        }
      })
    });
  });
</script>
<section id="log_header">
  <%= form_with(url: game_logs_path) do |f| %>
    <div id="game_header">
      <%= f.label :inventory_id, "Game Title: " %>
      <%= f.collection_select :inventory_id, Inventory.all, :id, :game_selection, {prompt: true}, {required: true} %></div>
    <div id="detail_header">
      <%= f.label :timestamp, "Timestamp:" %>
      <%= f.datetime_select :timestamp, ampm: true, default: Time.now %>
      <%= f.hidden_field :event_id, value: (@event_info[0]["id"]) %>
    </div>
</section>
    <table>
      <tr>
        <th class="entry"></th>
        <th>Badge ID</th>
        <th>Rating</th>
      </tr>
      <% 12.times do |e| %>
        <tr>
          <td class="entry"><%= "Entry #{e + 1}" %></td>
          <td><div class="badge"><%= f.number_field :badge_id, name: "badge_#{e}", class: "column_badge" %></div></td>
          <td><div class="rating">
          <% 5.times do |r| %>
              <%= "#{r + 1}" %>
              <%= f.radio_button "rating_#{e}", (r + 1) %>
          <% end %>
          </div></td>
        </tr>
      <% end %>
    </table>
    <%= f.submit %>
  <% end %>

<div id="dialog_addmember" title="Add non-registered Participant">
    <%= render "shared/addmember" %>
</div>

---

它不会返回上一页而不重新加载数据，而是重定向到参与者页。在成功提交后关闭对话框模式时，是否有任何方法可以防止重定向？

使用ajax提交表单如果您想保持在同一页面上，我认为可以帮助您。@matiss我没有使用引导，您链接的教程是针对Rails 4的。@charlietfl您能提供更多详细信息吗？关于使用axax提交表单的大量教程/示例也请参阅使用ajax提交表单的jQuery文档，如果您想停留在同一页面上，我想这会对您有所帮助。@matiss我没有使用引导，您链接的教程是针对Rails 4的。@charlietfl您能提供更多详细信息吗？关于使用axax提交表单的大量教程/示例也请参见jQuery文档