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. Перемещение кнопки отправки в модальное тело с остальной частью моей формы исправила мою проблему.

Надеюсь, это поможет кому-то в будущем!