javascript - jQuery appendTo list style -
i'm kinda new jquery/html5 stuff, i'm running problems. hope can help.
i'm loading local json file , want add items of list. works fine. but, list not using jquery styling?
i tried without loading json file , instead put data directly in code , worked. might problem?
here code not style correct:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tubs energie app</title> <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/> <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div id="taskspage" data-role="page"> <div data-role="header" data-position="fixed"> <a href="#" data-role="button">zurück</a> <h1>tubs energie app</h1> </div> <div data-role="content"> <h3>institut für nachrichtentechnik</h3> <ul id="tasklist" data-role="listview" data-filter="true" data-filter-placeholder="suche nach institut..." data-inset="true"></ul> </div> <div data-role="footer" data-position="fixed"> <a href="#" data-role="button">info</a> </div> </div> <script type="text/javascript" charset="utf-8"> $(function() { $(document).ready(function(){ $.getjson("institute.js",function(data) { $.each(data.institute,function(i,el){ $("<li><a href='#'>"+el.id+". "+el.name+"</a> </li>").appendto("#tasklist"); }); }); }); }) </script> </body> </html> and here code gives me correct styling
<!doctype html> <html> <head> <meta charset="utf-8"> <title>tubs energie app</title> <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.css" rel="stylesheet"/> <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div id="taskspage" data-role="page"> <div data-role="header" data-position="fixed"> <a href="#" data-role="button">zurück</a> <h1>tubs energie app</h1> </div> <div data-role="content"> <h3>institut für nachrichtentechnik</h3> <ul id="tasklist" data-role="listview" data-filter="true" data-filter-placeholder="suche nach institut..." data-inset="true"></ul> </div> <div data-role="footer" data-position="fixed"> <a href="#" data-role="button">info</a> </div> </div> <script type="text/javascript" charset="utf-8"> var institute_json = [ {"id":"1","name":"adaptronik und funktionsintegration"}, {"id":"2","name":"analysis und algebra"}, {"id":"3","name":"angewandte mechanik"}, {"id":"4","name":"angewandte physik"}, {"id":"5","name":"anorganische und analytische chemie"}, {"id":"6","name":"architekturbezogene kunst (iak)"}, {"id":"7","name":"automobilwirtschaft u industrielle produktion"}, ]; $.each(institute_json,function(i,el) { $("<li><a href='#'>"+el.id+". "+el.name+"</a></li>").appendto("#tasklist"); }); </script> </body> </html>
when add elements dynamically listview, after rendering need refresh it.
$("ul").listview("refresh"); 
Comments
Post a Comment