How to Load In Content with jQuery?

Question

Hello, I am trying to add ajax functionality to my pagination so the content loads in the same page instead of the user having to navigate to another page when clicking the page links.

I should mention that I am using this php pagination class.

Being new to jquery, I am unsure of how to properly do this with the pagination class.

This is what the main page looks like:

<?php
$categoryId=$_GET['category'];
echo $categoryId;
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="jquery_page.js"></script>

<?php
    //Include the PS_Pagination class
    include('ps_pagination.php');
    //Connect to mysql db
    $conn = mysql_connect('localhost', 'root', 'root');
    mysql_select_db('ajax_demo',$conn);
    $sql = "select * from explore where category='$categoryId'";
    //Create a PS_Pagination object
    $pager = new PS_Pagination($conn, $sql, 3, 11, 'param1=value1&param2=value2');
    //The paginate() function returns a mysql
    //result set for the current page
    $rs = $pager->paginate();
    //Loop through the result set

echo "<table width='800px'>";

    while($row = mysql_fetch_assoc($rs)) {            

                echo "<tr>";
                    echo"<td>";
                    echo $row['id'];
                    echo"</td>";

                    echo"<td>";
                    echo $row['site_description'];
                    echo"</td>";

                    echo"<td>";
                    echo $row['site_price'];
                    echo"</td>";
                echo "</tr>";

    }
echo "</table>";

        echo "<ul id='pagination'>";

            echo "<li>";
            //Display the navigation
            echo $pager->renderFullNav();
            echo "</li>";

        echo "</ul>";

?>

<div id="loading" ></div>
<div id="content" ></div>

<a href="#" class="category" id="marketing">Marketing</a>

<a href="#" class="category" id="automotive">Automotive</a>

<a href="#" class="category" id="sports">Sports</a>

Any help on this would be great. Thanks.

Answer 1

$("a.category").live("click", showContent)

function showContent()
{
   $("#content").load("/url/path/" + $(this).attr("id"));
}

will load either /url/path/marketing, /url/path/automotive or /url/path/sports

into the content div