Rails Ajax 刷新中断模式上传表单提交

Question

我有一个在创建和更新时刷新的项目列表，我有一个允许您添加元素、删除、调整在线定价的表单。如果您想编辑任务分配给谁，它会弹出一个模态，其中再次包含部分表单，但要编辑对象。一切正常并按预期刷新。

问题在同一行上，我有一个回形针和一个相机，它们还可以打开包含用于上传文档或单击相机上传图片的表单的模式。如果页面正在加载，这些在页面上工作正常，但在 ajax 刷新后，提交按钮将不起作用。

代码

部分索引：

<div class="row">
    <div class="col-md-12">

        <% if work_order.tasks.any? %>
        <ul class="task-table">
            <% work_order.tasks.each_with_index do |task, index| %>
            <li class="row task-table-row">

                <%= bootstrap_form_for(task, remote:true) do |f| %>
                    <%= render(partial:'tasks/task', locals:{task:task, f:f, index: index}) %>
                <% end %>

            </li>
            <%= render(partial:'work_orders/modal_forms', locals:{task:task, index:index}) %>
            <%= render(partial:'tasks/attachments', locals:{task:task, index: index}) %>
            <%= render(partial:"tasks/edit", locals:{task:task, index:index})%>
            <% end %>
            <li class="row">
                <div class="table-total">
                    <div class="col-md-6 col-md-push-6 column">
                        <div id="total-wrap">
                            <h3>Est. total:  <span id="subTotal"></span></h3>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <% else %>
        <li class="row task-table-row">
            No tasks currently exist.
        </li>
        <% end %>
    </div>
</div>
<div class="button-margin">
    <%= render(partial:'tasks/new', locals:{work_order:work_order})%>
</div>
<div id="placeHolder"></div>
<%= link_to "Mark as Complete", work_order_path(work_order, work_order:{completed: true}), class:"btn btn-block btn-danger btn-outline b-r-xs", method: :put, remote:true %>

部分任务：

<div class="col-md-4 column">
    <div class="pull-right column inline">
        <p class="assign inline"><small class="text-muted">
            <% if task.assignable_id.present? %>
            <%= truncate(task.assignable.name, length:7) %>
            <% else %>
            assign
            <% end %>
        </small></p>
        <a href="#" class="text-muted inline" data-toggle="modal" data-target="#editModal<%= index %>">
            <i class="fa fa-pencil"></i>
        </a>
    </div>
    <p class="inline"><%= truncate(task.location, length:20) %></p>
</div>

<% if task.labor.present? && task.materials.present? %>

<!-- if labor or materials are both available -->
<div class="col-md-3 column">
    <%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class="fa fa-pencil"></i><% end%>
    <p class="inline pull-right">
        <span class="text-success currency"><%= number_to_currency(task.labor) %></span>
    </p>
</div>
<div class="col-md-3 column">
    <%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
    <p class="inline pull-right">
        <span class="text-success currency"><%= number_to_currency(task.materials) %></span>
    </p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">

    <a id="deleteTask">
        <i class="fa fa-remove text-danger pull-right" > </i>
    </a>
    <a data-toggle="modal" data-target="#imageModal<%= index %>">
        <i class="fa fa-camera text-success pull-right"></i>
    </a>
    <a class="text-primary" data-toggle="modal" data-target="#attachmentModal<%= index %>">
        <i class="fa fa-paperclip pull-right"></i>
    </a>

    <% if task.task_photos.any? || task.attachments.any? %>
    <a class="text-green" data-toggle="modal" data-target="#attachments<%= index %>" tooltip="View Attachments">
        <i class="fa fa-eye pull-right" > </i>
    </a>
    <% end %>

</div>

<% elsif task.labor.blank? && task.materials.present? %>
<!-- Else if labor is blank and materials are present -->
<div class="col-md-3 column">
    <%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
    <%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
    <p class="inline pull-right">
        <span class="text-success currency"><%= number_to_currency(task.materials) %></span>
    </p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
    <%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>

<% elsif task.materials.blank? && task.labor.present? %>
<!-- Else if materials is blank and labor is present -->
<div class="col-md-3 column">
    <%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
    <p class="inline pull-right">
        <span class="text-success currency"><%= number_to_currency(task.labor) %></span>
    </p>
</div>
<div class="col-md-3 column">
    <%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
    <%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>

<% else %>
<!-- Else materials and labor are both blank -->
<div class="col-md-3 column">
    <%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
    <%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
    <%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>

<% end %>

不愿提交的模式

<!-- attachments modal -->
<div class="modal inmodal fade" id="attachmentModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Attach Documents</h4>
                <small class="font-bold">Upload quotes, sales orders, receipts and invoices.</small>
            </div>

            <div class="modal-body">
                <div class="row">
                    <%= bootstrap_form_for [task, Attachment.new] do |f| %>

                    <div class="col-md-4">
                        <%= f.text_field :name %>
                    </div>
                    <div class="col-md-4">
                        <%= f.text_field :amount, prepend: "$", append: ".00", label:"Total (optional)" %>
                    </div>
                    <div class="col-md-4">
                        <%= f.file_field :file %>
                    </div>

                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                <%= f.submit "Add Attachment", class:"btn btn-primary btn-outline b-r-xs" %>
                <% end %>
            </div>
        </div>
    </div>
</div>
<!-- end attachments modal -->

<!-- images modal -->
<div class="modal inmodal fade" id="imageModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Attach Images</h4>
                <small class="font-bold">Upload images and descriptions.</small>
            </div>

            <div class="modal-body">
                <div id="target">
                </div>
                <%= bootstrap_form_for [task, TaskPhoto.new] do |f| %>

                <div class="field">
                    <%= f.hidden_field :property_manager_id, value:current_manager.id %>
                </div>
                <div class="field">
                    <%= f.file_field :photo %>
                </div>
                <div class="field">
                    <%= f.text_field :description %>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white btn-outline b-r-xs" data-dismiss="modal">Close</button>
                <%= f.submit "Add Photo", class:"btn btn-primary btn-outline b-r-xs" %>
                <% end %>
            </div>
        </div>
    </div>
</div>
<!-- end images modal -->

Answer 1

事实证明，在我的模式页脚中提交是导致错误的原因。

虽然它在初始页面加载时工作正常，但在 ajax 刷新时却导致错误。将提交按钮与我表单的其余部分一起移动到模态主体中解决了我的问题。

希望这对以后的人有所帮助！

Rails Ajax 刷新中断模式上传表单提交

Rails Ajax Refresh Breaks Modal Upload Form Submit

ajax

forms

ruby-on-rails-4

bootstrap-modal

submit-button