Question

在我的twig视图中，我从控制器查询中恢复，用户信息输入在这样的表中：

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

正如你所看到的，我在表格中有一个像这个foreach用户行的选择标签：

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

修改

模态总是保留用户数组的第一个条目   视图。例如，我返回一个包含20个用户的数组   ids，姓名，电话，电子邮件等信息 ORDER BY 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>

我该怎么办？

Answer 1

当您选择“删除”选项时，您的代码不会告诉Modal正在删除哪个用户。要解决此问题，请将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>

阻止模态在选择

修改

1 个答案: