Search code examples
javascriptjquerycssjsonjquery-mobile

Page load order problematic - styles not applying

I am building a simple web app for mobile platforms using jQuery Mobile and in that, I intend to read some data from an API sending it as JSON (which I have exposed from a server side Django based project), and then parses it using jQuery's mechanism and then I create list elements based off that data. Now, I have the following index.html:

<html>

    <head>
        <title>Playism App</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jsonParser.js"></script>

        <link rel="stylesheet" type="text/css" href="css/major.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
    </head>

    <body>
        <p>List of games: </p><br/>
        <div id="gameContainer" data-role="page">
            <ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
                <!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->   
                <li><a href="#">Dummy</a></li>
            </ul>       
        </div>
        <script type="text/javascript" src="js/gamesRenderer.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ 
                renderGames();
            });
        </script>
    </body>
</html>

Now, just to test I created that Dummy list element and it's rendering perfect but there is no styling applied to any of the new elements which I inject using .append() calls from jQuery. The code is as follows:

function renderGames(){
    for (var i = objCreated.length - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");

    };
}

and as can be seen in index.html, I am calling it at DOM ready but no jQuery mobile styling gets applied to these manually injected list elements whereas the Dummy element gets proper styling. I believe something is wrong with the order in which the elements are called. Thanks in advance !

Solution

  • Don't get me wrong but this question was asked so many times, but here's a solution for you:

    function renderGames(){
    for (var i = objCreated.length - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");

    };
    $("ul#gamesList").listview('refresh');
}

    You need to use:

    $("ul#gamesList").listview('refresh');

    When working with a dynamically added jQuery Mobile you must manually start markup enhancement process. Read more about it in this article.

    One other thing, never use document ready with jQuery Mobile, they should not be combined. Read more about it here. Sometimes it works sometimes not. Basically when working with jQuery Mobile always use page events.

    Your final javascript should look like this:

    $(document).on('pagebeforeshow', '#gameContainer', function(){ 
    renderGames();
});

function renderGames(){
    for (var i = 10 - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>Some object" + i + "</a></li></ul>");

    };
    $("ul#gamesList").listview('refresh');
}

    Working example: http://jsfiddle.net/Gajotres/5uPfM/