Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

External panel won't open anymore after several page switches #7099

Closed
Shepard opened this issue Feb 11, 2014 · 8 comments
Closed

External panel won't open anymore after several page switches #7099

Shepard opened this issue Feb 11, 2014 · 8 comments

Comments

@Shepard
Copy link
Contributor

Shepard commented Feb 11, 2014

Hi,

I have a problem with panels sometimes not opening.

In the code below I have two pages and a panel containing a list outside of those pages. The panel gets opened by a button in the header toolbars of the pages and the list items in the panel lead to the pages.

When I try this in Firefox (26, Win7) and just keep switching between the pages by opening the menu and selecting the other page, it sometimes gets stuck: the menu button in the toolbar looks active (blue background) but the panel doesn't open anymore. From then on I can click it as often as I want but nothing happens.
This only happens very rarely in this minimal example setup but quite often in my actual page. Maybe it depends on the amount of stuff that's on the pages. It also doesn't seem to happen when I remove the data-transition="slideup". And I haven't seen it happen in IE11 yet.
In my own code I also have some JavaScript copied from the demo pages that is supposed to open the panel on swiping. Even that doesn't work anymore when the panel got stuck like this, so programmatic opening doesn't seem to make a difference. There's nothing in the browser's console either.

I assume it's something to do with the transition animation. Maybe it hasn't finished properly when I click on the menu button, leading it into a broken state.

Any help would be welcome. Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script>
    $(document).on("pagecreate", function() {
        // Panels (and any widgets within them) outside pages have to be initialised manually.
        $("body > [data-role='panel']").panel();
        $("body > [data-role='panel'] [data-role='listview']").listview();
    });
    </script>
    <title>Blah</title>
</head>
<body>

<div id="main-menu" data-role="panel" data-display="overlay" data-theme="b">
    <ul data-role="listview">
        <li><a href="#main" class="ui-icon-search ui-nodisc-icon" data-transition="slideup">Main</a></li>
        <li><a href="#secondary" class="ui-icon-search ui-nodisc-icon" data-transition="slideup">Secondary</a></li>
    </ul>
</div>

<div data-role="page" id="main">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Main Page</h1>
        <a role="button" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-left ui-nodisc-icon" href="#main-menu">Menu</a>
    </div>
    <div role="main" class="ui-content">
        Main Page
    </div>
</div>

<div data-role="page" id="secondary">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Secondary Page</h1>
        <a role="button" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-left ui-nodisc-icon" href="#main-menu">Menu</a>
    </div>
    <div role="main" class="ui-content">
        Secondary Page
    </div>
</div>

</body>
</html>
@gabrielschulhof
Copy link

@arschmitz Perhaps it's time we landed #7001 - maybe that'll fix this.

@gabrielschulhof
Copy link

OTOH, this is FF, where I've never seen transition-end events not firing.

@gabrielschulhof
Copy link

Reproduced with FF 27 on Fedora 20.

@gabrielschulhof
Copy link

http://jsbin.com/novip/2

@gabrielschulhof
Copy link

Here's the root cause:

  1. The panel identifies its parent page during _create() and stores a reference to it, or false if no page is found.
  2. When it opens, it sets .jqmData( "panel", "open" ) on the current page which it defines as either the page that was stored during _create(), or $( "." + $.mobile.activePageClass )
  3. When it closes, it removes the data it set when it opened.

The problem with this is that, in FF, it ends up setting the .jqmData() on the source page and it ends up removing it on the destination page. When you open it on the second page, it ends up setting the data on the second page and removing it from the first page. This happens to work, but if you get the timing just right, it ends up removing the .jqmData() from the same page on which it was set, meaning that, after the pagechange, it will try to set the .jqmData() on the page where it's already set. This will fail, because it has safeguards to not open if .jqmData("panel") is already set on the active page.

gabrielschulhof pushed a commit that referenced this issue Feb 12, 2014
Panel: Track page from which external panel opens
8da18e8 
Fixes gh-7099
@gabrielschulhof
Copy link

The solution: If no parent page has been found during _create(), then we must record the current page during open() and use that page throughout the appearance cycle of the panel. This will make sure that we remove the data on the same page on which we set it.

@gabrielschulhof gabrielschulhof mentioned this issue Feb 12, 2014
Closed
@Shepard
Copy link
Contributor Author

Shepard commented Feb 12, 2014

Wow, thanks for your blazingly fast reaction and the fix! I'm looking forward to seeing this land in the next version (hopefully). :-)

@gabrielschulhof gabrielschulhof mentioned this issue Feb 12, 2014
Closed
@gabrielschulhof
Copy link

@Shepard actually, this has already been fixed in #6920 and is a duplicate of #6650.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Panel: Track page from which external panel opens jquery-archive/jquery-mobile
2 participants
@Shepard @gabrielschulhof