My question is based on this very well written tutorial: http://www.sanwebe.com/2013/03/loading-more-results-from-database
Demo: http://www.sanwebe.com/downloads/43-load-more-results
Essentially I am trying to achieve this + search. In the sense that the results would be populated based on the search query of the user.
Let me elaborate in code:
This is the main page
<?php
include("includes/db.php");
$results = mysqli_query($con,"SELECT COUNT(*) FROM courses");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$item_per_page = 10;
$total_pages = ceil($get_total_rows[0]/$item_per_page);
?>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
var track_click = 0; //track user click on "load more" button, righ now it is 0 click
var total_pages = <?php echo $total_pages; ?>;
$('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load
$(".load_more").click(function (e) { //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click <= total_pages) //user click number is still less than total pages
{
//post page number and load returned data into result element
$.post('fetch_pages.php',{'page': track_click}, function(data) {
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page smoothly to button id
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});
if(track_click >= total_pages-1) //compare user click with page number
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}
});
});
</script>
</head>
<body>
<center>
<form method="get" action="testSearch.php" enctype="multipart/form-data" autocomplete="off">
<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />
<input type="submit" id="searchButton" name="search" value="search" class="btn btn-danger" autocomplete="off"/>
<div id="results"></div>
<div align="center">
<button class="load_more" id="load_more_button">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>
</body>
</html>
and this is the fetch_page.php, essentially where the content is being populated from:
<?php
include("includes/db.php");
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$item_per_page = 10;
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($con,"SELECT course_title, course_date1, course_provider,course_sdesc FROM courses ORDER BY course_date1 DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["course_title"].'"><span class="page_name">'.$row["course_date1"].') '.$row["course_provider"].'</span><span class="page_message">'.$row["course_sdesc"].'</span></li>';
}
echo '</ul>';
?>
Now to dive into the details:
Below is the form that allow the search to happen (in the content of the index page):
<form method="get" action="testSearch.php" enctype="multipart/form-data" autocomplete="off">
<input type="text" class="search" id="searchid" name="user_query" id="searchBar" placeholder="Search for courses" />
What I was thinking of doing, which I haven't been so successful at is the following: In the heading of the main page (in the page code that calculates the pagination): I was thinking of making the following changes:
if(isset($_GET['user_query']))
{
$search_query = $_GET['user_query'];
$results = mysqli_query($con,"SELECT COUNT(*) FROM courses where course_title like '%$search_query%'");
$get_total_rows = mysqli_fetch_array($results); //total records
//break total records into pages
$item_per_page = 10;
$total_pages = ceil($get_total_rows[0]/$item_per_page);
}
?>
and if tried to also do the same in the fetch page by adjusting the code to the following:
<?php
include("includes/db.php");
if(isset($_GET['user_query']))
{
$search_query = $_GET['user_query'];
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$item_per_page = 10;
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($con,"SELECT course_title, course_date1, course_provider,course_sdesc FROM courses ORDER BY course_date1 where course_title like '%$search_query%' DESC LIMIT $position, $item_per_page");
//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["course_title"].'"><span class="page_name">'.$row["course_date1"].') '.$row["course_provider"].'</span><span class="page_message">'.$row["course_sdesc"].'</span></li>';
}
echo '</ul>';
}
?>
then nothing happens.
I think the problem lies in that I am trying to retrieve a variable from the url from another page. In other words, fetch_page.php is trying to retrieve user_query= from testSearch.php, i am not sure how to resolve it.
New Approach: I put it live, so you can have an idea of what I am trying to do: http://testapplication220-env.elasticbeanstalk.com/testSearch.php
On the testSearch.php (main page, I have done this to grab the user search query and later retrieve it).
session_start();
$search_query = $_GET['user_query'];
$_SESSION['userSearch'] = $search_query;
$results = mysqli_query($con,"SELECT COUNT(*) FROM courses where course_title like '%$search_query%'");
Then of fetch page (function, I tried doing the following):
session_start();
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$item_per_page = 10;
//get current starting point of records
$position = ($page_number * $item_per_page);
//Limit our results within a specified range.
$results = mysqli_query($con,"SELECT course_title, course_date1, course_provider,course_sdesc FROM courses ORDER BY course_date1 where course_title like '%$_SESSION['userSearch']%' DESC LIMIT $position, $item_per_page");
I think I got the answer
You are throwing the 500 error if the page variable doesn't contains number.
And you escaping the page variable from post array using filter_var function
but according to the php.net filter_var will just validate data not convert it into no. i have test it in phpfiddle also it returns string.
var_dump(filter_var('23',FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH));
so before comparing the page by is_numeric you have to cast it into integer that can be done in following way
$page = (int) $page;