0

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

3
Contributors
10
Replies
53
Views
4 Years
Discussion Span
Last Post by GlenRogers
Featured Replies
  • 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)) && ( … Read More

0

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

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

0

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!

0

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

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

Edited by AleMonteiro

0

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.

0

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

0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.