Question

我有一个表，它是由foreach循环生成的（在opencart 3中，它是为循环（语法）使用的）。我为每行有一个编辑按钮，并通过row_id打开具有实际信息的模式。但是在由ajax提交的表单上，它不接受选定的行ID，也不接受最后一个row_id。（我是通过隐藏的输入发送的，但也不起作用）如何发送选定的ID并按要求的ID进行更新？这是我的代码

$(document).on('click', '#saveeditedrule', function(e) {
  e.preventDefault();

  var action = $(this).data('action');
  var rule_id = $('#rule_id').val();

  $.ajax({
    type: "post",
    url: action,
    cache: false,
    data: {
      'credit_rule_id': rule_id
    },
    beforeSend: function() {
      console.log('Start...');

    },
    complete: function() {
      $('#saveeditedrule').button('reset');
    },
    success: function(data) {
      alert(rule_id);
      console.log('done');

    },
    error: function() {
      console.log('something is wrong');
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table id="examples" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>column1</th>
      <th>column 2</th>
      <th width="80px">Action</th>
    </tr>
  </thead>
  <tbody>
    {% for rules in credittules %}
    <tr>

      <td>Something</td>
      <td>Something 2</td>
      <td>
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editModal{{ rules.credit_rule_id }}">Edit</button>
      </td>

      <!-- here is my modal--->
      <div class="modal fade" id="editModal{{ rules.credit_rule_id }}" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <form id="form-rule" enctype="multipart/form-data">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
              </div>

              <div class="modal-body">
                <input type="hidden" name="rule_id" id="rule_id" value="{{ rules.credit_rule_id }}" />

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-toggle="modal" data-target="#deleteconfirm" data-loading-text="{{ text_loading }}">{{ text_sil }}</button>
                <button type="button" class="btn btn-info" data-target="#editconfirm" data-loading-text="{{ text_loading }}"><i class="fa fa-pencil" aria-hidden="true"></i>{{ text_edit }}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_no }}</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="modal fade" id="deleteconfirm" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-footer">
              <p style="text-align:center;">{{ text_confirm_delete }}</p>
              <hr />
              <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">{{ text_no }}</button>
              <button type="button" class="btn btn-success pull-right" data-action="{{ action_delete_rule }}" data-dismiss="modal" id="deleteeditedrule">{{ text_yes }}</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="editconfirm" role="dialog" style="z-index: 1051;">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-footer">
              <p style="text-align:center;">{{ text_confirm_edit }}</p>
              <hr /> {{ rules.credit_rule_id }}
              <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">{{ text_no }}</button>
              <button type="button" class="btn btn-success pull-right" data-action="{{ action_rule }}" data-dismiss="modal" id="saveeditedrule">{{ text_yes }}</button>
            </div>
          </div>
        </div>
      </div>
    </tr>

    {% endfor %}
  </tbody>
</table>

Answer 1

如今，与使用隐藏输入相比，实际上更容易使用data属性

twig

{% for rules in credittules %}
    ...
    <button type="button" class="btn btn-success pull-right" data-action="{{ action_delete_rule }}" data-rule-id="{{ rules.credit_rule_id }}" data-dismiss="modal" id="deleteeditedrule">{{ text_yes }}</button>
    ...
{% endfor %}

javascript

$(function() {
    $(document).on('click', 'button[data-rule-id]', function() {

          var action = $(this).data('action');
          var rule_id = $(this).data('rule-id');

          $.ajax({
            type: "post",
            url: action,
            cache: false,
            data: {
              'credit_rule_id': rule_id
            },
            beforeSend: function() {
              console.log('Start...');

            },
            complete: function() {
              $('#saveeditedrule').button('reset');
            },
            success: function(data) {
              alert(rule_id);
              console.log('done');

            },
            error: function() {
              console.log('something is wrong');
            }
          });       
    });
});

从foreach循环中按行ID发送数据（Opencart 3）

1 个答案: