Question

我有一个PHP页面，其中包含2个标签Entry和View。在Entry标签中，我可以在数据库中插入数据，在我的View标签上，我有一个显示数据的HTML table。还可以从我的View标签中插入数据。

我想在每次添加新数据时重新加载table。我尝试使用jQuery，但问题是它重新加载我的整个页面并将我发回我的Entry标签，即使我已从View标签中插入数据。任何人都可以告诉我，每次我向数据库添加新数据时是否有任何重新加载HTML表的规定，并且无论我添加数据的哪个位置都保持在同一个选项卡上？这是我尝试过的：

$(document).ready(function(e) {
    var refresher = setInterval("update_content();", 60000); 
})

function update_content(){
    $.ajax({
        type: "GET",
        url: "main.php",
        cache: false, 
    }).done(function( page_html ) {
        // alert("LOADED");
        var newDoc = document.open("text/html", "replace");
        newDoc.write(page_html);
        newDoc.close();
    });   
}

main.php代码在这里 -

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Logsheet-Dhanraj & Co.</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet"> 
    <link href="css/table_edit.css" rel="stylesheet"> 
  <link href="css/styleinputcontainer.css" rel="stylesheet"> 
  <link href="css/footable.standalone.css" rel="stylesheet"> 
  <link href="css/footable.core.css" rel="stylesheet"> 
<link rel="stylesheet" href="jquery-ui\jquery-ui-themes-1.11.4\jquery-ui-themes-1.11.4\themes/smoothness/jquery-ui.css" />



  </head>
    <body>
        <header>
        <div class="container-fluid">

           <div class="panel panel-info">

             <div class="panel-heading">
  <div class="panel-title ">Logsheet-Dhanraj
  <button type="button" class="close" data-dismiss="panel"><a href="http://www.google.com">&times;</a></button></div>
             </div><!--panel heading-->


             <div class="panel-body">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#Entry" data-toggle="tab">Entry</a></li>
                      <li ><a href="#View" data-toggle="tab">View</a></li>
                   </ul>

                    <div class="tab-content">

                        <div class="tab-pane fade in active" id="Entry">

                             <div class="container-fluid">

                                <form id="dataentry" action="insert_data.php" method="post">

                                <div class="row">
                                    <br />
                                    <br />
                                </div><!--empty row-->

                               <div class="row">



                                <div class="form-group col-md-2">
                                  <label for="Date">Date</label></br>
                                  <input type="text" name="date" id="date" autocomplete="off"/>
                                 </div><!--col 1-->


                                <div class="form-group col-md-3">
                                   <div class="input_container">
                                   <label for="Clientname">Client Name</label></br>
                                   <input type="text" name="clientname" id="clientname" onkeyup="autocomplete_client()" autocomplete="off" />
                                   <ul id="clientlist_id"></ul>
                                   </div><!--inputcontainer client-->  
                               </div><!--col 2-->

                               <div class="form-group col-md-4">
                                  <div class="input_container">
                                  <label for="Staff">Staff</label></br>
                                  <input type="text" name="staff" id="staff" onkeyup="autocomplete_staff()" autocomplete="off"/>
                                  <ul id="stafflist_id"></ul>
                                  </div><!--inputcontainer staff-->
                               </div><!--col 3-->

                                 </div><!--row1-->

                                 <div class="row">
                                    <div class="form-group col-md-12">
                                    <label for="Matter">Matter</label></br>
                                    <textarea rows="4" cols="60" name="matter" id="matter" ></textarea>
                                    </div><!--matter col-->
                                 </div><!--row2-->

                                  <div class="row">
                                    <div class="col-md-9">
                                    <button id="sub" name="submit" class="btn btn-info">Submit</button>
                                    <button id="cancel" class="btn btn-danger">Cancel</button>
                                    </div><!--button col-->
                                 </div><!--row3-->


                              </form>
                               <div class="container-fluid">
                               <br />
                              <div class="row">
                              <br />
                                  <p id="result"></p>
                               </div>
                             </div><!--result-container-->

                             </div><!--entry container-->

                        </div><!--entry tab-->


                        <div class="tab-pane fade" id="View">
                          <div class="container-fluid" id="view_result"><br />
                             <form id="viewentry" action="view_insert.php" method="post">

                            <div class="inputWrapper">
                            <div class="row">

                             <div class="col-md-3">
                              <div class="input_container">
                            <label for="Client Name">Client Name</label><br />
                            <input type="text" name="viewclientname" id="viewclientname" onkeyup="viewautocomplete_client()" autocomplete="off"/>
                            <ul id="viewclientlist_id"></ul>
                             </div>
                           </div>

                             <div class="col-md-3">
                              <div class="input_container">
                             <label for="Staff Name">Staff Name</label><br />
                            <input type="text" id="viewstaff" name="viewstaff" onkeyup="viewautocomplete_staff()" autocomplete="off"/>
                            <ul id="viewstafflist_id"></ul>
                             </div>
                           </div>

                              <div class="col-md-4">
                             <label for="Matter">Matter</label><br />
                            <input type="text" id="matter" name="matter" />
                             </div>

                              <div class="col-md-1">
                                <br />
                                <button id="add" class="btn btn-info">Add New</button>
                              </div>
                              <div class="col-md-1">
                                <br />
                                <button id="can" class="btn btn-danger">Cancel</button>
                              </div>
                             </div>
                           </div>
                         </form>
                         <p id="done"></p>
                             <div class="row">
                           <br /><br /><label for="Search">Search:</label>
                           <input type="text" id="filter" /><br><br>
                         </div>
                         <div id="divGrid">
                             <table class="footable" data-filter="#filter" id="tableresult">
                               <thead>

                                <th>Client name</th>
                                 <th>Staff name</th>
                                 <th>Matter</th>
                                 <th> Delete</th>
                              </thead>

 <?php
include('db.php');
$sql=mysql_query("SELECT  * FROM  newdata ORDER BY client_name ASC");

while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$clientname=$row['client_name'];
$staff=$row['staff'];
$matter=$row['matter'];

?>
<tr id="<?php echo $id; ?>" class="edit_tr">

<td class="edit_td" >
<span id="client_<?php echo $id; ?>" class="text"><?php echo $clientname; ?></span>
<input type="text" value="<?php echo $clientname; ?>" class="editbox" id="client_input_<?php echo $id; ?>" /&gt;
</td>

<td class="edit_td">
<span id="staff_<?php echo $id; ?>" class="text"><?php echo $staff; ?></span> 
<input type="text" value="<?php echo $staff; ?>" class="editbox" id="staff_input_<?php echo $id; ?>"/>
</td>

<td class="edit_td">
<span id="matter_<?php echo $id; ?>" class="text"><?php echo $matter; ?></span> 
<input type="text" value="<?php echo $matter; ?>" class="editbox" id="matter_input_<?php echo $id; ?>"/>
</td>



<td class="delete_td"><input type="button" id="del" class="btn btn-danger" value="&times;"></input></td>

</tr>



<?php
}

?>

</tbody>
  <tfoot class="hide-if-no-paging">
    <th>                       </th>
     <th>
        <div class="pagination pagination-centered"></div>
     </th>
    <th>             </th>
    <th>             </th>
  </tfoot>
</table>
</div>
                           </div>
                        </div><!--view tab-->


                    </div><!--tab content-->

             </div><!--panel body-->


</div><!--panel info-->

</div><!--container-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/footable.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

<script type="text/javascript" src="js/footable.filter.js"></script>
<script type="text/javascript" src="js/footable.paginate.js"></script>
<script type="text/javascript" src="scripts/autocomplete.js"></script>
<script type="text/javascript" src="scripts/view_autocomplete.js"></script>
<script type="text/javascript" src="scripts/footable.js"></script>
<script type="text/javascript" src="scripts/insert_submit.js"></script>
<script type="text/javascript" src="scripts/view_insert.js"></script>
<!--<script type="text/javascript" src="scripts/selected_row.js"></script>-->
<script type="text/javascript" src="scripts/table_edit.js"></script>
<script type="text/javascript" src="scripts/deletefootable_row.js"></script>
<script type="text/javascript">
      $(function() {  
        $( "#date" ).datepicker({
            dateFormat: 'yy/mm/dd',
          changeMonth: true,
          changeYear: true
        });
      });

</script>
<script>
$(document).ready(function(e) {

    var refresher = setInterval("update_content();",60000); // 60 seconds

})

function update_content(){

    $.ajax({
      type: "GET",
      url: "main.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
      cache: false, // be sure not to cache results
    })
      .done(function( page_html ) {
       // alert("LOADED");
    var newDoc = document.open("text/html", "replace");
    newDoc.write(page_html);
    //alert(page_html);
    newDoc.close();

    });   

}
</script>

</body>
</html>

Answer 1

jquery的.load()方法就是这样做的：

function update_content() {
    $('#divGrid').load('main.php #divGrid>table');
}

如何在添加/更改数据库记录时重新加载表内容

1 个答案: