2014-04-26 36 views
0

我有一個PHP頁面在哪裏我加載一些div滾動到底部與AJAX調用 但是當我點擊任何股份去下一頁,當我回來從導航頁面,我的ajax滾動正在加載內容到Windows的底部不起作用。 下面是我的代碼Ajax調用不工作時,導航回到前一頁

<?php 
    $mysqli = new mysqli('localhost', 'root', '', 'table1'); 

    if(mysqli_connect_errno()) { 
     echo "Connection Failed: " . mysqli_connect_errno(); 
     } 
?> 
<html> 
<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>Load data after page scroll </title> 
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script> 
<link rel="stylesheet" href="css/style.css" type="text/css" /> 

<script type="text/javascript" language="javascript"> 

$(document).ready(function(){ 

$(window).scroll(function(){ 
    scrollMore(); 
}); 

function scrollMore(){ 
    if($(window).scrollTop() == ($(document).height() - $(window).height())){ 

    var offset = $('[id^="myData_"]').length; // here we find out total records on page. 
    var records = $(".allData").text(); 

    $(window).unbind("scroll"); 
     if(records != offset){ 
      $("#loaderImg").html('<img src="images/ajax-loader.gif" />'); 
      $("#loaderImg").show(); 
      loadMoreData(offset); 
     } 
    } 
} 

function loadMoreData(offset){ 
    $.ajax({ 
     type: 'get', 
     async:false, 
     url: 'getMoreData.php', 
     data: 'offset='+offset, 
     success: function(data){ 
     console.log(data); 
      $("#loaderImg").empty(); 
      $("#loaderImg").hide(); 
      $(".loadData :last").after(data); 
     }, 
     error: function(data){ 
      alert("ajax error occured…"+data); 
     } 
    }).done(function(){ 
     $(window).bind("scroll",function(){ 
     scrollMore(); 
    }); 
    }); 
} 


}); 
</script> 
</head> 
<body> 
<?php 
    $sql ="select * from xml"; 
    $countsql3 = mysqli_query($mysqli, $sql) or die("Cannot Get Pname Info: (".mysql_error().")"); 
    $numrows = mysqli_num_rows($countsql3); 

    $limit = 20; 
    $offset = 0; 
    $mysql = "select * from xml limit ".$offset.", ".$limit.""; 
    $countsql3 = mysqli_query($mysqli, $mysql) or die("Cannot Get Pname Info: (".mysql_error().")"); 


?> 

<div class="totalData">Total Records Found:<span class="allData"><?php echo $numrows;?></span></div> 

<div class="mainDiv"> 
<div class="tableRow"> 
<div class="firstColumn"><strong>#</strong></div> 
<div class="secondColumn"><strong>Record</strong></div> 
</div> 
<?php 
$i = 1; 
while($result = mysqli_fetch_array($countsql3)){ ?> 
<div class="tableRow loadData" id="myData_<?php echo $i;?>"> 
<div class="firstColumn"><a href="nextpage.php"><?php echo $result['PID']; ?></a></div> 
<div class="secondColumn"><?php echo $result['PID']?></div> 
</div> 
<?php $i++; }?> 
<div class="tableRow"> 
<div class="secondColumn" id="loaderImg" style="display:none;"></div> 
</div> 
</div> 



</body> 
</html> 

getMoreData.php

<?php 
$mysqli = new mysqli('localhost', 'root', '', 'table1'); 

    if(mysqli_connect_errno()) { 
     echo "Connection Failed: " . mysqli_connect_errno(); 
     } 

$offset = (isset($_REQUEST['offset']) && $_REQUEST['offset']!='') ? $_REQUEST['offset'] : ''; 
$limit = 10; 
$qry1 ="select * from xml limit ".$offset.", ".$limit.""; 
$countsql3 = mysqli_query($mysqli, $qry1) or die("Cannot Get Pname Info: (".mysql_error().")"); 
$i = ++$offset; 
while($result = mysqli_fetch_array($countsql3)){ ?> 
<div class="tableRow loadData" id="myData_<?php echo $i;?>"> 
<div class="firstColumn"><a href="nextpage.php"><?php echo $result['PID']; ?></a></div> 
<div class="secondColumn"><?php echo $result['PID']?></div> 
</div> 
<?php $i++; } ?> 

nextpage.php

<html> 
<head> 
</head> 
<body> 
hi 
</body> 
</html> 

請看代碼和指導我要解決

回答

0

在您的Ajax調用集緩存爲false,可能是瀏覽器正在緩存該呼叫,因爲它是sam e而不是真的把它關掉。禁用ajax緩存將強制它每次發送一個新的請求。

function loadMoreData(offset){ 
$.ajax({ 
    type: 'get', 
    async:false, 
    url: 'getMoreData.php', 
    cache: false, 
    data: 'offset='+offset, 
    success: function(data){ 
    console.log(data); 
     $("#loaderImg").empty(); 
     $("#loaderImg").hide(); 
     $(".loadData :last").after(data); 
    }, 
    error: function(data){ 
     alert("ajax error occured…"+data); 
    } 
}).done(function(){ 
    $(window).bind("scroll",function(){ 
    scrollMore(); 
}); 
}); 

這樣做的另一種方式是通過增加迫使方法來獲取當前日期的AJAX功能內的變量,所以:

function loadMoreData(offset){ 

var dateNow = new Date().getTime() + Math.random(); 

$.ajax({ 
    type: 'get', 
    async:false, 
    url: 'getMoreData.php', 
    cache: false, 
    data: {offset: offset, time: dateNow }, 
    success: function(data){ 
    console.log(data); 
     $("#loaderImg").empty(); 
     $("#loaderImg").hide(); 
     $(".loadData :last").after(data); 
    }, 
    error: function(data){ 
     alert("ajax error occured…"+data); 
    } 
}).done(function(){ 
    $(window).bind("scroll",function(){ 
    scrollMore(); 
}); 
}); 
+0

沒有工作全先生,有時它的工作原理,以及有時並沒有什麼。這可以做什麼@ Armlock29 – user3575612

+0

請參閱編輯另一個有關緩存的修補程序,基本上你會強制它獲取當前時間併發送它,因爲數據總是會主動更改。 – Rookasaur

+0

類似的結果sir.works 1-2次,比再次沒有工作... – user3575612