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..

Solution 1

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.

Solution 2

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.

Solution 3

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

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

Hope it helps..

Solution 4

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.

Solution 5

this question is old enough by now, but I just ran into the problem so here is how I handled it -- (this maintains the set data-theme and applies the correct roles for the containing divs and headers)

$('your_selector').find('div[data-role="header"], div[data-role="footer"]').each(
    function( ){
        var dR = $(this).attr('data-role');
        var dT = $(this).attr('data-theme');
        $(this).addClass('ui-' + dR + ' ui-bar-' + dT).attr('role', (dR == 'header' ? 'banner' : 'contentinfo') ).children('h1, h2, h3, h4').each(
            function( ){
                $(this).addClass('ui-title').attr({'role':'heading', 'aria-level':'1'});
            }
        )
    }
);

depending on your code, it might be more convenient to set this up as a function and send your selector as an argument. Hope it helps.

View more solutions

Comments

[Anthony]

I changed $('me-header').html(retData).trigger('create'); to $('me-header').append(retData).trigger('create'); - no luck. I alerted the value of retData, just to verify the file did load. I made a quick example at me-again.com/test/test.html and me-again.com/test/header.html. It's like trigger('create') isn't firing..

[stormlifter]

That is very interesting. Header is the one that is driving me nuts.