Search jQuery

jQuery Forum

Problem with dialog on iPhone/iPad

in jQuery Mobile • 6 months ago

I have a popup dialog that should be opened when a button is pressed. It works properly on desktop browsers and on Droid. On iPhone and iPad (Safari) I discovered that it wasn't opening. If the page containing the button is refreshed it will work. I took it to Safari and Chrome on the desktop and changed the useragent to iPhone. It works properly on Safari. With Chrome it is the same behavior as the iPhone/iPad. Will not work unless the page is refreshed.

I have taken the page source after initial load (when it is not working) and after refresh (when it is working) and used WinDiff to compare the two. They are identical.

Here is the markup for the button that should open the dialog:

<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right" data-transition="pop">Choose Date</a>

Here is the markup for the dialog:

<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
<form action="/mobileDemo/ExecDash/Body/1" method="post">
<div data-role="fieldcontainer">
<p>Hello World</p>
</div>
<button type="submit" data-theme="b">Select</button>
</form>
</div>
</div>

My markup and page structure are correct. JQM pages structure properly. Since this is a dialog it is a multi-page. I have used tools to ensure that all elements are properly closed. For full disclosure below is the page source for the entire page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Body Dashboard for System 1</title>
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="/mobileDemo/Scripts/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="/mobileDemo/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="/mobileDemo/Scripts/jquery.mobile-1.2.0.min.js"></script>
<link rel="icon" href="/mobileDemo/images/icon_pmcsmobile_32.png" />
<link rel="shoftcut icon" href="/mobileDemo/images/icon_pmcsmobile_32.png" />
<link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_57.png" />
<link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_114.png" sizes="114x114" />
<link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_80.png" sizes="80x80" />
<link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_57.png" sizes="android-only" />
</head>
<body>
<div data-role="page" id="mainpage" data-theme="b">
<div data-role="header" data-theme="b" data-position="fixed">
<center>
<a href="/Home/Main"><img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
</center>
</div>
<div style="text-align: center; padding-top:5px">
<center>
<a href="/mobileDemo/Home/Main"><img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Counts"><img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Inventory"><img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/Vehicle"><img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/SSAR"><img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/STAR"><img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
<a href="/mobileDemo/EXECDASH"><img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
</center>
</div>
<div style="padding-left: 20px; padding-top: 10px">
<strong>Body Dashboard for System 1</strong>
</div>
<div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">
<a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right" data-transition="pop">11/7/2012</a>
<hr />
<ul data-role="listview" data-inset="true">
<li><a href="/mobileDemo/ExecDash/BodyProd/1/11-07-2012">Production</a></li>
<li><a href="/mobileDemo/ExecDash/BodyOEE?system=1&date=11-07-2012">Body OEE</a></li>
<li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&date=11-07-2012">Doukie-Seisan KPI</a></li>
<li><a href="/mobileDemo/ExecDash/BodyDT?system=1&date=11-07-2012">Down Time</a></li>
</ul>
</div>
</div>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b">
<h1>Production Date</h1>
</div>
<div data-role="content" data-theme="b">
<form action="/mobileDemo/ExecDash/Body/1" method="post">
<div data-role="fieldcontainer">
<p>Hello World</p>
</div>
<button type="submit" data-theme="b">Select</button>
</form>
</div>
</div>
</body>
</html>

Replies(3)

watusiware

Re: Problem with dialog on iPhone/iPad

6 months ago

You're confusing popups and dialogs. They are two different distinct things. There are no "popup dialogs".

A dialog is an independent page.

(A dialog might be a page within a multi-page file. But it still isn't a popup...)

A popup is contained within the page that references it.

As well, you've disabled Ajax navigation globally. Although this is a supplied option, I can't imagine a reason for using jQuery Mobile at all if you've disabled Ajax navigation globally.

I'd suggest a closer read of the documentation.

steveatcdc

Re: Problem with dialog on iPhone/iPad

6 months ago

I'd suggest a closer read of the documentation.

Just caught that part...

Could you please point me to the part of the documentation that you suggest I read closer? I can promise you that I feel as if I have read it 100 times while searching for any type of hint at resolution of this problem. For the most part the "documentation" is examples, the page source from the "documentation". To my eye I have modeled my work from those examples.

steveatcdc

Re: Problem with dialog on iPhone/iPad

6 months ago

Thanks for the reply. I took one direct "go do" from your response. I commented out:

```
//$.mobile.ajaxEnabled = false;
```

That didn't help with my problem. Why I had it commented out? At some point in the Beta it was suggested to address a problem that I had then.

As for my confusing popups and dialogs that was poor wording on m part I guess, although the two appear together in the JQM documentation on the multipage-template page.

http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html

Show page "popup" (as a dialog)

Based upon some stuff of yours I read researching this question, you probably question why I would be reading that page of the documentation to begin with. :)

A bit more background, this is an MVC application so in my URL there is a parameter (the number 1):

http://internal-server/mobileDemo/ExecDash/Body/1

While it doesn't seem to affect some browsers could that be the root of my problem?

I am sure that I could get around this by not using a second page (dialog) and instead use a single page template that gathers the information that I was looking to get from the dialog. I am thinking that would be your suggestion?

Top Reply

Response title

Attachments

jQuery Forum

Problem with dialog on iPhone/iPad

Replies(3)

Re: Problem with dialog on iPhone/iPad

Re: Problem with dialog on iPhone/iPad

Re: Problem with dialog on iPhone/iPad

Statistics

Tags

Actions

Related Posts