PHP AJAX Pagination через jQuery issue

Question

Немного странный, но, вероятно, прямой ответ. В основном я использую скрипт AJAX для получения результатов из файла PHP и их распечатывают в div с применением разбивки на страницы. То, что я пытаюсь достичь, заключается в том, что страница search.php запускает значение (год) в файл getYear.php, это устанавливает процесс разбиения на страницы и отправляет год в файл парсинга разбиения на страницы, который inturn возвращает результаты. По сути, у меня есть сценарий, который отправляет год, а затем скрипт, который снова отправляет год, а также подробные сведения о странице и сценарий, который применяет разбивку на страницы. У меня это работает вручную, когда я устанавливаю год в URL, результаты печатаются, однако они не печатаются на главной странице.

Вот скрипт на файл search.php:

<script> 
    function showYear(year) { 
     if (year == "") { 
      document.getElementById("txtHint").innerHTML = ""; 
      return; 
     } else { 
      if (window.XMLHttpRequest) { 
       // code for IE7+, Firefox, Chrome, Opera, Safari 
       xmlhttp = new XMLHttpRequest(); 
      } else { 
       // code for IE6, IE5 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange = function() { 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
       } 
      } 
      xmlhttp.open("GET","getYear.php?year="+year,true); 
      xmlhttp.send(); 
     } 
    } 
    </script> 

это делает отправить значение года, и ожидает, что результаты обратно в txthint DIV, он посылает его в getYear.php:

<?php 
if(!isset($_GET['year'])){ 
echo 'No year given'; 
header("Location= search.php"); 
} 
$year = intval($_GET['year']); 

$con = mysqli_connect('localhost','XXXX','XXXX','XXXX'); 
if (!$con) { 
    die('Could not connect: ' . mysqli_error($con)); 
} 

$sql = "SELECT COUNT(taskid) FROM tasks WHERE Year(date) = '$year'"; 
$query = mysqli_query($con, $sql); 
$row = mysqli_fetch_row($query); 

// Here we have the total row count 
$total_rows = $row[0]; 
// Specify how many results per page 
$rpp = 10; 
// This tells us the page number of our last page 
$last = ceil($total_rows/$rpp); 
// This makes sure $last cannot be less than 1 
if($last < 1){ 
    $last = 1; 
} 
// Close the database connection 
mysqli_close($con); 

?> 
<script> 
var rpp = <?php echo $rpp; ?>; // results per page 
var last = <?php echo $last; ?>; // last page number 
var year = <?php echo $year; ?>; // last page number 
function request_page(pn){ 
    var results_box = document.getElementById("results_box"); 
    var pagination_controls = document.getElementById("pagination_controls"); 
    results_box.innerHTML = "loading results ..."; 
    var hr = new XMLHttpRequest(); 
    hr.open("POST", "pagination_parser.php", true); 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var dataArray = hr.responseText.split("||"); 
      var html_output = ""; 
      for(i = 0; i < dataArray.length - 1; i++){ 
       var itemArray = dataArray[i].split("|"); 
       html_output += "<tr><td>"+itemArray[0]+"</td> <td>"+itemArray[1]+"</td> <td>"+itemArray[2]+"</td> <td>"+itemArray[3]+"</td> <td>"+itemArray[4]+"</td></tr><hr>"; 
      } 
      results_box.innerHTML = html_output; 
     } 
    } 
    hr.send("rpp="+rpp+"&last="+last+"&year="+year+"&pn="+pn); 
    // Change the pagination controls 
    var paginationCtrls = ""; 
    // Only if there is more than 1 page worth of results give the user pagination controls 
    if(last != 1){ 
     if (pn > 1) { 
      paginationCtrls += '<button onclick="request_page('+(pn-1)+')">&lt;</button>'; 
     } 
     paginationCtrls += ' &nbsp; &nbsp; <b>Page '+pn+' of '+last+'</b> &nbsp; &nbsp; '; 
     if (pn != last) { 
      paginationCtrls += '<button onclick="request_page('+(pn+1)+')">&gt;</button>'; 
     } 
    } 
    pagination_controls.innerHTML = paginationCtrls; 
}; 
</script> 
</head> 
<div class="container-fluid"> <!-- Table Headers --> 
<table class="table table-hover table-responsive"> 
    <thead> 
     <tr> 
      <th></th><th>Title:</th><th>Date:</th><th>Type:</th><th>House Location:</th><th>Housemates:</th> 
      <br> 
     </tr> 
    </thead>  

<tbody> 
<div id="pagination_controls"></div> 

<div id="results_box"></div> 

</tbody> 
</div> 
</table> 

<script> request_page(1); </script> 

Вот пагинация анализатор, который делает работу:

<?php 
// Make the script run only if there is a page number posted to this script 
if(isset($_POST['pn'])){ 

    $rpp = preg_replace('#[^0-9]#', '', $_POST['rpp']); 
    $last = preg_replace('#[^0-9]#', '', $_POST['last']); 
    $year = ($_POST['year']); 
    $pn = preg_replace('#[^0-9]#', '', $_POST['pn']); 

    // This makes sure the page number isn't below 1, or more than our $last page 
    if ($pn < 1) { 
     $pn = 1; 
    } else if ($pn > $last) { 
     $pn = $last; 
    } 
    // Connect to our database here 
    $con = mysqli_connect('localhost','XXX','XXX','XXXX'); 
    if (!$con) { 
    die('Could not connect: ' . mysqli_error($con)); 
    } 
    // This sets the range of rows to query for the chosen $pn 
    $limit = 'LIMIT ' .($pn - 1) * $rpp .',' .$rpp; 
    // This is your query again, it is for grabbing just one page worth of rows by applying $limit 
    $sql = "SELECT * FROM tasks WHERE Year(date)=$year ORDER BY taskid DESC $limit"; 
    $query = mysqli_query($con, $sql); 
    $dataString = ''; 
    while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){ 
     $title = $row["title"]; 
     $dateProduced = strftime("%b %d, %Y", strtotime($row["date"])); 
     $type = $row["type"]; 
     $houseLocation = $row["houseLocation"]; 
     $housemates = $row["housemates"]; 
     $dataString .= $title.'|'.$dateProduced.'|'.$type.'|'.$houseLocation.'|'.$housemates.'||'; 
    } 
    // Close your database connection 
    mysqli_close($con); 
    // Echo the results back to Ajax 
    echo $dataString; 
    exit(); 
} 
?> 

Я вырезать ненужный код и очевидно, изменили детали подключения для обеспечения безопасности. Я также понимаю, что использую mysql, в настоящее время я изучаю mysqli в классе, но мы еще не закончили это.

Любая помощь будет действительно оценена. Спасибо

Answer 1

Ну, если сам код работает без проблем, я думаю, это потому, что ваш PHP слишком медленный для javascript. Если вы используете jquery, вы можете обернуть весь свой код в $('document').ready(function(){});. Если вы хотите придерживаться чистого JavaScript, вам нужно будет положить в немного больше работы:

document.onreadystatechange = function() { 
    var state = document.readyState 
    if (state == 'interactive') { 
     document.getElementById('interactive').innerHTML = 'Document ready to accept interactions.' 
    } else if (state == 'complete') { 
     document.getElementById('complete').innerHTML = 'Document completely loaded' 
    } 
} 

http://jsfiddle.net/electricvisions/Jacck/

Код взято отсюда: https://stackoverflow.com/a/9899701/1560336

EDIT:

Заметили фактическая проблема:

var rpp = <?php echo $rpp; ?>; // results per page 
var last = <?php echo $last; ?>; // last page number 
var year = <?php echo $year; ?>; // last page number 

Th не работает. Ваш PHP выполняется во время сервера, поэтому JS никогда не увидит эти значения. Вам нужно будет отправить их по запросу AJAX. В целом, и по нескольким причинам, смешение JS и PHP - это плохая практика.

ДРУГОЙ EDIT:

$.ajax({ 
     type: "POST", 
     url: "link to php file here", 
     data: "value1="+value1+"&value2="+value2+"&value3="+value3, 
     success: function (result) { 
      alert('It worked!'); 
     } 
}); 

Jquery немного легче делать AJAX звонки с чем простой JavaScript. Для вашего скрипта я бы лично начал, разделив все ваши javascript в файл и оставив php в php-файлах. Это упростит чтение для вас и всех остальных. Тогда вы сможете сохранить данные на php, как это.

$var1 = $_POST['value1'];