listview to open new page loading xml into new listview with links to sub page in jquery mobile -
i total noob jquery , asking in best way code list displays collection of buttons point lists created xml , lead display page when clicked.
the idea come onto page, pick area of interest (listview), loads xml , displays areas list of content (listview). click on list item , takes content page text, video etc displayed. have 20 feeds have deal with.
i can 1 xml feed work have had hard time understanding how deal multiple xml feeds , how call them , display them. examples helpful , appreciated.
here have
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="js/jquery.mobile-1.1.0.min.css" /> <script src="js/jquery-1.8.0.min.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"></script> <script src="loader.js"></script> </head> <body> <div data-role="page" id="photos"> <header data-role="header"> <h2>da news</h2> </header> <div data-role="content"> <ul data-role="listview" data-filter="true"> <li> <a href="#" id="btn"> <h2>the channel news</h2> <img src="images/icon_podcast-tcn_news.jpg" alt="tcn" /> <p>the lastest headlines around gloab</p> </a> </li> <li> <a href="#mainpage"> <h2>staff podcast</h2> <img src="images/icon_podcast-stoff.jpg" alt="staff podcast" /> <p>staff offical podcast</p> </a> </li> <li> <a href="#mainpage" > <h2>space</h2> <img src="images/icon_podcast-space.jpg" alt="space" /> <p>space stories</p> </a> </li> </ul> </div> <footer data-role="footer" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="#">home</a></li> <li><a href="#list">list</a> <li><a href="#info">info</a></li> </ul> </nav> </footer> </div> <!-- end of buttons --> <div data-role="page" data-rel="dialog" id="mainpage"> <header data-role="header"> <h1>tpc news</h1> </header> <footer data-role="footer" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="#">home</a></li> <li><a href="#list">list</a> <li><a href="#info">info</a></li> </ul> </nav> </footer> </div> <!-- mainpage --> </div> <div data-role="page" id="contentpage"> <div data-role="header"> <h1>tc news</h1> </div> <div data-role="content" data-theme="a" id="entrytext" style="text-align:center";> </div> <footer data-role="footer" data-theme="a" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="#">home</a></li> <li><a href="#list">list</a> <li><a href="#info">info</a></li> </ul> </nav> </footer> </div> <!-- contentpage --> </div> </body> </html> <scriptfile starts here ----loader.js------> /*$(document).on('click','a#btn',function(){ var xmlq = $("http://foo.xml").val(); $.mobile.changepage("#mainpage") });*/ var xml; $(document).ready(function(){ $.ajax({ type: "get", url: "http://foo.xml", datatype: "xml", success: xmlparser }); }); function xmlparser(data) { xml = data; $('#load').fadeout(); $(xml).find("item").each(function () { title = $(this).attr("title"); var title = $(this).find("title").text(); var description = $(this).find("description").text(); var pubdate = $(this).find("pubdate").text(); var link = $(this).find("link").text(); $("#list").append(' <li> <h3 id="title">' + title + '</h3> <ul> <li>description: '+ description + '</li> <li>pubdate: '+ pubdate + '</li> <li>link: '+ link + '</li> </ul> </li> '); $('#list').listview('refresh'); }); }
Comments
Post a Comment