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?

I never get more than the first 20 selections, scrolling to the bottom does not trigger anything. — David Stetler
– David Stetler, Commented Jul 3, 2012 at 22:25

Amin Eshaq · Accepted Answer · 2012-07-03 22:25:37Z

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

Collectives™ on Stack Overflow

Problems with a infinite scroll with php jquery mysql and ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related