Dynamic content for model popup based on link selected

Question

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">&times;</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>

1. I need help to write a javascript function that can set the body of model popup as per action.

2. 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.

Answer 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);

}

Online demo (jsFiddle)