I am using jQuery Mobile in an application that runs inside a UIWebView. The applicaiton is written in Monotouch and has multiple tabs and one of the tabs shows html5 content within a webview. jQuery Mobile allows the html5 content to have a consistent look and feel to the native sections of the application. I am trying to build functionality in html5 that makes use of jQuery Mobile custom select menus, in other words, selects which have data-native-menu attribute set to false, and here I have encountered a strange problem. I have distilled the problem down to a simple example; here is the code:
<body>
<div data-role="page" data-theme="b" id="forms">
<div data-role="content">
<select id="test" data-native-menu="false">
<option value="abc">ABC</option>
<option value="def">DEF</option>
<option value="ghi">GHI</option>
<option value="jkl">JKL</option>
<option value="mno">MNO</option>
<option value="pqr">PQR</option>
<option value="abc1">ABC</option>
<option value="def1">DEF</option>
<option value="ghi1">GHI</option>
<option value="jkl1">JKL</option>
<option value="mno1">MNO</option>
<option value="pqr1">PQR</option>
<option value="abc2">ABC</option>
<option value="def2">DEF</option>
<option value="ghi2">GHI</option>
<option value="jkl2">JKL</option>
<option value="mno2">MNO</option>
<option value="pqr2">PQR</option>
</select>
</div> <!--content-->
</div> <!-- page-->
</body>
When I run this code in Firefox or Safari it works fine. Also if I run it in Mobile Safari on an iPad it also works fine. But when I run this within the UIWebView in my application the popup only displays and closes correctly when there are a small number of items in the select and the overlay is shown. When, instead, the full screen popup is shown, it goes wrong when the popup is closed. So, for example, with the code that I pasted above, an overlay will be displayed if the select is clicked while the iPad is in portrait mode. But if I turn the iPad so the application is in landscape mode and click on the select, then there will be too many items for an overlay and a full screen popup will display instead. When I then try close this full screen popup, one of two things will happen:
-
1) The very first time the page is loaded the popup will not close at all. It won’t respond to any touch events at all.
-
2) If I reload the page content in the webview and try again, now the whole UIWebView will disappear when I try close the popup. This scenario will occur on the second and every subsequent load of the page.
The strange thing is, that when I run the application in debug mode, I do not see any exception being thrown when I try select an item from the popup or if I click on the X to close it. The webview just disappears. I can tell that the webview is gone, because my UITabBarController has a background image that shows on every tab, except on the tab where the UIWebView is, because the webview covers the background image on this tab. When I try close the popup then suddenly the background image is visible on an otherwise empty screen… meaning that the webview is now gone.
I really need to be able to use custom select menus in my html5 content, so am hoping that someone else has encountered this before and knows what is going on here. So, does anyone know what is causing this strange behaviour in UIWebView or know of a workaround for this issue?
My iPad is running iOS version 5.0.1 (9A405) and jQuery Mobile versions that I have tried are alpha 4.1 and 1.1.0. This same issue occurs in both these version of jQuery Mobile. Please let me know if other information regarding my iPad or development setup is needed.
Update:
Please ignore what I say above about the UIWebView disappearing. That is actually not happenning. In fact an exception is occurring in the webview and a redirect is occurring to an error html page embedded in the application package. This error screen has the same background image as on the UITabBarController, hence my jumping to the wrong conclusion. So, I know now that some exception is occurring in the webview, but it is still very much there! 🙂 I will post an update when I know more.
Update 2:
I now know what is going wrong, although I do not quite know yet how to solve it. This is what is happening: when the popup is clicked, jQuery Mobile is adding #&ui-state=dialog to the url. In other browsers this change is being reflected in the browsing history, so the popup is closed by means of a back being done on the browsing history. In the case of my UIWebView the change to the url is not being reflected in the history, so clicking close either does nothing (history is empty) or goes too far back (to a preload screen with just the background image that gets loaded before the actual content is loaded).
I actually found that this issue was not caused by the UIWebview after all. When I reduced my code to just the webview I found that it worked correctly. This issue occurred because in my webview I was making use of
ASIHTTPRequestand this is what was causing the change in the url not to be reflected in the browser history.I have not looked at where
ASIHTTPRequestis going wrong at this stage, but I think that this is beyond the scope of this question anyway. When I do deal with this issue in ASIHTTPRequest I will post separate question about it.I did manage to workaround to this issue, though, and the workaround involves changing the
jQuery Mobilesource to compensate for the fact that the previous page is not stored in the history. In version 1.1.1 of ‘jQuery Mobile` find the follow code on lines 4177 and 6933:comment these lines out and replace them with the following:
Now ‘jQuery Mobile` will actually navigate to the previous url rather than replying on the browser history. This is slightly slower than making use of the browser history but is more reliable in situations such as mine when the needed pages are not correctly saved to the history.