Customize jquery mobile close button on selecmenu

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

Answer 2

selectmenu with data-native-menu="false" and long list is converted into dialog dynamically. There are no available options in jQM API to control a converted selectmenu. Hence, you need to manipulate it once it's inserted into DOM.

Before opening dialog pagebeforeshow, change button's options using .buttonMarkup().

$(document).on("pagebeforeshow", ".ui-dialog", function () {
    $(".ui-dialog .ui-header a").buttonMarkup({
        theme: "b",
        iconpos: "left",
        icon: "home"
    });
});

To change button's text when an option is ticked, use the below code. Note that when there's no option selected, button's text will be changed back to "Close".

$(document).on("change", "#selectmenu_ID", function () {
    /* no option selected */
    if ($("option:selected", this).length == 0) {
        $(".ui-dialog .ui-header a .ui-btn-text").text("Close");
    }
    /* option selected */
    if ($("option:selected", this).length > 0) {
        $(".ui-dialog .ui-header a .ui-btn-text").text("Done!");
    }
});

Demo