Use jquery-ui dialog with jquery-mobile

Question

I'm using jquery-mobile and jquery-ui and it seems the dialogs or conflicting with each other. I would like to use jquery-ui for my dialogs but am not sure how to get jquery.noConflicts() to work with both.

I have a single listener file called mobileListeners.js with this piece of code that I am trying to get working with jquery-ui dialog.

My jquery-ui is scoped with .jqui-custom

    $('<div data-role="none" class="jqui-custom"></div>')
        .html('<p><span class="jqui-custom ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure you want to logout?</p>')
        .dialog({
            zIndex: 900,
            resizable: false,
            modal: true,
            title: 'Logout?',
            dialogClass: 'jqui-custom',
            buttons: {
                "Logoff": function() {
                    window.location.href = "logoff.php";
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });

    $(this).removeClass('ui-btn-active').addClass('ui-btn');
});

EDIT: jqm's styling is overwriting jqui and I am trying to prevent jqm from styling the buttons with their ugly looking buttons. It also appears that both the jqm .dialog() and the jqui .dialog() are being run on the same element which is probably causing the styling conflicts.

jquery-ui scoped dialog css

.jqui-custom .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.jqui-custom .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.jqui-custom .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.jqui-custom .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.jqui-custom .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.jqui-custom .ui-dialog .ui-dialog-titlebar-close:hover, .jqui-custom .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.jqui-custom .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.jqui-custom .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.jqui-custom .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.jqui-custom .ui-draggable .ui-dialog-titlebar { cursor: move; }

EDIT 2: Here is a fiddle of what I'm talking about. The autocomplete works good with jquery-ui however when I press the pressme button the dialog looks like it has been double teamed by jquery-mobile and jquery-ui.

http://jsfiddle.net/jostster/rdM3Y/

Answer 1

You will need to edit either the CSS for jQuery Mobile or for jQuery UI. There are some conflicts (as you've found) with class names. For instance both frameworks have the following classes:

• ui-icon
• ui-dialog

If you want to see what classes are conflicting, inspect the dialog element in your Developer Tools (FireBug, etc.) and see what class rules are being added to the element and what CSS file they come from.

I suggest doing something like adding a class onto the beginning of the rules in the jQuery UI CSS file so you can specify in your HTML that you want jQuery UI classes rather than jQuery Mobile classes.

Change:

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

To:

.ui-dialog.force-UI { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

Then add the force-UI class to the dialog tag.