简体   繁体   English

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

[英]Refresh or Reload modal after button click inside modal

On the main page I have a datatable that includes buttons for each row. 在主页上,我有一个数据表,其中包括每行的按钮。 The button allows users to click and view errors specific to that object on a popup modal. 该按钮允许用户单击并查看特定于弹出窗口模式中该对象的错误。 Within the modal I have a button where users can clear the errors. 在模式中,我有一个按钮,用户可以在其中清除错误。 When a user clicks one of the clearing buttons I'm having problems figuring out how to 1) refresh the modal to show the most recent content or 2) re-open the modal. 当用户单击清除按钮之一时,我在确定如何1)刷新模式以显示最新内容或2)重新打开模式时遇到问题。

Main page button (opens modal): 主页按钮(打开模式):

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

The main page button opens the modal, sends the $cluster varible and loads the content from the cluster_errors.php page. 主页按钮打开模态,发送$cluster变量,并从cluster_errors.php页面加载内容。

cluster_errors.php (modal content): 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>  

The cluster_errors.php modal fetches the $cluster variable from the previous button click and queries the database. cluster_errors.php模态从上一次按钮单击中获取$cluster变量并查询数据库。 The results are shown in another datatable in the modal. 结果显示在模态的另一个数据表中。 Buttons are created to clear each of the errors. 创建按钮以清除每个错误。 The clearing buttons reach out to the cluster_resolve_error.php script. 清除按钮可以访问cluster_resolve_error.php脚本。

cluster_resolve_error.php (script that clears errors): 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);

?>

Currently if the clearing button is clicked it updates the database and then forwards back to the main page via header('Location: . But then that forces the user to click the button on the mainpage to reopen the modal to clear more errors. 当前,如果单击清除按钮,它将更新数据库,然后通过header('Location: :。)转发回主页。但这随后迫使用户单击主页上的按钮以重新打开模式以清除更多错误。

How do I refresh or reload the content after the clearing button is clicked and forward the same variables? 单击清除按钮并转发相同的变量后,如何刷新或重新加载内容?

Thanks! 谢谢!

You can use Ajax to send request to the server when user clicks on <a href="./cluster_resolve_error.php"> link and then update the "Resolved" column row using the DataTables API method cell().data() . 当用户单击<a href="./cluster_resolve_error.php">链接,然后使用DataTables API方法cell().data()更新“已解决”列行时,可以使用Ajax将请求发送到服务器。

For example: 例如:

$('#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();
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM