Something wrong with ajax code..........

[GlenRogers]

I have a page with a menu of categories and subcategories of products. Categories have a class 'category' and subcategories have a class 'subcategory'. When either is clicked some AJAX sends the category to some php to compile the html which the AJAX then sends back to the page to populate a div. This part works fine.

There is a function in the code to split the returned records. So say there are 6 records and the page is to show 2 at a time then there are 3 pages. I get the correct amount of pages displayed(1 2 3) but all 6 records displayed on each!

Can anyone see the problem?

$('a.category, a.subcategory').click(function(e) {
    e.preventDefault();
    // get the class of the link
    var linkClass = $(this).attr("class");
    //get the text of the link by converting the clicked object to string
    var linkText = new String(this);
    // the value after the last / is the category ID
    var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
    // put the post parameters into 'params' to pass through the AJAX post request
    var params = {};
    params[linkClass] = categoryValue;  
    // send the category ID to the showproducts.php script using jquery ajax post method
    // send along a category ID
    // on success insert the returned text into the chosen div
    $.post('../inc/showproducts.php', params, function(data) {
        var totalRecords = $(data).length;
        var pageSize = 2
        var numOfPages = Math.ceil(totalRecords / pageSize);
        //make page links
        var i,
          pageLinks = '<div class="pageLinks">';
        for (i = 0; i < numOfPages; i++) {
          pageLinks += '<a href="#" onclick="showProductPage(' + i + ');return false;">' + (i + 1) + '<\/a> ';
        }
        pageLinks += '<\/div>';
        //display returned data and page links in chosen div (.showproduct)
        $('.showproduct').html(pageLinks + data);
        showProductPage(0);
    });
});
//function to slice up records into pages
function showProductPage( pageNo ) {
    var perPage = 2; T
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.image').hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

Thanks for looking...............

[AleMonteiro]

The function showProductPage is fine.
Post one example of the data content.

One thing, you don't need '<\/div>', just '</div>' is fine.

[GlenRogers]

Hi,wat do you mean by data content? Is it the categories and subcategories IK'm post, or the products I'm returning??

Sorry if I'm being obtuse here!

[AleMonteiro]

The returned products. What does the var data hold?

[GlenRogers]

This is my showproducts file

include 'connect.php';
   if(isset($_POST['category'])){
      // cast the category to integer (just a little bit of basic security)
      $cat = (int) $_POST['category'];
      $q = "SELECT * FROM products WHERE cat=$cat ORDER BY id DESC";
      $result = $link->query($q);
      $returnHtml = '';

         while($row = mysqli_fetch_array($result)) {

        $returnHtml .= "<div class='product'>"; 
        $returnHtml .= "<a href='products.php' target='_blank''>";
        $returnHtml .= "<img class='nailthumb-container'";
        $returnHtml .= "src='{$row['image']}' ";;
        $returnHtml .= "alt='{$row['name']}' ";
        $returnHtml .= "title='{$row['name']}' />";
        $returnHtml .= "</a>";
        $returnHtml .= "<div class='imgLabel'>{$row['name']}</div>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['price']}</div></div>";

         }
       }

   else if(isset($_POST['subcategory'])){
      // cast the category to integer (just a little bit of basic security)
      $subcat = (int) $_POST['subcategory'];
      $q = "SELECT * FROM products WHERE subcat=$subcat ORDER BY id DESC";
      $result = $link->query($q);
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

         while($row = mysqli_fetch_array($result)) {

        $returnHtml .= "<div class='product'>";  
        $returnHtml .= "<a href='products.php' target='_blank''>";
        $returnHtml .= "<img class='nailthumb-container'";
        $returnHtml .= "src='{$row['image']}' ";;
        $returnHtml .= "alt='{$row['name']}' ";
        $returnHtml .= "title='{$row['name']}' />";
        $returnHtml .= "</a>";
        $returnHtml .= "<div class='imgLabel'>{$row['name']}</div>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['price']}</div></div>";

         }
       }
   else{
        print_r($_POST);
        die('No category has been chosen'); 
   }
   echo $returnHtml;

[AleMonteiro]

The problem is that you are using the selector .image but it doesn't exist on your html.

Try this

function showProductPage( pageNo ) {
    var perPage = 2; T
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.showproduct').find("div.product").hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

[paulkd]

Hi Glenn,

Not actually answering your question but just offering some advice.

Move your if/else to the top and then you'll only need one block of html.

[GlenRogers]

Thanks for that AleMonteiro but its still showing all the records on one page!

[GlenRogers]

Thanks for the tip paulkd!!

[AleMonteiro]

Put an alert($('.showproduct').find("div.product").length); on the showProductPage function and see what it says.

[GlenRogers]

I finally figured it out when you prompted me by sayin .image wasnt in my html. I used this for another site where .image was there, I should have been usiing the selector .product! Feel very silly now!!!