Question

I have multiple <select/> tags i would like to synchronize so that when one is changed, they all change. They are all part of a navbar header for a jquery mobile page(s). My selector is this: $("header select").

I hooked up the change event like this:

var statusselect = $("header select");

var statusevent = function (event) {

    statusselect.off("change");

    statusselect.val(event.target.value);

    statusselect.on("change", statusevent);

    try {
        statusselect.selectmenu("refresh");
    } 
    catch(e) {

    } 
};

statusselect.on("change", statusevent);

This only works if i have that try/catch statement. If i take out the try/catch and its inner code, the text of the <select/> updates only after the first change. After that, the event is fired correctly and all values passed are correct, but the text never updates (showing the correctly selected option).

If I take out the try/catch and leave the statusselect.selectmenu("refresh"), an exception is thrown stating the object had yet to be initialized.

So im left scratching my head: Why do i need to throw an exception in order for the <select/> to change its text? Is it because the exception is being thrown for the <select/>s that are not in the view?

Answer 1

I think you answered your own question, the refresh method is meant to refresh a widget (selectmenu in this case) that has already been initialized, in your case the initialization for the selects that are on other pages hasn’t taken place yet (enhancement takes place in the pageinit event) so you would need to initialize it first which you should be able to do manually by calling .selectmenu().