Problem with dialog on iPhone/iPad

Problem with dialog on iPhone/iPad

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: 

  1. <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:

  2. <div data-role="dialog" id="popup">

  4. <div data-role="header" data-theme="b">
  5. <h1>Production Date</h1>
  6. </div>

  8. <div data-role="content" data-theme="b">
  10. <form action="/mobileDemo/ExecDash/Body/1" method="post">
  11. <div data-role="fieldcontainer">
  12. <p>Hello World</p>
  13. </div>
  14. <button type="submit" data-theme="b">Select</button>
  15. </form>

  17. </div>

  19. </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.


  3. <!DOCTYPE html> 
  4. <html> 
  5. <head> 
  6. <meta charset="utf-8" />
  7. <title>Body Dashboard for System 1</title> 
  8. <meta name="viewport" content="width=device-width" />
  9. <meta name="apple-mobile-web-app-capable" content="yes" />
  10. <link rel="stylesheet" href="/mobileDemo/Scripts/jquery.mobile-1.2.0.min.css" />
  11. <script type="text/javascript" src="/mobileDemo/Scripts/jquery-1.8.2.min.js"></script>
  12. <script type="text/javascript">
  13. $(document).bind("mobileinit", function () {
  14. // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
  15. // when navigating from a mobile to a non-mobile page), hence disabling it.
  16. $.mobile.ajaxEnabled = false;
  17. });
  18. </script>
  19. <script type="text/javascript" src="/mobileDemo/Scripts/jquery.mobile-1.2.0.min.js"></script>

  21.         <link rel="icon" href="/mobileDemo/images/icon_pmcsmobile_32.png" />
  22.         <link rel="shoftcut icon" href="/mobileDemo/images/icon_pmcsmobile_32.png" />
  23.         <link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_57.png" />
  24.         <link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_114.png" sizes="114x114" />
  25.         <link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_72.png" sizes="72x72" />
  26.         <link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_80.png" sizes="80x80" />
  27.         <link rel="apple-touch-icon" href="/mobileDemo/images/icon_pmcsmobile_57.png" sizes="android-only" />

  29. </head> 

  31. <body> 

  33. <div data-role="page" id="mainpage" data-theme="b">
  35. <div data-role="header" data-theme="b" data-position="fixed">
  36. <center>
  37. <a href="/Home/Main"><img src="/mobileDemo/Images/company_header_logo_mobile.png" border="0" /></a>
  38. </center>
  39. </div>

  41. <div style="text-align: center; padding-top:5px">

  43. <center>
  44. <a href="/mobileDemo/Home/Main"><img src="/mobileDemo/Images/menu_home.png" style="width: 40px" border="0" /></a>
  45. <a href="/mobileDemo/Counts"><img src="/mobileDemo/Images/menu_prodcounts.png" style="width: 40px" border="0" /></a>
  46. <a href="/mobileDemo/Inventory"><img src="/mobileDemo/Images/menu_inventory.png" style="width: 40px" border="0" /></a>
  47. <a href="/mobileDemo/Vehicle"><img src="/mobileDemo/Images/menu_vehicle.png" style="width: 40px" border="0" /></a>
  48. <a href="/mobileDemo/SSAR"><img src="/mobileDemo/Images/menu_ssar.png" style="width: 40px" border="0" /></a>
  49. <a href="/mobileDemo/STAR"><img src="/mobileDemo/Images/menu_star.png" style="width: 40px" border="0" /></a>
  50. <a href="/mobileDemo/EXECDASH"><img src="/mobileDemo/Images/menu_dashboard.png" style="width: 40px" border="0" /></a>
  51. </center>

  53. </div>

  55. <div style="padding-left: 20px; padding-top: 10px">
  56. <strong>Body Dashboard for System 1</strong>
  57. </div>

  59. <div style="padding-right: 15px; padding-left: 15px; padding-top: 10px">

  61. <a href="#popup" data-role="button" data-rel="dialog" data-icon="gear" data-iconpos="right" data-transition="pop">11/7/2012</a>
  63. <hr />
  65. <ul data-role="listview" data-inset="true">
  66. <li><a href="/mobileDemo/ExecDash/BodyProd/1/11-07-2012">Production</a></li>
  67. <li><a href="/mobileDemo/ExecDash/BodyOEE?system=1&amp;date=11-07-2012">Body OEE</a></li>
  68. <li><a href="/mobileDemo/ExecDash/BodyDKS?system=1&amp;date=11-07-2012">Doukie-Seisan KPI</a></li>
  69. <li><a href="/mobileDemo/ExecDash/BodyDT?system=1&amp;date=11-07-2012">Down Time</a></li>
  70. </ul>
  72. </div>

  74. </div>


  78. <div data-role="dialog" id="popup">

  80. <div data-role="header" data-theme="b">
  81. <h1>Production Date</h1>
  82. </div>

  84. <div data-role="content" data-theme="b">
  86. <form action="/mobileDemo/ExecDash/Body/1" method="post">
  87. <div data-role="fieldcontainer">
  88. <p>Hello World</p>
  89. </div>
  90. <button type="submit" data-theme="b">Select</button>
  91. </form>

  93. </div>

  95. </div>



  99. </body>
  100. </html>