Jquery mobile theme on dynamic pages

Question

My theme is not being carried out on the dynamic pages that are created in the code I have below. on the first menu page it works then all other pages have the default theme not the one I have set in siteData.theme .

How can I set this?

    var siteData = build;
    $(this).find('[data-role="header"] h3').html(siteData.name);
    $.mobile.activePage.find('[data-role=header] h3').html(siteData.name);
    $('div[data-theme]', '#index').data('theme', siteData.theme);

    //reset all the buttons widgets
    $.mobile.activePage.find('.ui-btn')
        .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
        .addClass('ui-btn-up-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));

    //reset the header/footer widgets
    $.mobile.activePage.find('.ui-header, .ui-footer')
        .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
        .addClass('ui-bar-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));


    //reset the page widget
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
        .addClass('ui-body-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));


    $.each(siteData["pages"], function (i, v) {



        if (!$('#' + v["id"]).length) {


            // Build nav.
            $.mobile.activePage.find('[data-role=content]').append('' +
                '<a href="#' + v["id"] +
                '" data-role="button">' + v["name"] +
                '</a>').trigger('create');


            var components = {};




            var newPage = $("<div data-role='page' id='" + v["id"] +
                "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
                "data-rel='back'>Back</a>" +
                "<h1>" + v["name"] + "</h1>" +
                "</div>" +
                "<div data-role=content>" + pagecontent +
                "</div>" +
                "<div data-role='footer'>" +
                "<h4>" + v["name"] + "</h4>" +
                " </div>" +
                "</div>");

            newPage.appendTo($.mobile.pageContainer);



        }

    });


});

Answer 1

From your code it looks like siteData.theme holds the theme name ie 'b' so you can just add:

$('[data-role=page]').page({
        theme: siteData.theme
    });

To your script.

This will not however change the header and footer from the default theme. You could just in the newPage creation add data-theme=siteData.theme depending on whats in siteData.theme of course.