我有一个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">×</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; ?>" />
</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="×"></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>
答案 0 :(得分：0)
jquery的.load()方法就是这样做的：
function update_content() {
$('#divGrid').load('main.php #divGrid>table');
}