CODEWITHSUNDEEP
javascriptjqueryeventsselectjquery-mobile
frequent
frequent

Reputation: 28493

how to create a jquery mobile select menu at pagebeforeshow?

I'm using dataTables with Jquery Mobile. My dataTable is initiated on pageBeforeShow. Inside my init callback function I construct a JQM select menu. This menu does not get properly enhanced = the button is there, but the custom-select is not created.

That's my problem!

Here's the shortened code:

 $('div:jqmData(role="page")').live('pagebeforeshow', function(e, data) {

    /** init datatables **/
    $('.tbl_orders').dataTable( {
        /* callback */
        "fnInitComplete": function(oSettings, json) {

             var thead = $(oSettings.nTHead),
                 bodyRows = $(oSettings.nTBody).find("tr, TR"),
                 hdrCols = thead.find( /* all header columns */ );
                 /* create select */        
                 tableSelectMenu = $('<select name="toggleCols" id="toggleCols" multiple="multiple" data-icon="setup" data-iconpos="notext"></select>')

             /* loop through header cols add options */
             hdrCols.each(function(i){                  
               var toggle = $('<option value="'+id+'">'+th.text()+'</option>');
               tableSelectMenu.append(toggle);

               }); // end hdrCols loop 

             $('.stickSelectHere').append(tableSelectMenu)
             }
        });

If I do it like this, the select button is there but does not do anything, because the custom-select-menu is missing.

I tried to create the select earlier on pagebeforecreate, because that's where I'm checking for touch devices and assigning data-native-menu="true/false". But putting the select there, also doesn't do any good, maybe because I just create it and don't drop it in the DOM until my tableInit... mh.

Question:
Can someone tell me how to create a select with custom-menu at pagebeforeshow?

Thanks for help!

Upvotes: 1

Views: 1706

Answers (1)

Ryan
Ryan

Reputation: 28177

You likely just need to add the following after your append, i.e.

$('.stickSelectHere').append(tableSelectMenu)
$('#toggleCols').selectmenu('refresh');

Upvotes: 1

Related Questions