I have an array of Accept Reject button. if a user clicks on these buttons separate model popup will show. Accept and reject button link has separate data-id and data-action.
My aim to write a single javascript function to load the content of the model popup instead of repeating the code of modal.
ERB code
<% @non_claim_items.each do |damage_item| %> <tr> <td> <div class="input-prepend"> <span class="add-on"><%= damage_item.estimated_total_repair_cost.currency %></span> <span class="uneditable-input input-small currency-format"><%= damage_item.estimated_total_repair_cost %></span> </div> </td> <td> <a data-toggle="modal" data-target="#acceptModel" data-id="<%= damage_item.id %>" data-action = 'accept' class="btn btn-small btn-primary">Accept</a> <a data-toggle="modal" data-target="#rejectModel" data-id="<%= damage_item.id %>" data-action = 'discuss' class="btn btn-small btn-default">Discuss</a> </td> </tr> <% end %> <div id="acceptModel" class="modal fade hide" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4><%= t('headings.damage_item.accept_damage') %></h4> </div> <div class="modal-body" style="max-height: 500px;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" ><%= t('navigation.buttons.confirm') %></button> <button type="button" class="btn btn-default" data-dismiss="modal"><%= t('navigation.buttons.cancel') %></button> </div> </div> </div> Against each item have one accept/discuss button, data_id and data action are data parameter to model pop.
Script
<script type="text/javascript"> var damage_items = '<%= @non_claim_items.only(:id, :estimated_total_repair_cost, :damage_location_name ).to_json.html_safe %>'; $('a[data-toggle=modal]').click(function () { if (typeof $(this).data('id') !== 'undefined') { data_id = $(this).data('id'); action = $(this).data('action'); setModelContent($(this), action, data_id) } }); function setModelContent(modal, action, data_id) { if( action == 'accept') { // based on action need to set the body of model pop up } } </script> I need help to write a javascript function that can set the body of model popup as per action.
Based on data_id, need to pick the corresponding data from the damage_items javascript variable, then data stored in the jquery hash need to show in the model popup body.
1 Answers
Answers 1
You can do it like this:
function setModelContent(modal, action, data_id) { if (action == 'accept') { // based on action need to set the body of model pop up } // Get damage item by data_id let damage_item = Object.entries(damage_items).filter(item => item[1].id == data_id); // Creating dynamically bootstrap elements and setting value of inputs by damage_item let fisrtLabel = $(document.createElement('label')).text('Cost:'); let fistInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].estimated_total_repair_cost); let firstCol6 = $(document.createElement('div')).addClass('col-sm-6') .append(fisrtLabel) .append(fistInput); let secondLabel = $(document.createElement('label')).text('location name:'); let secondInput = $(document.createElement('input')).addClass('form-control').val(damage_item[0][1].damage_location_name); let secondCol6 = $(document.createElement('div')).addClass('col-sm-6') .append(secondLabel) .append(secondInput); let formGroup = $(document.createElement('div')) .addClass('form-group') .append(firstCol6) .append(secondCol6); // Clearing modal-body and filling it by new elements $('#acceptModel').find('.modal-body').html("").append(formGroup); } 
0 comments:
Post a Comment