jquery mobile page injection

问题

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....

回答1:

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?

回答2:

wrap you jquery like this

  $(document).bind('pageinit',function(){
    $("body").on("load", function(){
    // your jquery
    //
    //
    }
   });

回答3:

For Dynamic appending(page injection) using jquery, append is not working. In this case, this code works for me.

function main_page(){

 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;


     $("#atmlist").append(this_page);/*data to append*/
     $.mobile.changePage($('#index')); /*page navigation the particular where data shown*/
     $("#index").trigger("pagecreate"); /*This is like a page refresh in jquery*/
}

来源：https://stackoverflow.com/questions/11096369/jquery-mobile-page-injection

标签

jquery

html5

jquery-mobile

jquery-selectors

onload-event