Jake Chasan
Jake Chasan

Reputation: 6560

Where should I place jQuery Mobile pages generated dynamically

Does anyone know the best place to add the HTML code for jQuery Mobile pages that have been dynamically generated?

I have been adding them to the end of the <body>, however, this is causing problems with other jQuery mobile pages.

I have tried adding the jQuery Mobile pages into a div at the end of the page, however, their ids are no longer accessible via hrefs.

Link to Code: http://jakeserver.com/Apps/BostonLandmarks/B11/index.html

Any ideas?

Upvotes: 0

Views: 44

Answers (1)

ezanker
ezanker

Reputation: 24738

I recommend you move all script within the individual page divs to a global script tag and then run that code within a pagecreate event of the page e.g.:

$(document).on('pagecreate','#landmarks', function(){
    function setNewActiveTab(newTab){
        $(".LandmarksTab").removeClass("ui-btn-active");
        $(".LandmarksTab").removeClass("ui-btn-active");
        $(".MoreTab").removeClass("ui-btn-active");
        $(newTab).addClass("ui-btn-active");
    }

    assembleRows(landmarksArray);
    assembleLandmarkPages(landmarksArray);
    determineMapScreen();
});

Here is a working jsFiddle based on your code.

This will ensure that the code runs at the correct time with respect to jQM's page creation/enhancement.

Upvotes: 1

Related Questions