CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user1771355
user1771355

Reputation: 43

jQuery script fires twice? Perhaps live event is firing twice?

I am building an application using the latest version of PhoneGap, jQM and jQuery 1.8.0. So far so good except for this tiny and annoying problem I came across.

I have my show.html linked from the index.html that contains the following code: 

<div id="search"> contains search bar and submit button </div>
<div id="list" style="display:none;"> 
      <ul data-role="listview" data-filter="true"> </ul>
</div>

The ul tag is empty because the list will be dynamically appended to it using ajax when the submit button is clicked. I didn't want to display the #list div at first so I set the display to none.

So this works fine, when the submit button is clicked, it will send an ajax request to the server and append the items to the list. It will also hide the search div. This works alright as well!

Now the problem comes in, I added a window.scroll function to detect when the bottom of the page is reached.

Here's my jQuery code:

$(document).on("pageshow", "#pageID", function() {
    $("#submit").click(function() {
        $.ajax({
                success: function(data, status){
                  $('#search').hide();
                  $('#list').show();
                //append to list div and refresh list here
                }
        });
    });
    //detects bottom of page
    $(window).scroll(function () {
        if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {       
            console.log('end of the page');
                        lastPostFunc(); //infinite scroll function
        } 
    });  
});

This prints 'end of the page' two times to the firebug console! This script exists in between the head tag.

Is there anyway to just make it print once? I need this because I implemented my own endless scroll function and the problem is causing my ajax request to post twice to the server. The function works great but is not the cause of the problem because even when I commented lastPostFunc() out, it still prints to the console twice!!

Edit: Personally, I don't think the answers given so far are wrong, they are correct but they do not help me solve the problem. Maybe I need to rephrase things better. I copied my code and pasted it on a standalone page, it prints only once, so my code actually has nothing wrong with it and it's working like it should be.

Therefore, I was wondering whether there's something else that's causing it to print twice after submitting the form. My form and my results page is ON the same page. Does this means it caused the live event to work twice? Thus, causing it to print to the console twice on pageshow? If I am correct, is there anyway to work around this and making it only print ONCE?

Any help is appreciated. Thank you!

Upvotes: 2

Views: 2006

Answers (3)

user1771355
user1771355

Reputation: 43

Okay I finally solved it.

Apparently all I have to do is to add this line of code to it:

    $(window).scroll(function (e) {
        if (reach bottom) {
            e.stopImmediatePropagation();
            console.log('End of the Page');
        } 
    });

And it works! Stopped printing twice for me.

Upvotes: 1

Irfan
Irfan

Reputation: 7059

May this will solve your problem 

jQuery(window).scroll(function() {
    if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {        
    console.log('test')                                         
    }
});

//Update

    var lastlogtime= null;
jQuery(window).scroll(function() {
        if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
        if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
            //your scroll logic
            console.log('test')         ;
            lastlogtime=    +new Date();                            
            }
        }
    });

Upvotes: 0

wpp
wpp

Reputation: 7333

Your function will actually write output to the console more than two times. The problem lies within your condition:

if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))

Because for every scroll within this area the condition will evaluate to true. You could change it to:

if ($(window).scrollTop() == ($(document).height() - ($(window).height())))

Upvotes: 0

Related Questions