All geek questions in one place

JQuery Mobile: CSS does not appear when loading the first page, but from the second time

I am creating a simple dictionary page (currently for Korean-English). All maps are stored in localStorage. I am using jQueryMobile with several page templates as shown 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 the browser, the output stream will be the same as in the image below:

Link to the image, because I can not post a new user here

I used javascript to load a list of maps and a list of words. The populateCards () function is a function in custom_codes.js that only loads an array of maps into localstorage. The only error I get right now is that the wordList page loads without CSS on the first load (third snapshot in the stream) and fine after I return (last snapshot). Can someone help me fix this error. I would also be happy to receive some performance recommendations, as I am tuned in to use them in mobile phones.

+4
source share
1 answer

Welcome to jQM, unlike jQuery, you no longer use $(document).ready for starters ( http://jquerymobile.com/test/docs/api/events.html ), now you are listening to pageinit and pageshow , probably , your problem is that your JS runs after jQM starts pageshow , which starts right after pageinit

pageshow restarts on going to the page, so it works when you return

When jQM starts pageshow , when it goes through and applies any CSS that you use from its API. But when it got fired, you haven't added elements yet, so they haven't gotten jQM style.

If items are added after an asynchronous call, you also need to manually call .listview('refresh') .

I also have an older answer in which I outline how I organized JS in order to be easy to understand / debug in a multi-page environment how to organize jQM JS ur

You also use a single page template if welcomePage and cardsListPage are in the same file.

A multi-page template is when you have each of these pages in a separate file, which, in my opinion, is better since you load less data at the beginning if you are concerned about performance. But you need to follow the JS setup that I have in my link or your own home solution, but you are basically trying to download all your JS, no matter which page you start from. And handle for each pageinit/pageshow and have a way to determine which page of your multi-page page templates is on.

You use ids , but it doesn’t work well, because in a multi-page template, jQM can load any page more than once (in one DOM, check the debugger to see - provided that domCaching is enabled), well, I think you still know on which page this will check .attr('id') , but this is misleading, since if you made $('#cardsListPage') , you can get one of many elements.

Hope this helps you get started.

+3
source

Source: https://habr.com/ru/post/1444497/

More articles:


All Articles