防止modal在选择后将数据保留在缓存中

prevent modal from keeping data in cache following select choice

本文关键字:保留 缓存 数据 modal 选择 防止      更新时间:2023-09-26

在我的trick视图中,我从控制器查询中恢复,用户信息如下表所示:

<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并删除正确的用户。

编辑

模态始终保持我在看法例如,我返回一个包含20个用户的数组ID、姓名、电话、电子邮件等信息。。。etc按id ASC订购

如果我选择id为5用户,并且我想删除他,我的所有过程在我的php脚本中,关于删除其id之后的特定用户的查询运行良好。通过添加一个模态以防止此操作是永久性的,它总是删除第一个条目(因此删除id为1的第一个用户),而不是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>

我该如何继续?

当您选择Delete选项时,您的代码不会告诉Modal要删除哪个用户。要解决此问题,请将deleteTarget的声明移到顶部,并在用户选择Delete选项时填充它,如下所示: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>