Overriding a select box in JQuery won't work unless I call alert() first?

Question

I am using JQuery Modal to show a popup with a form in. All the drop down boxes in my control panel are changed using a jquery plugin which generally works fine. To get Javascript to work with the modal I need to do a callback but I am getting odd results.

When I open the modal, I will only see the correct drop down box IF I put an alert in just before the select's are changed:

The Callback:

var myOpen = function(hash){
    hash.w.css('opacity',1).show();
    alert("test"); //This will make the selects change properly.
    $('select').selectmenu();
};

The modal open:

$('a#settings').click(function(){
    var script = 'myLink.php';
    $('#ex2').jqm({ajax: script, onShow: myOpen});
    $('#ex2').jqmShow({modal: true});
});

I guess this is something to do with the amount of time to load the modal because adding the alert in allows more time for the JS to process but this just seems odd.

Am I missing something?

EDIT: If I click the alert "Ok" button very fast the select doesn't change either which confirms my thought of the alert allowing the time for the JS to process (although I still find that odd).

Answer 1

Ok, managed to sort this by calling the .selectmenu in the onLoad event instead of the onShow.

Final code is something like:

var myLoad = function(hash){
    $('select').selectmenu();
};

$('a#settings').click(function(){
    var script = 'myLink.php';
    $('#ex2').jqm({ajax: script, onLoad: myLoad});
    $('#ex2').jqmShow({modal: true});
});