我有一張表,它有兩列使用ajax。當在ajax中按下瀏覽器的後退按鈕時,上一頁不能加載
在第一列中列出我的工作與job.call.php
的幫助和當作業已經被點擊的第一列,則工作負載的詳細信息,在第二列與job.details.php
幫助。
這是執行AJAX加載過程jQuery代碼:
$(document).ready(function() {
if(window.location.hash) {
var id = window.location.hash.replace('#id-', '');
$('#details').load('job.details.php?id=' + id);
//-----job.unclick.hide.row.select
var div = document.getElementById("job.unclicked");
div.style.display = "none";
}
});
這是表:
<td colspan="3" style="padding:0; width:20%; height:20%;">
<?php include "job.header.php";?>
</td>
</tr>
<tr>
<td style="width:400px; padding:0; background-color:rgba(255, 255, 255, 0.9); vertical-align: initial;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-height:100%; height:100px; margin:0; padding:0;" valign="top">
<tr>
<td style="width:400px; padding:0; vertical-align: initial; height: 35px;">
<div style="position: fixed;z-index: 1;">
<table border='0' cellpadding='0' cellspacing='0' style='width:400px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);'>
<thead>
<tr>
<th position='fixed' overflow='hidden' width='19%'>Job Title</th>
<th position='fixed' width='7%'>Location</th>
<th width='5%'>Expires</th>
</tr>
</thead>
</table>
</div>
</td>
</tr>
<tr>
<td style="width:400px; padding:0; vertical-align: initial; height:100%; bottom: 0; top:0; ">
<?php require "module/job.call.php";?>
</td>
</tr>
</table>
</td>
<td width="100%" style="min-width:600px; padding:0; background-color:rgba(255, 255, 255, 0.9); height:100%; bottom: 0; top:0; border: 1px; border-style: groove;" valign="top">
<div class="content mCustomScrollbar">
<div id="job.unclicked" style="width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0; overflow:auto;"><?php include '../module/job.unclicked.php' ?></div>
<div id="details" style="width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0; overflow:auto;">
</div>
</div>
</td>
<td width="150px" style="padding:0; background-color:rgba(255, 255, 255, 0.9); vertical-align:top;">
</td>
</tr>
</table>
Job.call.php文件
$result = mysqli_query($conn,"SELECT * FROM job where approved='1' ORDER BY `CreatedTime` DESC");
echo "<table id='maintable' class='table-fill' border='0' cellpadding='0' cellspacing='0' style='width:400px;'>";
while($row = mysqli_fetch_array($result)) {
if (strlen($row['positiontitle']) > 23) $row['positiontitle'] = substr($row['positiontitle'], 0, 22) . "...";
if (strlen($row['companyname']) > 23) $row['companyname'] = substr($row['companyname'], 0, 35) . "...";
if (strlen($row['location']) > 23) $row['location'] = substr($row['location'], 0, 13) . "...";
if (strlen($row['jobcategory']) > 19) $row['jobcategory'] = substr($row['jobcategory'], 0, 18) . "...";
echo "<tr onclick=\"get_data(123)\" ref=\"job.details.php?id=".$row['id']."\" target=\"content\" class=\"positiontitle-link\" data-id=\"" . $row['id'] . "\">";
echo "<td position='fixed' overflow='hidden' width='11%'><font style='text-shadow: none;'>" . $row['positiontitle'] ."</font> <br> <font style='font-size:10px;'>". $row['companyname']."</font></a></td>";
echo "<td position='fixed' width='7%'>" . $row['location'] . " <br> <font style='font-size:10px;'>". $row['jobcategory']."</font></td>";
echo "<td style='padding:0;' width='5%'>" . $row['closingdate'] . "</td>";
echo "</tr>";
}
echo "</table>"
我的問題:
當我點擊第一列中的作業時,作業加載正確,但是當我點擊瀏覽器的返回按鈕去上一頁時,url更改但頁面未加載。
我覺得有這個代碼的問題:
$(document).ready(function() {
if(window.location.hash) {
var id = window.location.hash.replace('#id-', '');
$('#details').load('job.details.php?id=' + id);
//-----job.unclick.hide.row.select
var div = document.getElementById("job.unclicked");
div.style.display = "none";
}
});
謝謝,但所有的來源是靜態頁面,我用來從MySQL數據庫調用數據。 – arafi 2014-10-27 09:59:12
關於瀏覽器後退按鈕前一頁將被稱爲不是由AJAX加載的同一頁面,因此您需要在瀏覽器的緩存中顯式地推送該網址,因此點擊返回按鈕時該URL將被調用而不是調用前一頁 – UtkarshBhavsar 2014-10-27 11:11:44
謝謝,你能幫我怎麼把它嵌入我的代碼中嗎? – arafi 2014-10-29 04:13:13