Question

我有一个“接受拒绝”按钮数组。如果用户单击这些按钮，将显示单独的模型弹出窗口。接受和拒绝按钮链接具有单独的data-id和data-action。

我的目的是编写一个JavaScript函数来加载模型弹出窗口的内容，而不是重复模态代码。

ERB代码

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

每个项目都有一个接受/讨论按钮，data_id和data action是模型弹出的数据参数。

脚本

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

我需要帮助来编写一个javascript函数，该函数可以根据操作设置模型弹出窗口的主体。
基于data_id，需要从Damage_items javascript变量中选择相应的数据，然后存储在jquery哈希中的数据需要显示在模型弹出正文中。

Answer 1

您可以这样做：

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)

基于所选链接的模型弹出窗口的动态内容

1 个答案: