Question

The following code, retrieves data from my server side, outputs to the DOM. I also create a function that checks to see if the user scrolls to to bottom of the device. If they do I then want the AJAX call to go and grab the next ten results from my server side.

function productList(department_id,listingFirstValue,listingSecondValue){
     $.mobile.changePage( "#product", { transition: "slide"} );
     var listingFirstValueRecall = parseInt(listingSecondValue) + parseInt("1");
     var listingSecondValueRecall = parseInt(listingFirstValueRecall) + parseInt("10");
     $.ajax({
          url: //URL Goes Here,
          data: "format=json",
          jsonp: "callback",
          dataType: "jsonp",
          beforeSend:function(){
               $.mobile.showPageLoadingMsg();
          },
          success: function(data){
               var numberProducts = 0;
               $.each(data, function(index) {
                    if(numberProducts <= 10){
                          $('#product-list').append("<li id='"+data[index].product_id+"'>"+data[index].product_id+"<a href='' onclick='productPage("+data[index].product_id+");'><div class='product-listing-image-wrapper'><div class='product-listing-image'><img src='http://images.nitrosell.com/product_images/9/2083/"+data[index].product_image+"' /></div></div><div class='product-listing-textual-wrapper><div class='product-listing-name'>"+data[index].product_name+"</div><div class='product-listing-price'>&pound"+data[index].product_price+"</div></div></a><div class='kill'></div></li>").listview('refresh');
                          }
               });
               $.mobile.hidePageLoadingMsg();
          },
          error: function(){
               $.mobile.hidePageLoadingMsg();
               //Output Error
          }
     })
     $(window).scroll(function(){
          if($(document).height() > $(window).height()){
              if($(window).scrollTop() == $(document).height() - $(window).height()){
                    //Output values in alert
                    //Call function
                productList(department_id,listingFirstValueRecall,listingSecondValueRecall);
              }
          }
      });
}

I call the function from another part of the application using the following –

productList(department_id+"0,"+"10");

This will load the first ten results from the server side, no problem. When I scroll to the bottom of the browser, it will load 11, 21 from the MySQL server side.

However when I scroll to the bottom of the page again, it will load 11, 21 again then it will load 22, 32 and any other times it will keep doign this and then the next set of values

Can you guys spot anything where I am going wrong?

Thanks

Answer 1

Ignore this, it was an issue with MySQL server side.