CODEWITHSUNDEEP
jquery-mobile
user3688498
user3688498

Reputation: 23

jQuery mobile - Multiple page loads on change page

I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'

The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page. In this code the button changes the page and outputs a console.log message. On click I would expect the page to change and to see one "#btn - page x" console.log message. What happens is the page changes and I get a console message for each time I've loaded the page, not just one. Even though my code is working, this can't be right - this will just go up and up with normal user usage.

What am I not understanding here?

I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.

Same with the header button - each time I change the page, number of responses from the header button goes up.

the html:

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>problem</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 

<body> 

    <div data-role="header" data-position="fixed" data-theme="a"> 
        <a href="#" data-role="button" id="headerbtn">header button</a>
    </div>

    <div data-role="page" id="page1" data-title="Page 1">
        <div data-role="content">
            <h1>I am page 1</h1>
            <a href="#page2" data-role="button" id="btntest1">goto page2</a>
        </div>
    </div>

    <div data-role="page" id="page2" data-title="Page 2" data-theme="b">
        <div data-role="content">
            <h1>I am page 2</h1>
            <a href="#page1" data-role="button" id="btntest2" data-rel="back">goto page1</a>
        </div>
    </div>

<script src="problem.js"></script>
</body>
</html>

and the js:

$(document).on('pagebeforeshow','#page1',function(){
    console.log('#page1 pagebeforeshow');
    $('#btntest1').click(function(){
        console.log('#btn - page1');
        //$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
    });
});

$(document).on('pagebeforeshow','#page2',function(){
    console.log('#page2 pagebeforeshow');
    $('#btntest2').click(function(){
        console.log('#btn - page2');
        //$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
    });
});

$(function() {
    $("[data-role='header']").toolbar();
});

$(document).on('pagebeforeshow',function(){
    console.log('pagebeforeshow');
    $('#headerbtn').click(function(){
        console.log('headerbtn click');
    });
})


UPDATE: So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with 

$(':mobile-pagecontainer').pagecontainer('change', '#page2');

or

$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});

but no joy. Obviously, I've tried googling but can't find anything to help. In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.

I really would appreciate some guidance if anyone has any ideas what I could do?

Upvotes: 0

Views: 905

Answers (1)

huggie
huggie

Reputation: 18237

The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.

Take it out like this:

$(document).on('pagebeforeshow','#page1',function(){
    console.log('#page1 pagebeforeshow');

});

$('#btntest1').click(function(e){
    e.preventDefault();
    console.log('#btn - page1');
    $(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});

And for page 2 likewise.

Upvotes: 1

Related Questions