Pagination links broken - php/jquery
- by ClarkSKent
Hey, I'm still trying to get my pagination links to load properly dynamically. But I can't seem to find a solution to this one problem.
vote down star
Hi everyone, I am still trying to figure out how to fix my pagination script to work properly.
the problem I am having is when I click any of the pagination number links to go the next page, the new content does not load. literally nothing happens and when looking at the console in Firebug, nothing is sent or loaded.
I have on the main page 3 links to filter the content and display it. When any of these links are clicked the results are loaded and displayed along with the associated pagination numbers for that specific content.
I believe the problem is coming from the sql query in generate_pagination.php (seen below). When I hard code the sql category part it works, but is not dynamic at all. This is why I'm calling $ids=$_GET['ids']; and trying to put that into the category section but then the numbers don't display at all. If I echo out the $ids variable and click on a filter it does display the correct name/id, so I don't know why this doesn't work
Here is the main page so you can see how I am including and starting the function(I'm new to php):
<?php
include_once('generate_pagination.php');
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<div id="loading" ></div>
<div id="content" data-page="1"></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li class="page_numbers" id="page'.$i.'">'.$i.'</li>';
}
?>
</ul>
<br />
<br />
<a href="#" class="category" id="marketing">Marketing</a>
<a href="#" class="category" id="automotive">Automotive</a>
<a href="#" class="category" id="sports">Sports</a>
Here is the generate pagination where the problem seems to occur:
<?php
$ids=$_GET['ids'];
include_once('config.php');
$per_page = 3;
//Calculating no of pages
$sql = "SELECT COUNT(*) FROM explore WHERE category='$ids'";
$result = mysql_query($sql);
$count = mysql_fetch_row($result);
$pages = ceil($count[0]/$per_page);
?>
I thought I might as well post the jquery script if someone wants to see:
$(document).ready(function(){
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='bigLoader.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
// Editing below.
// Sort content Marketing
$("a.category").click(function() {
Display_Load();
var this_id = $(this).attr('id');
$.get("pagination.php", { category: this.id },
function(data){
//Load your results into the page
var pageNum = $('#content').attr('data-page');
$("#pagination").load('generate_pagination.php?category=' + pageNum +'&ids='+ this_id );
$("#content").load("filter_marketing.php?page=" + pageNum +'&id='+ this_id, Hide_Load());
});
});
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = $(this).attr("id").replace("page","");
$("#content").load("pagination_data.php?page=" + pageNum, function(){
$(this).attr('data-page', pageNum);
Hide_Load();
});
});
});
If any could assist me on solving this problem that would be great, thanks.
