JQuery Mobile dynamically added pages are unthemed

Question

I'm currently trying to dynamically generate pages from a JSON file. I can generate the page, but when I visit the page afterwards, the page is unthemed save for the back button. Here's my code for generating the page:

function generateClassPage(dept, cNumber) {
    $("body").append('<div data-role="page" data-control-title="' + majorArray[dept] + ' ' + cNumber + '" id=' + dept + 'p' + cNumber + '>');
    $('#' + dept + 'p' + cNumber).append('<div data-theme="b" data-role="header"><a data-role="button" data-inline="true" data-direction="reverse" data-rel="back" data-transition="slidedown" data-theme="e" href="#page2" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>');
    $('#' + dept + 'p' + cNumber).append('<h3>' + majorArray[parseInt(dept)] + ' ' + cNumber + '</h3>');
    $('#' + dept + 'p' + cNumber).append('</div><div data-role="content">');

    $('#' + dept + 'p' + cNumber).append('<h3>' + pageParameterArray.name + '</h3>');
    $('#' + dept + 'p' + cNumber).append('<div data-controltype="textblock"><p><span><strong>Units</strong>: ' + pageParameterArray.units + '</span></p>');

    $('#' + dept + 'p' + cNumber).append('<p><span><strong>Pre-Requisites</strong>:&nbsp;</span></p>');
    $('#' + dept + 'p' + cNumber).append('<ul>');

    alert(pageParameterArray.prerequisites.length);

    if (pageParameterArray.prerequisites.length > 0) {
        for (var i = 0; i < pageParameterArray.prerequisites.length; i++) {
            $.ajax({
                url: 'http://majors.uclastudentmedia.com/classes/',
                type: 'GET',
                crossDomain: true,
                data: {
                    pk: pageParameterArray.prerequisites[i]
                },
                dataType: 'json',
                success: function (json_3) {
                    alert("JSON Length = " + json_3.length);
                    $('#' + dept + 'p' + cNumber).append('<li><span>' + majorArray[parseInt(json_3[0]['fields']['department'])] + ' ' + json_3[0]['fields']['class_number'] + '</span></li>');
                }
            });
        }
    }    

    $('#' + dept + 'p' + cNumber).append('<li><span>n/a</span></li>');
    $('#' + dept + 'p' + cNumber).append('</ul>');

    $('#' + dept + 'p' + cNumber).append('</div></p></div></div></div>');
    alert("Page created!");
    $('#' + dept + 'p' + cNumber).page();
}

When checking the HTML page afterwards, the div is properly added and can be accessed, but it's missing all of the JQuery mobile theme elements. Is there something I have to do to refresh the theme? Thanks!

Answer 1

Yes, you have to trigger the create event after the HTML is in place. Something like this should do the trick:

$(document).trigger('create');

Note this needs to run after all the HTML has been created, otherwise it won't work properly.

Answer 2

Have you tried assigning an id attribute to the page div you are appending then do:

$("#pageid").trigger('create');

directly on that div using your assigned id in place of #pageid