Response title
This is preview!
Mobile Multipage Dialog Close Bug JQM DOM
in jQuery Mobile
•
11 years ago
Dialogs opened from top level page can be closed properly; however, dialogs opened by an inline sub-level (multi-page) cannot be closed with the first click of the (automatically generated) default Close icon on the upper left hand corner.
Home Page HTML File (tmpMobi.html):
Linked Dialog HTML File (tmpDiag.html):
In this example above, the user is first presented a link to an internal page called #multiPager.
Once the user clicks on that link, resulting internal multi-page shows a link to an external file called tmpDiag.html, and fashions the said link as a JQM Dialog.
Once clicked, the tmpDiag.html is AJAX loaded into the DOM and presented smoothly as a popup/slideup dialog.
However, when the user clicks on the automatically generated Close "X" button on the upper left for the first time, nothing happens.
On the second click of the X button, the page transitions to the top level page, instead of the internal #multiPager page that called up the said Dialog (tmpDiag.html).
In close examination, the link address of the "X" close button is different.
FIRST TIME AROUND: mouseOver the "X" button shows a link address of "tmpDiag.html#"
When clicked, nothing will happen, except now the link is changed.
SECOND TIME AROUND: mouseOver the "X"button shows a new link: "tmpMobi.html#" (the home page link).
When clicked, it brings the user to the top-level home page, instead of the #multiPager page.
This bug is present with the latest build of JQ and JQM.
Home Page HTML File (tmpMobi.html):
- <html>
- <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.0b2/jquery.mobile-1.0b2.min.css" />
- <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
- <title>Testing the Built-In Dialog Close Button</title>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header"><h1>Home Page</h1></div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="#multiPager">On to (inline) Multi-Page!</a></li>
- <li><a href="tmpDiag.html" data-rel="dialog">Open Dialog straight from the Home Page!</a></li>
- </ul>
- </div>
- </div>
- <div data-role="page" id="multiPager">
- <div data-role="header"><h1>Inline Multi-Page</h1></div>
- <div data-role="content">
- <ul data-role="listview">
- <li><a href="tmpDiag.html" data-rel="dialog">Click to open Dialog, but there's a bug!</a></li>
- </ul>
- </div>
- </div>
- </body>
- </html>
Linked Dialog HTML File (tmpDiag.html):
- <div data-role="page">
- <div data-role="header"><h1>Hello World!</h1></div>
- <div data-role="content">Please try to Close Me.</div>
- </div>
In this example above, the user is first presented a link to an internal page called #multiPager.
Once the user clicks on that link, resulting internal multi-page shows a link to an external file called tmpDiag.html, and fashions the said link as a JQM Dialog.
Once clicked, the tmpDiag.html is AJAX loaded into the DOM and presented smoothly as a popup/slideup dialog.
However, when the user clicks on the automatically generated Close "X" button on the upper left for the first time, nothing happens.
On the second click of the X button, the page transitions to the top level page, instead of the internal #multiPager page that called up the said Dialog (tmpDiag.html).
In close examination, the link address of the "X" close button is different.
FIRST TIME AROUND: mouseOver the "X" button shows a link address of "tmpDiag.html#"
When clicked, nothing will happen, except now the link is changed.
SECOND TIME AROUND: mouseOver the "X"button shows a new link: "tmpMobi.html#" (the home page link).
When clicked, it brings the user to the top-level home page, instead of the #multiPager page.
This bug is present with the latest build of JQ and JQM.
2