Question

I am using jQuery Mobile to post through AJAX to a server.
The response is received as JSON which I am trying to display using a Mustache template.
Everything works but jQuery is not rendering correctly, e.g. it is not adding the class, styling etc. to the rendered template.

Loading the template and posting:

    $('#continueToHome').click(function() { // called on button click
        // call ajax, send no params, receive json
    $.post("http://localhost:3000/app_login.json", "", function(result){
        // load template
        var template = $('#personTpl').html();
        // render data into template
        var html = Mustache.to_html(template, result);
        // append to page
        $('#sampleArea').html(html);
    });
    // display page
     $.mobile.changePage( "#page-homepage", { transition: "slide"} );
    });`

The html:

    <script id="personTpl" type="text/template">
       <h1>{{first_name}} {{last_name}}</h1>
       Email: {{email}} <br> 
       <h3>Smifrs</h3> 
       <ul data-role=listview>
       {{#usmifrs}}<li><a href=#>{{name}}</a></li>
       {{/usmifrs}}</ul>
    </script>
    <div id="sampleArea"></div>

The problem is it does not display correctly.
When I have a regular ‘ul’ element with ‘data-role=listview’, jQuery injects class=’ui-listview’, divs and styles for the ‘li’ tags, but when I use my template it does not happen.

I guess I am supposed to somehow reload the page, but I can’t find how.

Thanks for your help.

Answer 1

Just trigger the ‘create’ event on node. works for me.

http://andymatthews.net/read/2012/05/17/Dynamically-creating-jQuery-Mobile-radio-buttons-with-Mustache