jquery mobile page not rendering after injecting handlebars template

Question

the mobile application we are working on right now consists of phonegap, jqm, handlebars and jquery.inherit as plugins so far. The idea is to make a single page application by dynamically injecting/removing templates as needed.

Currently, the application has an index.js which kicks everything off, then dynamically loads some .js files needed for the first application to run. Up until this point, everything runs perfectly fine. The trouble starts when we try to dynamically inject a handlebars template into the html file. In the single-page application, we have:

<body onload="Index.Initialize()">                          
    <script id="webApp1-template" type="text/x-handlebars-template">                    
    </script>                           
</body>

As mentioned, the Initialize loads some files and then calls the Index's constructor to initiate the loading of the initial template like so:

Index.objWebApplication1 = new WebApplication1();

The constructor itself will make a local ajax call to retrieve the html needed for injection:

var urlParam = Common.azConstants.WebRoot + "/Modules/WebApplication1/View/WebApplication1/WebApplication1.html";
    $.ajax({
        url : urlParam,
        datatype: 'text/javascript',
        success: function(response, status, jqXHR) {
            var template = $("#webApp1-template").html(response);               
            var webApp1Tpl = Handlebars.compile(template.html());               
            $('body').html(webApp1Tpl);             
        },
        error: function(err){
            alert(JSON.stringify(err));
        }
    });

The call to local file is successful and if the 'response' is alerted, i see the information i need to inject, basically a div with a jqm data-role="page etc. The script with the id="webApp1-template" is then filled with the html content - i can verify this by alerting:

alert(template.html());

The template is then compiled by handlebars and set as the body's html - i can verify this by alerting:

alert($('body').html());

and i see the div with the data-role="page" and all BUT it does not render on screen - the screen is blank.

If i remove the

<div data-role="page" class="pages app" id="home">

from my html which is being injected, the html loads but is not rendered properly. My assumption is that the data-role="page" needs to be "refreshed" but when i try

$('body').trigger("create");

absolutely nothing happens. Is there a way to dynamically load a handlebars template which has a div data-role="page" within it? The idea is to have reusable templates over multiple pages and have these pages transition between each other dynamically.

thanks

yup, it was as simple as that! thank you very much, that worked perfectly! — AzurGroup
You're welcome. I've added the comment as answer. Could you accept it? Thnx — Apostolos Emmanouilidis

Apostolos Emmanouilidis Apostolos Emmanouilidis · Accepted Answer · 2013-06-29T21:34:14

You can use $('#your-page-id').trigger('pagecreate') to trigger the pagecreate event.

This event is triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. It is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jQuery Mobile widgets do.

jquery mobile page not rendering after injecting handlebars template

1 Answers