javascript - 防止模态在选择后将数据保留在缓存中

Question

在我的 Twig View 中，我从 Controller 查询中恢复，用户信息在如下表中:

<table id="userDataTables" class="display table-responsive" cellspacing="0" width="100%" style="font-size: 95%;">
  <thead>
    <tr>
      <th>Username</th>
      <th>id</th>
      <th>Email</th>
      <th>phone</th>
      <th>Registered at</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for user in arrayuser %}
      <tr>
        <td>{{ user.username|capitalize }}</td>
        <td>{{ user.id|capitalize }}</td>
        <td>{{ user.emailCanonical }}</td>
        <td>{{ user.phone }}</td>
        <td>{{ user.createdAt|date("Y/m/d", "Europe/Paris") }}</td>
        <td>
          <select class="redirectSelect form-control">
            <option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;">choisir une action</option>
            <option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}">Edit Profile</option>
            <option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}">Show comment(s)</option>
            <option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;">Delete user</option>
          </select>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

正如您所看到的，我的表格中的每个用户行有一个像这样的选择标签:

<select class="redirectSelect form-control">
    <option value="" disabled selected style="font-weight: bold; font-style: italic; text-transform: lowercase; color: grey;">choisir une action</option>
    <option value="{{ path('consumer_profile_edit', {'slug': user.slug }) }}">Edit Profile</option>
    <option value="{{ path('index_admin_consumer_comment_pannel', {'slug': user.slug }) }}">Show comment(s)</option>
    <option class="deleteInscription" value="#" data-href="{{ path('delete_user_process', {'id': user.id}) }}" data-toggle="modal" data-target="#consumerDeleteModal" style="font-weight: bold; color: #CF000F;">Delete user</option>
</select>

仅当管理员选择“删除用户”选项时，我才会显示模式。

但是，实际上模态保留了切换的数据，所以即使我选择要删除的不同用户，我认为由于模态缓存，它也不是被删除的权利。因此，我想找到一种解决方案来清除此缓存，或者创建一个进程作为模态目标正确的用户 ID 并删除正确的用户 ID。

编辑

The modal keeps always the first entry of user array I return in my view. For example, I return an array with 20 users, with their informations like ids, names, phones, emails ... etc ORDER BY id ASC.

If I choose user with id 5 and I want to delete him, all my process concerning the query to delete a particular user following his id worked well in my php script. By adding a modal to prevent that this action is permanent, it always deletes the first entry (so the first user with id 1 is deleted), not the user with id 5.

这是模态的 html 和脚本？

<div class="modal fade" id="consumerDeleteModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Delete user:</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning">
          <p> Warning <b> this action is permanent ! </p>
        </div>
        <div id="deleteConsumerForm">
          <p> <b>Delete user permanently ?</b> </p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a alt="effacer consommateur">
          <button id="confirmDeletion" type="button" class="btn btn-danger">Confirm</button>
        </a>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript" charset="utf-8" async defer>
  // manage modal on google chrome
  $('.redirectSelect').on('change', function () {
    var url = $(this).val();
    if (url === "#") { // require a URL
      console.log(url);
      $('#consumerDeleteModal').modal()
    } else if (url !== "#") {
      console.log(url);
      window.location = url;
    } else {
      return false;
    }
  });

  // deleted function
  $('#confirmDeletion').bind('click', function() {
    var deleteTarget = $('.deleteInscription').attr('data-href');
    if (deleteTarget == null){
      console.log("failed !!!");
    } else {
      console.log("prepare to delete the user !!!");
      $(this).attr('href', deleteTarget);
      window.location.href = deleteTarget;
    }
  });
</script>

我该如何继续？

Answer 1

当您选择“删除”选项时，您的代码不会告诉模态框要删除哪个用户。要解决此问题，请将 deleteTarget 的声明移至顶部，并在用户选择“删除”选项时填充它，如下所示:deleteTarget = $(this).children('.deleteInscription') .attr('data-href');

演示:https://jsfiddle.net/BenjaminRay/t03jwgcd/

修订后的 JavaScript:

<script type="text/javascript" charset="utf-8" async defer>
 // manage modal on google chrome
  var deleteTarget = '';
  $('.redirectSelect').on('change', function () {
    var url = $(this).val();
    if (url === "#") { // require a URL
      console.log(url);
      $('#consumerDeleteModal').modal();
      deleteTarget = $(this).children('.deleteInscription').attr('data-href');
    } else if (url !== "#") {
      console.log(url);
      window.location = url;
    } else {
      return false;
    }
  });

  // deleted function
  $('#confirmDeletion').bind('click', function() {
    if (deleteTarget == null){
      console.log("failed !!!");
    } else {
      console.log("prepare to delete the user !!!");
      $(this).attr('href', deleteTarget);
      window.location.href = deleteTarget;
    }
  });
</script>