In HTML5 +, the list is dynamically built and data is filled, and html5 is filled

Last Update:2015-02-13 Source: Internet

Author: User

Tags nativeui

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In HTML5 +, the list is dynamically built and data is filled, and html5 is filled

For some code, refer to demo ---- today in history.

I would like to thank the author for sharing my gratitude. Although there are only two pages, I learned how to dynamically build a list and populate the data in five + pages.

Html section:

<Body> 



Js script:


<Script type = "text/javascript"> window. onload = function () {mui. init (); mui. plusReady (function () {// for Android back eventmui. options. maintabid = mui. currentWebview. _ uuid __; // fill headvar curDate = new Date (); fillHeader (curDate); // righticon add eventmui. addEventListenerBySelector ("# info", "tap", function () {plus. device. vibrate () ;}); // ajax request datagetListData (curDate) ;}) ;} function fillHeader (Cdate) Upload mui.html ('curdatestr', cdate. toString ("MM dd, yyyy" every week mui.html ('curdateweekstr ', cdate. week ();} function getListData (cdate) {if (! Mui. constMap. key_historyOnToday) {mui. toast ("Please configure the KEY in app. js !!! "); Return;} plus. nativeUI. showWaiting ("loading data... please wait... "); console. log (plus. storage. getLength (); var existsCache = false; for (var I = 0; I <plus. storage. getLength (); I ++) {var stVal = plus. storage. key (I); console. log (stVal. substring (5 ). length + "=" + cdate. toString (). length); if (stVal. substring (5) = cdate. toString () {// exists cache date in curdateexistsCache = true; break ;}} if (! ExistsCache) {// clear all cacheplus. storage. clear ();} var stKey = "main:" + cdate; var cdata = plus. storage. getItem (stKey); if (cdata) {console. log ("read cache"); // fill cached datacdata = mui. readJson (cdata); notifiULList (cdata);} else {console. log ("read real data"); var url = 'HTTP: // japi.juhe.cn/toh/toh? Key = '+ mui. constMap. key_historyOnToday + 'dtype = json & v = 1.0 & month = '+ cdate. month () + '& day =' + cdate. day (); mui. sendRequest (url, {}, function (result) {if (result. success) {var n = result. retval. result; notifiULList (n); plus. storage. setItem (stKey, mui. writeJson (n);} else {mui. toast (result. error) ;}}, 'json') ;}}; function notifiULList (cdataList) {plus. nativeUI. closeWaiting (); var doc = document, fragment = Doc. createDocumentFragment (), container = doc. getElementById ("TIH_EventList_UL"); mui. each (cdataList, function (I, n) {console.info (n. id) notifiandsetincluetail (fragment, n) ;}); container. appendChild (fragment); mui. addEventListenerBySelector (". aEvent "," tap ", showDetail);} function notifiandsetpaietail (fragment, n) {var doc = document, li = doc. createElement ("li"), a = doc. createElement ("a"), img = doc. CRES AteElement ("img"), div = doc. createElement ("div"), p = doc. createElement ("p"); li. setAttribute ("class", "mui-table-view-cell mui-media"); console.info (n. _ id) // clearly indicates that id falls into. setAttribute ("eid", n. _ id); //. addEventListener ("click", showDetail (n. id); // note: showDetail () has been called every times. I dont know why. a. setAttribute ("class", "aEvent"); img. setAttribute ("class", "mui-media-object mui-pul L-left "); img. setAttribute ("style", "width: 42px; height: 42px;"); img. setAttribute ("src", n. pic. isBlank ()? 'Images/logo.png ': n. pic); div. setAttribute ("class", "mui-media-body"); div. innerText = n. title; p. innerHTML = n. year + "year" + n. month + "month" + n. day + "day" + "," + n. lunar; li. appendChild (a);. appendChild (img);. appendChild (div); div. appendChild (p); fragment. appendChild (li);} function showDetail (o) {var a = o.tar get. offsetParent; if (. tagName! = 'A') {// fix the end of line onclick event, it's return li not A, I dont know why. return;} mui. openWindow ({id: "detail.html", url: "detail.html", show: {autoShow: false}, extras: {eid:. getAttribute ("eid") }}) ;}</script>



According to the original author's prompt, I found the website for aggregating data, and obtained 100 free trial interfaces after registration. In order to make this app run, the real machine has been tested many times, after testing on the aggregation website, I found that the returned result is not id, but _ id. I am heartbroken, too unprofessional. The interface documentation clearly shows that you have returned inconsistent things, isn't that difficult.



In the future, we should also pay attention to the fact that, when we discover errors, we should boldly question whether you are an official document or an excellent masterpiece. I only believe in the facts.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More