jQuery-UI's .dialog with jQuery Mobile?

405 Views Asked by At

I'm currently working on retrofitting a large, existing webapp that makes extensive use of jQuery UI to work acceptably on mobile devices. I had been hoping to be able to use the jQuery Mobile library to do this, since it takes care of so much of the headache of making form elements behave nicely on touch screen devices, and everything seems to be working well enough - except for the jQuery UI dialogs, which do not respond in any way, nor do they produce any console errors.

I'm guessing this is happening because jQuery Mobile also has a .dialog method, which is functionally incompatible with the jQuery UI style of creating dialogs.

Without jQuery Mobile, the jQuery UI dialogs all work great on every mobile device I've tested, but that, of course, leaves me with a significant amount of work to do making custom mobile styles for all of the buttons and inputs site-wide. There are also upwards of 100 instances of jQuery UI's dialog widget in the app, so rewriting all of those by hand to use a jQuery Mobile method is not a great solution either.

Ideally, I'd like to just be able to continue to use jQuery UI's dialog widget instead of jQuery Mobile's, but keep the rest of the jQuery Mobile functionality intact. I've been looking for quite some time and have yet to find any resource that offers a solution to this problem, so I'm wondering if anyone here knows of a way to resolve this conflict.

The jQuery UI version on the site is 1.11.1, and the jQuery Mobile version is 1.4.3 - the site makes use of the Google Hosted Libraries and should ideally remain that way, so editing the libraries themselves would be a last-ditch effort.

Edit: To make verify my assumptions, I've now tested a customized jQuery Mobile version built with the download builder that removes the dialog widget, and the jQuery UI one works perfectly with that. However, it would still be preferable if I could get this to work using the Google Hosted Library somehow.

1

There are 1 best solutions below

1
On

Dialogs are deprecated as of jQuery Mobile 1.4.0 and removed in 1.5.0. The dialog option provided by the page.dialog extension of the page widget allows you to style a page as a dialog, however, the special navigational handling will be removed. You may also consider implementing dialogs using popup widgets.

Maybe you want to use popup instead of dialog for your needs http://api.jquerymobile.com/popup/