2014-10-27 56 views
-1

我有一張表,它有兩列使用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"; 
    } 
    }); 

回答

0

當你使用Ajax,瀏覽器不保存加載頁面的歷史。因此,您需要在瀏覽器緩存中明確添加頁面歷史記錄。一些插件可能會幫助您http://www.sitepoint.com/history-back-button-plugins/

+0

謝謝,但所有的來源是靜態頁面,我用來從MySQL數據庫調用數據。 – arafi 2014-10-27 09:59:12

+0

關於瀏覽器後退按鈕前一頁將被稱爲不是由AJAX加載的同一頁面,因此您需要在瀏覽器的緩存中顯式地推送該網址,因此點擊返回按鈕時該URL將被調用而不是調用前一頁 – UtkarshBhavsar 2014-10-27 11:11:44

+0

謝謝,你能幫我怎麼把它嵌入我的代碼中嗎? – arafi 2014-10-29 04:13:13

0

在AJAX調用期間,瀏覽器歷史記錄不會更新。

以下是可能的解決方案,

  1. HTML5已經推出history.pushState()& history.popState() - Check here...
  2. jQuery插件可以使用 - Check here...
  3. 手動使用Javascript保存每個頁面/ ajax調用的狀態,並使用頁面 加載時的狀態,這需要更多努力來完成
相關問題