Jquery Mobile Not able to append to body -
i append dynamically generated page body althought dont see error in console , not seeing dynamic page on ui. missing? once these, have multiple pages , these pages needed generated when navigate through list items pages.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appstore</title> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> <script src="js/chaseappstore.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="css/chaseappstore.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script> <script> if(/dy.htm/.test(window.location.href)) { alert("h"); pg=createpageheader(); alert(pg); $('body').append(pg); alert("appended"); } function createpageheader() { alert('hh'); pagedom="<div id='latestbuilds' data-role='page' data-transition='slide' data- cache='never' data-theme='aa'><div class='mfuturepageheader chromebar acb' data- role='header' data-tap-toggle='false' data-id='header' data-position='fixed'><table><tbody><tr><td class='left'><div class='hidden' style=''><a href='options.htm' data-rel='dialog' data-transition='slidedown'><img src='images/logout_60x60_tp.png' class='hidden logoutbuttona' /></a></div><div class='hiddenshow' style=''><a href='javascript:ref()' data-rel='dialog' data-transition='slidedown'><img src='images/home.png' class=' hiddenshow logoutbuttona' /></a></div></td><td class='center mfuturepageheadertitle'>chase appstore - latest builds</td><td class='right'></td></tr></tbody></table></div>" pagedom+="<div data-role='content'><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iphone/ipod</h2><ul data-role='listview' data-filter='true' data-inset='false' id='iphonecig'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>ipad</h2><ul data-role='listview' data-filter='true' data-inset='false' id='ipadcig'></ul></div><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>windows</h2><ul data-role='listview' data-filter='true' data-inset='false' id='windowscig'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>android</h2><ul data-role='listview' data-filter='true' data-inset='false' id='androidcig' ></ul></div></div>" pagedom+="<div data-role='footer' data-id='footer' data-theme='a' data-position='fixed'><div data-role='navbar'><ul><li><a href='#latestprodbuilds'>prod<br/>links</a></li><li><a href='#latestbuildstss'>tss/<br/>wss</a></li><li><a href='#latestbuildsur'><br/>card</a></li><li><a href='#' class='ui-btn-active ui-state-persist'>cig/<br/>mep</a></li><li><a href='#allbuilds'>all<br/>builds</a></li></ul></div></div></div>" return pagedom; } </script> </head> <body class="body"> </body> </html>
omar close, needed after change page after appended page container. also, give code over, remember use var variables , may want consider using objects instead of super long strings when creating page. maybe run javascript through jslint.
give go:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appstore</title> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/> <script src="js/chaseappstore.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="css/chaseappstore.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script> <script> function load() { var pg = createpageheader(); $.mobile.pagecontainer.append(pg); $.mobile.changepage('#latestbuilds'); } function createpageheader() { var pagedom="<div id='latestbuilds' data-role='page' data-transition='slide' data- cache='never' data-theme='aa'><div class='mfuturepageheader chromebar acb' data- role='header' data-tap-toggle='false' data-id='header' data-position='fixed'><table><tbody><tr><td class='left'><div class='hidden' style=''><a href='options.htm' data-rel='dialog' data-transition='slidedown'><img src='images/logout_60x60_tp.png' class='hidden logoutbuttona' /></a></div><div class='hiddenshow' style=''><a href='javascript:ref()' data-rel='dialog' data-transition='slidedown'><img src='images/home.png' class=' hiddenshow logoutbuttona' /></a></div></td><td class='center mfuturepageheadertitle'>chase appstore - latest builds</td><td class='right'></td></tr></tbody></table></div>" pagedom+="<div data-role='content'><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>iphone/ipod</h2><ul data-role='listview' data-filter='true' data-inset='false' id='iphonecig'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>ipad</h2><ul data-role='listview' data-filter='true' data-inset='false' id='ipadcig'></ul></div><div data-role='collapsible'data-theme='a' data-collapsed='false' data-content-theme='d'><h2>windows</h2><ul data-role='listview' data-filter='true' data-inset='false' id='windowscig'></ul></div><div data-role='collapsible' data-theme='a' data-collapsed='false' data-content-theme='d'><h2>android</h2><ul data-role='listview' data-filter='true' data-inset='false' id='androidcig' ></ul></div></div>" pagedom+="<div data-role='footer' data-id='footer' data-theme='a' data-position='fixed'><div data-role='navbar'><ul><li><a href='#latestprodbuilds'>prod<br/>links</a></li><li><a href='#latestbuildstss'>tss/<br/>wss</a></li><li><a href='#latestbuildsur'><br/>card</a></li><li><a href='#' class='ui-btn-active ui-state-persist'>cig/<br/>mep</a></li><li><a href='#allbuilds'>all<br/>builds</a></li></ul></div></div></div>" return pagedom; } </script> </head> <body class="body" onload="load()"> </body> </html>
Comments
Post a Comment