i have jquery-mobile dialog open page main.html so:
$.mobile.changepage("settings.html", { role: "dialog", transiation: "pop", changehash: true }); now callback on site main.html, when dialog closed can proceed information entered in dialog.
update: mentioned should receive callback on initial location main.html
solution
dialog version of classic jquery mobile page page events can used.
what want use pagebeforehide event.
working example: http://jsfiddle.net/gajotres/cbc5q/
$(document).on('pagebeforehide', '#second', function(){ alert('close dialog'); }); there few other events use , can find them in article, chapter called: page events transition order
proof
because using several html pages made working example made 2 html files:
index.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/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script> $(document).on('pagebeforeshow', '#index',function (e, data) { var prevpage = data.prevpage.attr('id'); if(prevpage === 'second'){ alert('sdfs'); } }); </script> </head> <body> <div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> first page </h3> </div> <div data-role="content"> <a href="dialog.html" data-role="button">open dialog</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html> dialog.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/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="dialog" id="second"> <div data-theme="a" data-role="header"> <h3> second page </h3> </div> <div data-role="content"> <a href="index.html" data-role="button">close dialog</a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html> first take notice, inside dialog.html, javascript placed inside page/dialog div. ise because jquery mobile strips head content + else when opening additional pages. why javascript placed inside page/dialog div.
this should it:
$(document).on('pagebeforeshow', '#index',function (e, data) { var prevpage = data.prevpage.attr('id'); if(prevpage === 'second'){ alert('sdfs'); } }); this code trigger on initial page, before shown. if previous page dialog execute action.
Comments
Post a Comment