cordova - How to add customised page load events in jquery mobile -
i trigger page load event manually on specific areas in code.iam using jquery mobile,phonegap.
for ex:
function jsoncallback(){ // thing pageload('#page2'); } pageload(){ // trigger page2 load event } $(document).on("pageload", "#page2", function(e) { }); edit: iam using phonegap deviceready event database created
document.addeventlistener( 'deviceready', ondeviceready, false ); function ondeviceready() { //code generate db //now need trigger page1 pageshow event fetch result database } any ideas ?
thanks
you can't trigger page events manually because don't work that.
they trigger automatically under cases page initialization or in case when $.mobile.loadpage() function used.
also don't think want trigger pageload event because, told earlier trigger after $.mobile.loadpage() function. function don't accept # page parameter, instead real html file must provided.
or can initiate changepage function this:
$.mobile.changepage("#page2"); this function can used # page parameter. 1 more thing pageload event can triggered $.mobile.changepage() if html file opened, $.mobile.loadpage() function.
edit :
unfortunately solution comments not work. because can pause page load. nothing prevents cheating. let initial page empty, use page event query db , dynamically create index page. changepage #index page. way can done.
working example: http://jsfiddle.net/gajotres/g7s58/
in example not querying database because don't have example similar because creating dynamical page content , appending second #index page. way work without problems.
html :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="page" id="hidden"> </div> <div data-role="page" id="index"> <div data-theme="b" data-role="header"> <h1>index page</h1> </div> <div data-role="content"> </div> </div> </body> </html> javascript :
$(document).on('pagebeforecreate', '#hidden', function(e){ $("<ul>").attr({'data-role':'listview','data-inset':'false','id':'mylist'}).append('<li><a>list element 1</a></li>').appendto($('#index [ data-role="content"]')); $.mobile.changepage('#index'); });
Comments
Post a Comment