在模式内单击按钮后刷新或重新加载模式答案

【问题标题】：Refresh or Reload modal after button click inside modal在模式内单击按钮后刷新或重新加载模式
【发布时间】：2015-09-29 19:26:52
【问题描述】：

在主页上，我有一个数据表，其中包含每一行的按钮。该按钮允许用户在弹出模式中单击并查看特定于该对象的错误。在模式中，我有一个按钮，用户可以在其中清除错误。当用户单击其中一个清除按钮时，我在弄清楚如何 1）刷新模式以显示最新内容或 2）重新打开模式时遇到问题。

主页按钮（打开模式）：

<a data-toggle="modal" data-target="#viewclustererrors" href="./cluster_errors.php?cluster='.urlencode($row2['CLUSTER_NAME']).'" class="btn-sm btn-success"> Errors </a>

主页按钮打开模式，发送$cluster 变量并从cluster_errors.php 页面加载内容。

cluster_errors.php（模态内容）：

<?php  
if ( !empty($_GET['cluster'])) {
    $cluster = $_GET['cluster'];
}
?>
<head>
</head>
<body>
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
    aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">
  <?php echo $cluster;?> has errors!</h4>
  </div>
  <div class="modal-body">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title" id="clustererrortable">
          <i class="fa fa-long-arrow-right">
            <?php echo $cluster;?> error table
          </i>
        </h3>
      </div>
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover" id="cluster_error_table">
            <thead>
              <tr>
                <th>Occured <i class="fa fa-sort"></i></th>
                <th>Object <i class="fa fa-sort"></i></th>
                <th>Type <i class="fa fa-sort"></i></th>
                <th>Error <i class="fa fa-sort"></i></th>
                <th>Resolution Notes <i class="fa fa-sort"></i></th>
                <th>Resolved <i class="fa fa-sort"></i></th>
              </tr>
            </thead>
            <tbody>
              <?php                 
             $sql = "<sql query>";
                        $stmt = sqlsrv_query( $conn, $sql );
                        if( $stmt === false) {
                            die( print_r( sqlsrv_errors(), true) );
                        }

                        while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
                        echo'<tr>
                            <td>'.$row['DATE_OCCURED'].'</td>
                            <td>'.$row['OBJECT_NAME'].'</td>    
                            <td>'.$row['ERROR_TYPE'].'</td>
                            <td>'.$row['ERROR'].'</td>      
                            <td>'.$row['RESOLUTION_NOTES'].'</td>';
                            echo'
                <td>';
                   if ( $row['RESOLVED'] == 'False') {
                   echo '<a href="./cluster_resolve_error.php?object='.$cluster.'" class="btn-sm btn-warning" style="margin-left: 5px;"><i class="fa fa-thumbs-o-down"></i> Not Resolved</a>';
                   } else {
                   echo '<a href="#" class="btn-sm btn-success" style="margin-left: 5px;"><i class="fa fa-thumbs-o-up"></i> Resolved</a>';
                   }
                   echo'
                </td>
                </tr>';
                    }
                    ?>

        </tbody>
      </table>
    </div>
    <!-- /.table-responsive -->
  </div>
</div>

cluster_errors.php 模式从上一个按钮单击中获取$cluster 变量并查询数据库。结果显示在模态的另一个数据表中。创建按钮以清除每个错误。清除按钮伸向cluster_resolve_error.php 脚本。

cluster_resolve_error.php（清除错误的脚本）：

<?php 
if ( !empty($_GET['object'])) {
    $object = $_GET['object'];

} 

$sql = "<SQL QUERY>";
                    $stmt = sqlsrv_query( $conn, $sql );
                    if( $stmt === false) {
                        die( print_r( sqlsrv_errors(), true) );
                    }
        $object = NULL;

        $url = parse_url($_SERVER['HTTP_REFERER']);
        $trimmedHeader = $url['scheme'] . '://' . $url['host'] . $url['path'];
        header('Location: ' . $trimmedHeader . '#' . $tab);

?>

目前，如果单击清除按钮，它将更新数据库，然后通过header('Location: 转发回主页。但这会迫使用户单击主页上的按钮以重新打开模式以清除更多错误。

点击清除按钮后如何刷新或重新加载内容并转发相同的变量？

谢谢！

【问题讨论】：

我认为 Ajax 是解决方案，您需要通过 Ajax 在模态中获取数据，因此无需重定向，也无需重新打开模态

标签： javascript php jquery twitter-bootstrap datatables

【解决方案1】：

当用户单击<a href="./cluster_resolve_error.php"> 链接时，您可以使用 Ajax 向服务器发送请求，然后使用 DataTables API 方法 cell().data() 更新“已解决”列行。

例如：

$('#cluster_error_table').on('click', '.btn-warning', function(e){       
   var cell = $(this).closest('td');

   $.get($(this).attr('href'), function(){
      // Update "Resolved" column
      $('#cluster_error_table').DataTable().cell(cell).data(
         '<a href="#" class="btn-sm btn-success" style="margin-left: 5px;"><i class="fa fa-thumbs-o-up"></i> Resolved</a>'
      );
   });

   e.preventDefault();
});

【讨论】：

感谢您的评论。我已将您的代码放在 cluster_errors.php 模式页面中，但是当用户单击按钮时，它会转发到 cluster_resolve_error.php 并显示一个空白页面。我该如何解决这个问题？
想通了。我创建了一个隐藏的 iframe 并将其作为目标，因此它不会刷新。感谢您的帮助！
@solar411，虽然您的解决方法有效，但它不应跟随链接，因为e.preventDefault() 会阻止默认操作，您确定没有遗漏任何内容吗？
是的，我直接复制/粘贴。我唯一删除的是style="margin-left: 5px;" 中的;，因为我收到了未捕获的语法错误：意外令牌非法。