CODEWITHSUNDEEP
cssjquery-mobile
Sunil
Sunil

Reputation: 43

jQuery Mobile: CSS does not render on first page load but from second time

I am creating a simple vocabulary page (currently for Korean-English). All the cards are saved in localStorage. I am using jQueryMobile with multiple page template as shown in code below:

<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Card Reader</title>

    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="custom_codes.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
    <script>
    $('document').ready(function(){
    var list = JSON.parse(localStorage.getItem('cardList'));
    if(list==null){
        populateCards();
        list = JSON.parse(localStorage.getItem('cardList'));                
    }
    $cardList=$('#cardList');
    $cardList.empty();      
    $.each(list,function(i, value){
        $newItem = $('<li />');                                                                     
        $link = $('<a data-transition="slidefade" href="#wordListPage">'+value+'</a>');
        $link.attr('onClick',"loadWordList('"+value+"','wordList"+i+"')");
        $newItem.append($link);
        $cardList.append($newItem);             
    });     
});     

function loadWordList(cardName,cardId){
    var wordList = JSON.parse(localStorage.getItem(cardId));
    if(wordList==null){
        alert('no words in the list');              
        return;
    }
    $wList=$('#wordList');          
    $wList.empty();
    $list = $('<ul/>');
    $list.attr('data-role','listview');
    $.each(wordList,function(i, value){
        $newItem = $('<li />');
        $newItem.append('<h3>'+value['word']+'</h3>');              
        $newItem.append('<p>'+value['definition']+'</p>');          
        $list.append($newItem).trigger("create");
    });     
    $wList.append($list).trigger('create');     
    $('#cardTitle').html(cardName);     
}
</script>   

</head> 
<body> 

<div data-role="page" id="welcomePage">
    <h2>
        Welcome to Korean Learner
    </h2>
    <a data-transition="slidefade" href="#cardsListPage">           
        Load Cards          
    </a>
</div>

<div data-role="page" id="cardsListPage">
    <div data-role="content">
        <ul id="cardList" data-role="listview">
        </ul>
    </div>
</div>

<div data-role="page" id="wordListPage">
    <div data-role="header" class="ui-header ui-bar-b" data-position="fixed">
        <a data-rel="back">Back</a>
        <h1 id="cardTitle" >Card List</h1>
    </div>
    <div data-role="content" id="wordList">         

    </div>
</div>
</body>
</html>

When I check this in browser, output flow is as in image below:

Link to image, as I cannot post here being new user

I have used javascript to load cardList and wordlist. populateCards() function is a function in custom_codes.js which only loads an array of cards into localstorage. The only error I am getting right now is that wordList page loads without CSS in first load (third shot in flow) and is perfectly fine after I come back (last shot). Can anyone help me fix this error. Also I would be happy to get some performance tips as I am targeting this to use in mobilephones.

Upvotes: 4

Views: 4279

Answers (1)

Clarence Liu
Clarence Liu

Reputation: 4019

Welcome to jQM, unlike jQuery you don't use $(document).ready anymore for starters (http://jquerymobile.com/test/docs/api/events.html) you now listen for the pageinit and pageshow event, likely your issue is that your JS is running after jQM fires pageshow which fires immediately after the pageinit

pageshow re-fires when you navigate back to a page, that's why it is working when you go back

When jQM fires pageshow that's when it goes through and applies any CSS that you're using from its API. But when that fired, you never added the elements yet, so they didn't get styled by jQM.

If the elements are added after through an async call then you need to manually call the .listview('refresh') too I think.

I also have an older answer where I outline how I organized my JS to be easily understandable/debuggable in a multi-page environment how to organize ur jQM JS

Also you are using a single-page template if welcomePage and cardsListPage are in the same file.

Multi-page template is when you have each of those pages in a separate file, which I think is better since you're loading less data at the start if you're concerned about performance. But you need to follow the JS setup I have in my link or your own homegrown solution, but you're basically trying to load all your JS once regardless of which page you start from. And handle for each pageinit/pageshow events and have some way of determining which page of your multi-page templates your on.

You're using ids but that doesn't work well because in a multi-page template jQM may load any page more than once (into a single DOM, check the debugger to see - assuming domCaching is on), well I guess you still know what page it is by checking .attr('id') but it's misleading since if you did a $('#cardsListPage') you may get one of many elements.

Hope that gets you off to a start.

Upvotes: 3

Related Questions