Content added twice though only looped once

Question

I want to add more content to my feed making use of AJAX and it does add content - but it adds it twice. To exclude causes like the AJAX request being submitted two times I added the integer i. But i only equals 1 (as stated by my h1 element) if I scroll down.

The AJAX success function receives a json object (which I can see in the alert) which is then transformed to html twice (the same object and accordingly the same html). Do you have any idea why this problem occurs?

jQuery:

function loadMore()
{
    var i = 0;
    var accountpar = $(".parent").length;

    $.ajax({
        url: 'homemore.php',
        type: 'post',
        data: {
            'account':accountpar
        },
        success: function(datanew) {
            i++;
            var datarec = datanew.replace(/},]$/,"}]");
            var string  = json2html.transform(datarec,template);
            alert(string);
            $(string).insertAfter($('.parent').last());
        }
    });
    $(window).bind('scroll', bindScroll);
}

function bindScroll(){
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).unbind('scroll');
        loadMore();
    }
}

$(window).scroll(bindScroll);

What happens when you alert the var string? Perhaps it's inserting the string into multiple .parents? — JamesG, Apr 02 '16 at 06:56
@JamesG the alert just comes up twice. I think it's because of something with the scrolling... Cause if I'm really careful and scroll down bit by bit the alert is shown only once and thus the content is only added once as well... — Moritz, Apr 02 '16 at 07:02
@Moritz you must be binding the scroll event twice. Can you show us the complete code? — Rajshekar Reddy, Apr 02 '16 at 07:14
@Moritz if that is the complete code then when are you binding the scroll event for the first time?? its only inside the loadMore function and no where else. Am I missing anything? — Rajshekar Reddy, Apr 02 '16 at 07:18
@Reddy sorry, I really missed something I updated the code. :) (see the window scroll down there) — Moritz, Apr 02 '16 at 07:21
@Moritz great!! now try this, remove the `unbind` line inside the `bindScroll` function , and also remove the `bind` line of code inside the `loadMore` and try now. — Rajshekar Reddy, Apr 02 '16 at 07:24
@Reddy tried that unfortunately didn´t work... :/ thanks though! :] — Moritz, Apr 02 '16 at 07:28

score 1 · Accepted Answer · answered Apr 02 '16 at 07:27

I'd try something like this. My sense tells me that its' capturing the 'by pixel' and firing more than once. You can download the debounce/throttle plugin and use that, and set it to like 250, or try this "once method"

if using debounce (have to download the plugin)

I re-read your post (after you updated), and you are binding twice: once like this:

$(window).scroll(bindScroll);

and again like this:

$(window).bind('scroll', bindScroll);

I feel this is a red flag here. after the re-read, I'd probably either just download the plugin and wrap this in a debounce ($(window).scroll(bindScroll);).

$.debounce( 250, bindScroll )

instead of this:

 $(window).bind('scroll', bindScroll);

try this:

$( window ).one( "scroll", function() {
     bindScroll()
});

oh interesting, glad to help. – james emanon Apr 02 '16 at 07:43 — james emanon, Apr 02 '16 at 07:43

score 0 · Answer 2 · answered Apr 02 '16 at 06:56

0

Try moving i++ below like this

success: function(datanew) {
        $("h1").text(i);
        var datarec = datanew.replace(/},]$/,"}]");
        //alert(datarec);
        var string  = json2html.transform(datarec,template);
        $(string).insertAfter($('.parent').last());
        i++;
    }

answered Apr 02 '16 at 06:56

Fil

8,225
14
59
85

Then it just says 0 at h1 – Moritz Apr 02 '16 at 06:57
And if I move the h1 under the i++ it still says 1 – Moritz Apr 02 '16 at 06:58

score -1 · Answer 3 · edited Apr 02 '16 at 13:34

-1

Instead of:

$(string).insertAfter($('.parent').last())

Use:

$('.parent').append($(string))

edited Apr 02 '16 at 13:34

Kaspar Lee

5,446
4
31
54

answered Apr 02 '16 at 07:03

Mano

1
3

Nope, that add 10 more elements if I didn't make a counting mistake. – Moritz Apr 02 '16 at 07:14

Content added twice though only looped once

3 Answers3