CODEWITHSUNDEEP
jqueryjquery-mobile
Oshik Ernst
Oshik Ernst

Reputation: 114

JqueryMobile - how do i run a function only on one html page?

i am building a new app using jqm. all javascript is placed in index.html, on another page (cat.html) i am using infinite scroll to display posts in category, when you scroll, after 15 posts it loads more 15 and more 15.... after the cat.html page is visited and the function executed the functions is keep running on all other pages (only after you visit the cat.html).

this is the code of execution:

how do i tell other pages not to use this code?

$('#SaloonaMobileCatPage').live('pageshow', function(event) 
{

$(window).bind('scrollstop', function(){

if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)){

$.mobile.showPageLoadingMsg();
var id = getUrlVars()["catid"];
sf = sf + 15;


$.ajax({
type: "GET",
cache: false,
url: "http://saloona.co.il/mobile/mobile_xml/read_cats_xml.php?cat_id=" + id +       "&start_from=" + sf,
dataType: "xml",
success: parseXmlCatsMore
});

}
});

Upvotes: 1

Views: 563

Answers (1)

Jasper
Jasper

Reputation: 75993

When the pageshow event fires for the cat page you can bind the scrollstop event handler and when the pagehide event fires for the cat page you can unbind the scrollstop event handler:

$(document).delegate('#SaloonaMobileCatPage', 'pageshow', function(event) {

    $(window).bind('scrollstop.cat-page', function(){

        if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)){

            $.mobile.showPageLoadingMsg();
            var id = getUrlVars()["catid"];
            sf = sf + 15;

            $.ajax({
                type     : "GET",
                cache    : false,
                url      : "http://saloona.co.il/mobile/mobile_xml/read_cats_xml.php?cat_id=" + id + "&start_from=" + sf,
                dataType : "xml",
                success  : parseXmlCatsMore
            });
        }
    });
}).delegate('#SaloonaMobileCatPage', 'pagehide', function () {
    $(window).unbind('scrollstop.cat-page');
});

Notice how I added a namespace to the event types so I can add/remove just the event handler(s) I want to remove.

Another approach would be to add an if/then statement to the scrollstop event handler that checks if the current page is the cat page:

$(document).delegate('#SaloonaMobileCatPage', 'pageshow', function(event) {

    $(window).bind('scrollstop.cat-page', function(){

        if ($.mobile.activePage[0].id == 'SaloonaMobileCatPage' && $(this).scrollTop() + $(this).height() >= ($(document).height() - 100)){

            $.mobile.showPageLoadingMsg();
            var id = getUrlVars()["catid"];
            sf = sf + 15;

            $.ajax({
                type     : "GET",
                cache    : false,
                url      : "http://saloona.co.il/mobile/mobile_xml/read_cats_xml.php?cat_id=" + id + "&start_from=" + sf,
                dataType : "xml",
                success  : parseXmlCatsMore
            });
        }
    });
});

Notice how I get the ID of the current page by using $.mobile.activePage[0].id and check it against the ID of the cat page so that the code within the if/then statement will only run if the user is on the cat page.

Upvotes: 2

Related Questions