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

I've found that the trigger('create');

Works when applied to the body like so:

$('body').append(html).trigger('create');

But the issue I am running into now is the ul list are throwing an undefined error.

Answer 2

Perhaps try:

$('#me-header').append(retData).trigger('create');

Answer 3

This is not the answer to the specific issue of the OP, but one cause for .trigger('create') not working could be that jQuery Mobile is not loaded properly in the current scope and thus not reacting to the trigger - which can happen in a poorly configured RequireJS-setup for instance.

It doesn't hurt to check console.log($.mobile) in case it shows undefined...

Answer 4

$('me-header').html(retData).trigger('create');

should be:

$('me-header').append(retData).trigger('create');

Answer 5

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 = '<div data-role="header" id="tobechanged" data-position="fixed" data-id="CPL">';
        sHeader += '<a href="#panelImageDetailLeft" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu1</a>';
        sHeader += '<h1>What a nice title </h1 >';
        sHeader += '<a href="#panelImageDetailRight" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu2</a>';
sHeader += '</div>';

//Create a temporary page to initialize all the ui-class 
//var sId = core.misc.GUID_new();
var sId = "azerty";
$( '#body' ).append( '<div data-role="page" id="' + sId + '">' + sHeader + '<div data-role="content">content</div></div>' );
$.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 );

});

Answer 6

For me, .trigger('create'); always works if applied to the element with data-role="page"

Try This : $('#test-console').trigger('create');

Hope it helps..