I found if I use another overlay/dialog plug like Clearbox or fancyBox, I loose the use function of jQuery-Mobile after the overlay initializes. The dialog opens correctly but I notice an “error on page” alert under it – I close the dialog & then nothing else works (ie: swipes & even the back btn on the device & a Chrome browser) only the plug(dialog).
This what triggers the overlay:
<a href="res/img/f1_1.jpg" rel="clearbox">Figure 1-1</a>
If I add: target=”something” to the a tag, the alert goes away and all works fine; But, the image is loaded into the DOM and the dialog – This is obviously not desired. Is there a fix/work-a-round to resolve the issue. I really do not want to use the ‘in-the-box’ dialog that come w/jQuery-Mobile.
jQuery Mobile tries to load all links into the current page using an AJAX call. If I had to guess the problem is that Clearbox or Fancybox is actually handling the event first and the dialog appears as is expected. After that my guess would be that jQuery mobile tries to handle the click event for the link and tries to open the link itself and something goes awry there.
The reason adding target works is that jQuery Mobile doesn’t process those links as it normally would. If you could use rel=”external” it might fix the issue as long as you don’t need it to have a different value for Clearbox or Fancybox to work. Another option would be to try adding data-ajax=”false” as an attribute of the a tag.