Pagination links do not work properly - incorrect PHP function?

Question

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 function(generate_pagination.php (seen below)).

Here is the main page so you can 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 generate_pagination($sql) ?>
</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>

This is as mentioned above, where i think the problem persists since I know nothing of the function formats and how to properly incorporate them:

<?php
function generate_pagination($sql) {
  include_once('config.php');
  $per_page = 3;

  //Calculating no of pages
    $result = mysql_query($sql);
    $count = mysql_fetch_row($result);
    $pages = ceil($count[0]/$per_page);

  //Pagination Numbers
  for($i=1; $i<=$pages; $i++)
  {
    echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
  }
}

$ids=$_GET['ids'];
generate_pagination("SELECT COUNT(*) FROM explore WHERE category='$ids'");

?>

I thought I might as well through in the jquery 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());

//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.id;

    $("#content").load("pagination_data.php?page=" + pageNum, function(){

          $(this).attr('data-page', pageNum);

           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());
        });  
    });


});

Any help would be appreciated on getting the function to work properly. Thank you

Answer 1

IDs cannot start with numbers, give your IDs another starting string like page, like this:

In php:

for($i=1; $i<=$pages; $i++)
{
  echo '<li class="page_numbers" id="page'.$i.'">'.$i.'</li>';
}

In jQuery:

var pageNum = $(this).attr("id").replace("page","");

$("#content").load("pagination_data.php?page=" + pageNum, function(){
    $(this).attr('data-page', pageNum);
    Hide_Load();
});

That should at least start posting back something, please comment if it doesn't.