Menu
I have this simple html (I am hosting my own files and it works)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="JQM/jquery.mobile-1.0.1.min.css" />
<script src="JQM/jquery.js"></script>
<script src="JQM/jquery.mobile-1.0.1.min.js"></script>
<script src="pages.js"></script>
</head>
<body onload="main_page();">
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<div id="main_div" data-role="content">
</div>
</div>
</body>
</html>
on the onload I have to call this function and add the content generated in js to id="main_div" or data-role="content"
function main_page(){//trips menu
var this_page =' ';
var this_body='';
this_body += '<ul data-role="listview" data-inset="true" data-filter="true">';
this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
this_body += "<li><a href=\"#\">Invite friends</a></li>";
this_body += "<li><a href=\"#\">Forum</a></li>";
this_body += '</ul>';
this_page += this_body;
var $page = $( pageSelector ),
$content = $page.children( ":jqmData(role=content)" );
$page+=this_page;
$.mobile.changePage(#,$page);
}
this is just a simple example of what I have to do. But no matter what I do it doesn't work....
569
You can't load a page like that but If your goal is to load this menu you can achieve that with this snippet :
$(document).on('pageinit',function(){
// this is the mobile onload event
var this_page =' ';
var this_body='';
this_body += '<ul id="menu" data-role="listview" data-inset="true" data-filter="true">';
this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
this_body += "<li><a href=\"#\">Invite friends</a></li>";
this_body += "<li><a href=\"#\">Forum</a></li>";
this_body += '</ul>';
this_page += this_body;
$('#main_div').append($(this_page));
//EDIT : you also need to trigger the listview creation after inserting, almost forgot this trick :P
$('#menu').listview();
});
you can remove the onload function from your body with that method. Is that what you want to do?
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
