2016-12-15 2 views
0

Ich habe eine Liste von Elementen, die beim Erstellen und Aktualisieren aktualisiert wird, habe ich ein Formular, mit dem Sie Elemente hinzufügen, entfernen, inline anpassen können. Wenn Sie bearbeiten möchten, wem die Aufgabe zugewiesen ist, wird ein Modal geöffnet, das ein Teil mit dem Formular noch einmal enthält, aber das Objekt bearbeiten. Alles funktioniert gut und erfrischt wie es sollte.Rails Ajax Refresh bricht Modal Upload Formular einreichen

Das Problem Auf der gleichen Linie, die ich eine Büroklammer und eine Kamera, die auch Modalverben öffnen, die Formulare enthalten, ein Dokument zu laden oder die Kamera klicken, um ein Bild hochzuladen. Diese funktionieren einwandfrei von der Seite, wenn sie geladen wird, aber nach einer Ajax-Aktualisierung funktionieren die Übergabeschaltflächen nicht.

Der Kodex

Index Teil:

<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 %> 

Aufgabe Teil:

<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 %> 

Die Modals Das Wont Senden

<!-- 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 --> 

Antwort

0

Stellt sich heraus, dass das Senden in meiner modalen Fußzeile den Fehler verursacht hat.

Obwohl es beim ersten Laden der Seite einwandfrei funktioniert, verursachte es einen Fehler, wenn es von Ajax aktualisiert wurde. Das Verschieben des Übergabeknopfs in den Modal-Body mit dem Rest meines Formulars hat mein Problem gelöst.

Hoffe das hilft jemandem in der Zukunft!

Verwandte Themen