DEVHIDE
Login Or Sign up

jQuery mobile: panel open not triggered after page navigation

5.2k Views Asked by At

I am creating a mobile website using jQuery mobile (1.3).

In this site I'm using a panel for my menu, which get activated by the 'bars' button in the top left of the screen or by swiping from left to right (on desktops; click and move mouse to the right).

This all is working fine until I navigate to a different page. The new page loads using the jQuery mobile AJAX function, in the console.log my panel div is logged so I know it's there but the .panel('open') function is not triggered.

I tried making my links 2 different ways with no luck:

<a href="?controller=website&action=algemeenInvoer">Algemene invoer</a>
<a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a>

Since I use php I can't create a simple JSFiddle demonstrating the problem but here is a link to my dev page: snip

I hope someone can help me fix this problem and my .panel('open') is triggered after page navigation.

EDIT: Current swipe function:

$(document).on('pageinit',function(){
    $('div[data-role="content"]').on("swiperight",function(){
        console.log($('#menu'));

        //open panel after swiped x px.
        $.event.special.swipe.horizontalDistanceThreshold = 80;
        $('#menu').panel("open");
    });
});
php jquery ios jquery-mobile jquery-mobile-panel
Original Q&A
2

There are 2 best solutions below

1
Gajotres On BEST ANSWER

You need to change your page logic.

When new page is opened it is just another page loaded into the DOM. But when you try to open a panel inside a second page it will try to open a first page panel because they have the same.

I have tested this on your page and it is working:

$.mobile.activePage.find('#menu').panel("open");

Proof

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <title>Logboek</title>

        <!-- Springboard icon (retina) -->
        <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png" />

        <!-- iPhone 4(S) startup image -->
        <link href="images/splash-screen-640x920.png" rel="apple-touch-startup-image" media="(device-height: 480px)"/>
        <!-- iPhone 5 startup image -->
        <link href="images/splash-screen-640x1096.png" rel="apple-touch-startup-image" media="(device-height: 568px)"/>

        <link rel="stylesheet" href="http://logboek.zavee.nl/public/css/theme/TEAM-WJM.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script>
            $(document).on('pageinit',function(){
                $('div[data-role="content"]').on("swiperight",function(){
                    console.log('swipe');
                    $.mobile.activePage.find('#menu').panel("open");
                });
            });                     
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="a" id="index">
            <div data-role="panel" id="menu" data-theme="d">
                    <ul data-role="listview" data-theme="d">
                    <li><a href="second.html">Algemene invoer</a></li>
                    <li><a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a></li>
                    <li><a href="?controller=website&action=trainingInvoer">Training invoeren</a></li>
                    <li><a href="#" onclick="$.mobile.changePage('?controller=website&action=trainingInvoer', { transition:'slideup'} );">Training invoeren, , using mobile.changePage</a></li>
                    <!--<li><a href="#">Overzicht bekijken</a></li>-->
                </ul>
            </div>

            <div data-role="header" data-position="inline">
                <a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true"></a>
                <h1>Trainingslogboek</h1>
            </div>

            <div data-role="content" data-theme="a" id="content">
<form method="post" action="text.php">
    <div data-role="fieldcontain">
        <label for="datum">Datum:</label>
        <input type="date" name="datum" id="datum" />
    </div>  

    <div data-role="fieldcontain">
        <label for="gewicht">Gewicht in kg:</label>
        <input type="number" name="gewicht" id="gewicht" data-clear-btn="true" />
    </div>

    <div data-role="fieldcontain">    
        <label for="op">Ochtendpols:</label>
        <input type="number" name="op" id="op" data-clear-btn="true" />
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Slaap:</legend>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" value="on" />
            <label for="radio-choice-h-1a">1</label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" value="off" />
            <label for="radio-choice-h-1b">2</label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" checked="checked" value="other" />
            <label for="radio-choice-h-1c">3</label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1d" value="other" />
            <label for="radio-choice-h-1d">4</label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1e" value="other" />
            <label for="radio-choice-h-1e">5</label>
        </fieldset>
    </div>  

    <input type="submit" value="Opslaan" />  
</form>         </div> <!-- /content -->
        </div> <!-- /page -->
    </body>
</html>

second.html

        <div data-role="page" data-theme="a" id="second">
            <div data-role="panel" id="menu" data-theme="d">
                    <ul data-role="listview" data-theme="d">
                    <li><a href="?controller=website&action=algemeenInvoer">Algemene invoer</a></li>
                    <li><a href="#" onclick="$.mobile.changePage('?controller=website&action=algemeenInvoer', { transition:'slideup'} );">Algemene invoer, using mobile.changePage</a></li>
                    <li><a href="?controller=website&action=trainingInvoer">Training invoeren</a></li>
                    <li><a href="#" onclick="$.mobile.changePage('?controller=website&action=trainingInvoer', { transition:'slideup'} );">Training invoeren, , using mobile.changePage</a></li>
                    <!--<li><a href="#">Overzicht bekijken</a></li>-->
                </ul>
            </div>

            <div data-role="header" data-position="inline">
                <a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true"></a>
                <h1>Trainingslogboek</h1>
            </div>

            <div data-role="content" data-theme="a" id="content">
<form>
    <div data-role="fieldcontain">
        <label for="datum">Datum:</label>
        <input type="date" name="datum" id="datum" />
    </div>  

    <div data-role="fieldcontain">  
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend></legend>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1a" data-mini="true" value="on" checked="checked" />
            <label for="radio-choice-h-1a">1<sup>e</sup></label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1b" data-mini="true" value="off" disabled="disabled" />
            <label for="radio-choice-h-1b">2<sup>e</sup></label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1c" data-mini="true" value="other" disabled="disabled" />
            <label for="radio-choice-h-1c">3<sup>e</sup></label>
            <input type="radio" name="radio-choice-h-1" id="radio-choice-h-1d" data-mini="true" value="other" disabled="disabled" />
            <label for="radio-choice-h-1d" style="padding-bottom:2px;">training van vandaag.</label>
        </fieldset>
    </div>   

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>EMI score:</legend>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" />
            <label for="radio-choice-h-2a">1</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" />
            <label for="radio-choice-h-2b">2</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other" />
            <label for="radio-choice-h-2c">3</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2d" checked="checked" value="other" />
            <label for="radio-choice-h-2d">4</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2e" value="other" />
            <label for="radio-choice-h-2e">5</label>
        </fieldset>

        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend></legend>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" />
            <label for="radio-choice-h-2a">6</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" />
            <label for="radio-choice-h-2b">7</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other" />
            <label for="radio-choice-h-2c">8</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2d" value="other" />
            <label for="radio-choice-h-2d">9</label>
            <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2e" value="other" />
            <label for="radio-choice-h-2e">10</label>
        </fieldset>
    </div>

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Blessure:</legend>
            <input type="radio" name="radio-choice-h-3" id="radio-choice-h-3a" value="on" />
            <label for="radio-choice-h-3a">Ja</label>
            <input type="radio" name="radio-choice-h-3" id="radio-choice-h-3b" value="off" />
            <label for="radio-choice-h-3b">Nee</label>
        </fieldset>
    </div>
</form>         
</div> <!-- /content -->
0
Omar On

All you need is the code inside pageinit, as the last fires once only.

$('div[data-role="content"]').on("swiperight",function(){
 var activepage = '#' + $.mobile.activePage[0].id;
 $.event.special.swipe.horizontalDistanceThreshold = 80;
 $('activepage #menu').panel("open");
});

Related Questions in PHP

Related Questions in JQUERY

Related Questions in IOS

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-PANEL

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.