Customize jquery mobile close button on selecmenu dialog

Question

I am trying to change the close button on a jqm dialog to something other than X. I can't use CSS for this since I don't want this to apply every time, so I am looking for a way to do it with jquery. The dialog in question is a selecmenu with Multiple selects

The reason that I want to modify the icon is that the close button may leave the user confused as to weather his selection will be cleared or not (since it is a multiple select).

This is what I have tried but it isn't working for mobile devices:

$('#MySelect-button').unbind('click').bind('click', function () {
        var iconBtn;
        $('#MySelect').selectmenu("open");
        iconBtn = $('#MySelect-menu').closest('div.ui-selectmenu, div.ui-dialog-contain')
                                     .find('div.ui-header span.ui-icon-delete')
                                     .addClass('ui-icon-check')
                                     .removeClass('ui-icon-delete');

        iconBtn.closest('a').attr('title', 'Done');

        $('#MySelect').selectmenu("refresh");
});

The selectmenu actually has an option 'icon' but it isn't the close option icon. My jqm version is 1.2.1

Answer 1

Here is a simple workaround:

$(document).on("pageinit", "#page1", function(){
    $("#MySelect-button").on("click", function(){
        setTimeout(ChangeIcon, 50);
    });
});

function ChangeIcon(){
    $('.ui-popup-active a[data-icon=delete], .ui-dialog a[data-icon=delete]').buttonMarkup({ icon: "check"}).prop("title", "done");
}

Clicking on the select button does its default launch of either a popup or a full dialog depending on the number of items. After a small delay we run the ChangeIcon function which updates the buttonMarkup of the A tag to change the icon and updates the title property to give you the 'done' tooltip. The first part of the selector takes care of the popup scenario while the second part takes care of the dialog scenario.

Here is a DEMO