在ajax中按下浏览器的后退按钮时，无法加载上一页 [英] Previous page is not loading when browser's back button pressed in ajax

问题描述

我有一个表，其中有两列使用ajax.

I have a table that have two columns which use ajax.

在第一列中，我借助 job.call.php 列出了作业，并且在第一列中单击了某个作业后，该作业的详细信息将在第二列中加载 job.details.php .

In the first column i list the jobs with the help of job.call.php and when a job have been clicked in first column then the details of the job loads in the second column with the help of job.details.php.

这是执行ajax加载过程的jquery代码:

This is the jquery code that perform the ajax loading process:

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

这是表:

This is the table:

        <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更改但该页面未加载.

When i click on a job in first column the job loads correctly but when i click on back button of the browser to go to the previous page the url change but the page is not loading.

我认为这段代码有问题:

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

推荐答案

在AJAX调用期间浏览器的历史记录不会更新.

Browser history won't get updated during AJAX calls.

以下是可能的解决方案，

Following are the possible solutions,

1. HTML5引入了history.pushState()& history.popState()- 在此处检查...
2. 可以使用jquery插件- 在此处检查...
3. 在Javascript中手动保存每个页面/ajax调用的状态，并在页面上使用相同的状态 负载，这需要更多的精力来完成

1. HTML5 has introduced history.pushState() & history.popState() - Check here...
2. Jquery plugins could be used - Check here...
3. Manually saving the state of every page/ajax calls in Javascript and using the same on page load, which needs more effort for accomplishing

这篇关于在ajax中按下浏览器的后退按钮时，无法加载上一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！