Pagination links do not work properly

Question

I'm still trying to get my pagination links to load properly. But I can't seem to find a solution to this one problem.

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, and if you look in the sql query part, you can see what I mean. If I put for instance, 'marketing' in the category= for the query, it works. But when I do it dynamically it just displays the correct amount of pages but I can't click them to go to another page:

Any help on this would be amazing, Thank you.

<?php
  $ids=$_GET['id'];

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

?>

<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>

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

});

});

Answer 1

Isn't

$.get("pagination.php", { category: this.id },

parsing

$_GET['category'] 

instead of

$_GET['id']

?