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. Specifically, I have the following in an HTML file:

<div id="custom-header" data-role="header" data-position="inline" data-theme="f">     <a href="index.html" data-icon="back" style="margin-top:5px" data-theme="b">Back</a>     <div style="text-align: center; padding-top: 5px; padding-bottom: 3px"><img src="../images/logo.png" ></div>     <a href="index.html" data-icon="home" style="margin-top:5px" data-theme="b">Home</a> </div> 

In my main file I'm essentially doing:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>         <div data-role="page" id="test-console" data-theme="m">      <div id="me-header"></div>      <script>          $.get('header.html', function (retData) {             $('me-header').html(retData).trigger('create');         });       </script>  </div> 

So here's the problem - The header doesn't render the same as it does as when I paste the contents of header.html directly into my JQM page. It almost feels like trigger('create') isn't doing anything.

Any ideas? I've burned about three hours and tutorials like http://jquerymobiledictionary.pl/faq.html don't seem to be applying..

Answer 1

When changing header, footer or content, you can trigger pagecreate on the page:

$('#me-header').closest(":jqmData(role='page')").trigger('pagecreate'); 

This is a jQM bug: https://github.com/jquery/jquery-mobile/issues/2703. According to a comment in the issue report, calling pagecreate multiple times may cause problems though, as elaborated in https://github.com/jquery/jquery-mobile/issues/2703#issuecomment-4677293.

Answer 2

I believe I've found the 'best' answer available. In short, the 'header' and 'footer' type data-role elements are not standard widgets. They are some sort of hybrid construct. I found this out by just going through the source code of JQueryMobile. They don't have a 'create' method, so it can't be called.

My workaround was to just apply the classes directly to my code, instead of expecting the widget to do it for me. Not ideal, but it works well enough.