El panel externo de Jquery Mobile 1.4 no se abre después de navegar a otra página

We are developing an mobile application using jquery mobile and apache cordova. After migrating to jquery mobile 1.4.0 we switched to external panel but there is a problem with the panel.

There is a simple example of the problem in http://jsfiddle.net/Q58MZ/3/

To reproduce the problem you must: 1 click on page1 from the menu link 2 click on page2 from the menu link 3 click on page1 from the menu link 4 click on page2 from the menu link 5 click on "GO TO PAGE 1" link in the content

Then the menu wont open it will add classes that its open but it wont open.

Here is the sample code to reproduce it:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>  
    <script>
        $(document).ready(function() {
            $.mobile.defaultPageTransition = 'none';
            $("#mypanel").panel();
        });
        $(document).bind('panelbeforeopen', function(e, data) {
            console.log("before open");
        });
        $(document).bind('panelbeforeclose', function(e, data) {
            console.log("before close");
        });
    </script>
</head>
<body>
    <div data-role="panel" id="mypanel">
        <a href="#page1">page1</a>
        <br />
        <a href="#page2">page2</a>
    </div>
    <div data-role="page" id="page0">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 0</h1>
        </div>
        <div data-role="content"> 
            PAGE 0
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page1">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 1</h1>
        </div>
        <div data-role="content"> 
            PAGE 1
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-tap-toggle="false" data-role="header" >
            <a href="#mypanel">menu</a>
            <h1>PAGE 2</h1>
        </div>
        <div data-role="content"> 
            PAGE 2
            <a href="#page1">GO TO PAGE 1</a>
        </div>
        <div data-tap-toggle="false" data-role="footer" >
        </div>
    </div>
</body>

The strange thing is that when I navigate through the panel links the panel works but when I click to link that is not in the panel it wont open anymore. We tried also with $.mobile.changePage and the new one with the :pagecontainer but it is the same. If someone have similar problem please let me know how he fix it. Thanks in advance.

preguntado el 12 de febrero de 14 a las 08:02

$.mobile.defaultPageTransition = 'none'; is causing it, although it shouldn't. Page is changing before panel is closed, too weird. -

Tnaks a lot man you saved the day. -

Omar is there any other way to disable the animations without braking the panel? -

This is what I'm working on. force panel closing before changing views. -

Could you post the solution when you finish it? -

3 Respuestas

Omar is right the $.mobile.defaultPageTransition = 'none'; is causing the problem when I removed it everything works.

Respondido 12 Feb 14, 09:02

I have the exact same problem using jquery-mobile-1.4.1 Did you by any chance find a solution that doesn't require to enable animations? Thank you. - Marco Martinelli

For the moment we do not have it. Try to add custom animation with a delay i think this will do the trick. - Cvetan Himchev

EDIT: It's fixed in jquery mobile 1.4.2, see https://github.com/jquery/jquery-mobile/issues/6650

Thanks to the hint from Cvetan I was able to solve this problem using a custom animation:

.dummy.in{}
.dummy.out{}
.in{-webkit-animation-timing-function: ease-out;-webkit-animation-duration: 0ms;-moz-animation-timing-function: ease-out;-moz-animation-duration: 0ms;}
.out{-webkit-animation-timing-function: ease-in;-webkit-animation-duration: 5ms;-moz-animation-timing-function: ease-in;-moz-animation-duration: 5ms;}

Then I've told jqm to use this transition as default with:

$.mobile.defaultPageTransition = 'dummy';

And thats it, no visible page transition animation and a fully working panel.

respondido 29 mar '14, 10:03

    <style type="text/css">
        .ui-panel-dismiss{display:none;}
        #p1, #p2{margin-left:17em;}
    </style>
    <script id="panel-init">
    $(function() {
        $( "body>[data-role='panel']" ).panel();
    });
            $(function(){$("#sidebar").panel();});
            $(document).on("pageshow", ":jqmData(role=page)", function() {you
                 $("#menu").panel("open");
    });
    </style>

respondido 21 mar '14, 08:03

Please, don't comment your own answers. Your comment should be a part of the answer - Mike

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.