JQuery Mobile trigger('create') command not working

Question

JQuery Mobile is making my cry tonight. I\'m trying to build custom controls so I don\'t repeat certain elements through my app, and it\'s giving me a hard time. Specifica

Answer 1

As others it make me nuts to inject header in a page. As said by anthony the problem is header is not a "basic" widget. The classes are not added by jqm doing the injection.

I do not like some much to add class ui by my self.

My (crazy?) proposal is to create a brand new page (including the header) and then extract the header tag including all the class ui ceremony added by jqm. I really do not know the perf impact, ... but it seems to work and seems more realiable than adding class by hands.

below is an example. Do you like?

$( '[data-role=page]' ).on( 'pageinit', function ( event, ui ) {
  var sHeader = '
';
        sHeader += 'Menu1';
        sHeader += '
What a nice title 
';
        sHeader += 'Menu2';
sHeader += '
';

//Create a temporary page to initialize all the ui-class 
//var sId = core.misc.GUID_new();
var sId = "azerty";
$( '#body' ).append( '
' + sHeader + '
content
' );
$.mobile.initializePage(); //do not know if needed
$( '#' + sId ).page();  //very important to let jqm generate the class ui
//console.log( "page():\n" + $( '#' + sId ).html() );

var $myHeader = $( '#tobechanged' );
//console.log( "tobechanged:\n" + $myHeader.html());

//clean the temporary page
$( '#' + sId ).empty();
$.mobile.initializePage(); //do not know if needed

//replace the id
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 
$myHeader.attr( "id", $( "#" + event.target.id ).attr("id") + "Header" );
//console.log( "myheader id: ... " + $myHeader.attr( "id" ) ); 

$( "#" + event.target.id ).find( "[data-role=header]" ).replaceWith( $myHeader );

});