Rails Ajax Refresh Breaks模态上传表单提交

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刷新时会导致错误。将提交按钮移动到模态体中，其余的表单修复了我的问题。

希望这可以帮助将来的某个人！