按钮单击模态

时间:2015-09-29 19:26:52

标签: javascript php jquery twitter-bootstrap datatables

在主页面上,我有一个数据表,其中包含每行的按钮。该按钮允许用户在弹出模式上单击并查看特定于该对象的错误。在模态中,我有一个按钮,用户可以清除错误。当用户点击其中一个清除按钮时,我在弄清楚如何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:转发回主页面。但随后迫使用户单击主页上的按钮重新打开模式以清除更多错误。

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

谢谢!

1 个答案:

答案 0 :(得分:1)

当用户点击<a href="./cluster_resolve_error.php">链接然后更新&#34; Resolved&#34;时,您可以使用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();
});