Reputation: 303
I want to load first 10 results on my webpage then a load more button to load next 10 result using AJAX on the same page. There can be two types of URLs of my web pages.
1. www.example.com/list.php?name=ABC&area=All
2. www.example.com/list.php?name=ABC&area=BCD
If someone types URL manually and there is a mismatch in name and area means name or area doesn’t match to the database results than he/she will be redirected to error404.php.
Script:
<script type="text/javascript">
var track_page = 1;
load_contents(track_page);
$("#load_more_button").click(function (e) {
track_page++;
load_contents(track_page);
});
function load_contents(track_page){
$('.animation_image').show();
$.post( 'fetch_pages.php', {'page': track_page}, function(data){
if(data.trim().length == 0){
$("#load_more_button").text("You have reached end of the record!").prop("disabled", true);
}
$("#results").append(data);
$('.animation_image').hide();
});
}
</script>
list.php
$_SESSION['name']=$_GET['name'];
$_SESSION['area']=$_GET['area'];
<div class="wrapper">
<div id="results"></div>
<button id="load_more_button"><img src="ajax-loader.gif" class="animation_image" style="float:left;"> Load More</button>
</div>
Fetch_pages.php
include("db.php");
$item_per_page = 10;
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
$position = (($page_number-1) * $item_per_page);
$sort="id";
if(isset($_GET['sort'])&&($_GET['sort'])=='ASC'){
$sort="price ASC";
}
elseif(isset($_GET['sort'])&&($_GET['sort'])=='DESC'){
$sort="price DESC";
}
if($_SESSION['area']=='All'){
$stmt = $mysqli->prepare("SELECT * from table where name= ? ORDER BY $sort LIMIT ?,?");
$stmt->bind_param("sdd", $_SESSION['name'], $position, $item_per_page);
}
else{
$stmt = $mysqli->prepare("SELECT * from table where name= ? AND area= ? ORDER BY $sort LIMIT ?,?");
$stmt->bind_param("ssdd", $_SESSION['name'], $_SESSION['area'], $position, $item_per_page);
}
$stmt->execute();
$i=1;
$res = $stmt->get_result();
while($row4=mysqli_fetch_array($res)){
---------------
---------------
}
The above script works fine if no GET variable is available in URL. But If i want to load page content on basis of $_GET variable it gives an error that $_GET variable not defined. Where i need to define these variables.. I also have tried defining S_SESSION variables on fetch_pages.php along with list.php but it still gives an error.
What is the best way to do this ? Thanks....
Upvotes: 0
Views: 858
Reputation: 16436
change your list.php like this to access data using both post
and get
<?php
$_SESSION['name']=$_REQUEST['name'];
$_SESSION['area']=$_REQUEST['area'];
?>
<div class="wrapper">
<div id="results"></div>
<button id="load_more_button"><img src="ajax-loader.gif" class="animation_image" style="float:left;"> Load More</button>
EDIT
If you don't have to use session try this:
<script type="text/javascript">
var track_page = 1;
load_contents(track_page);
$("#load_more_button").click(function (e) {
track_page++;
load_contents(track_page);
});
function load_contents(track_page){
$('.animation_image').show();
$.post( 'fetch_pages.php', {'page': track_page,'name' : '<?=$_GET['name']?>',area:'<?=$_GET['area']?>'}, function(data){
if(data.trim().length == 0){
$("#load_more_button").text("You have reached end of the record!").prop("disabled", true);
}
$("#results").append(data);
$('.animation_image').hide();
});
}
</script>
And in Fetch_pages.php change $_SESSION
to $_POST
Upvotes: 1
Reputation:
You're not passing in the GET variables in your javascript, you have to supply name
and area
variables in your $.post
call.
Also you are using $.post
which makes the variables available via $_POST
in PHP.
Upvotes: 0
Reputation: 134
Use $_POST instead of $_GET in php or send via $.get() in javascript. Currently your javascript is sending the data as post variables as the method $.post() is called to send the data back to the server.
Upvotes: 0