Problems with a infinite scroll with php jquery mysql and ajax

Question

Hi im currently developing this site:

http://remedia-solutions.com/clientes/0039_kiplingmexico/demo2/

its almost done but im currently having some troubling on a section "Coleccion" in this section the first thing you do is select a specific type of bags , once you select it, you will get only 20 bags loaded (this bags are loaded from a mysql db) when you get to the bottom of the page it will show another 20 bags. Now the problem here is that when i get to the bottom the JS function runs like 5 times :/ So is there a way it only run once then wait a bit and run it again?

Heres my Jquery code

Once you click a "Coleccion" it will do this:

$("#coleccionmenu span").click(function() {
        $("#coleccionmenu span").removeClass('focuscoleccion')
        $(this).addClass('focuscoleccion');
        $("#contbolsas").fadeOut('fast')
        var id = this.id;

        $.ajax({
          url: "respuestabolsas.php",
          type: "POST",
          data: "id=" + id,

          complete: function() {
            //called when complete
          },

          success: function(x) {
            $("#contbolsas").css("display", "none");
            $("#contbolsas").html(x)
            $(".bolsacargada").css('opacity', '0');
            $("#contbolsas").css("display", "block");
            $(".bolsacargada").each(function(index) {
                $(this).delay(300*index).animate({opacity: 1}, 400);
            });
           hovercolores();
           if ($('#contbolsas > div:contains("Rawr")').length > 0) {
            $("#text").fadeOut()
            return false;
            }
            else{
                $("#text").fadeIn()
               cargamascoleccion(id)
            }




            },

          error: function() {
            //called when there is an error
          },
        });


});

Once is loaded i need the id from the collection you just clicked so when you scroll down it only show those collections and not the other ones:

function cargamascoleccion(id){




        $("#todocoleccion").scroll(function() {



            var bottom = $("#todocoleccion").scrollTop() - $(window).height();

            if( bottom > $(".bolsacargada:last").offset().top + 300 ){

                $.ajax({
                  url: "respuestabolsas2.php",
                  type: "POST",
                  data: "id=" + id + "&idultimabolsa=" + $(".bolsacargada:last").attr('id'),

                  complete: function() {
                    //called when complete
                  },

                  success: function(x) {
                    hovercolores();
                   if(x != ""){

                        $("#contbolsas").append(x)


                   }
                    else{
                        $("#text").fadeOut()
                        return false;
                    }   

                 },

                  error: function() {
                    //called when there is an error
                  },
                });
            }
            });


        }

I doubt theres a problem on the php code i think the problem is on the function above cause it runs like 4 times when i get to the offset of the last bag. Any ideas?

Answer 1

It looks like its firing the ajax call multiple times because the condition is met multiple times while the user is scrolling. You might want to add another condition to the if statement before executing the ajax call which checks whether it has already been initiated. Something along the lines of

var ajaxComplete = true;
$("#todocoleccion").scroll(function() {



    var bottom = $("#todocoleccion").scrollTop() - $(window).height();

    if (bottom > $(".bolsacargada:last").offset().top + 300 && ajaxComplete) {

        $.ajax({
            url: "respuestabolsas2.php",
            type: "POST",
            data: "id=" + id + "&idultimabolsa=" + $(".bolsacargada:last").attr('id'),
            beforeSend: function() {
                ajaxComplete = false
            },
            complete: function() {
                //called when complete
                ajaxComplete = true;
            },

            success: function(x) {
                hovercolores();
                if (x != "") {

                    $("#contbolsas").append(x)


                }
                else {
                    $("#text").fadeOut()
                    return false;
                }

            },

            error: function() {
                //called when there is an error
            },
        });
    }
});​