javascript - PhoneGap how to refresh/reload page using one page app -
currently, have 1 page app uses handlebars templates. has search function controlled specific class page, page /#page/1 when click search result, takes different page controlled seperate external class called /#exhibitors/432 (the exhibitor id number @ end).
when click go back, , phonegap loads search page (#page/1) in ios/safari, unless reload entire html page using location.reload(), app cache search first entered, , wont take new input.
i have tried use location.hash add random string end of hash, work when reload entire html page using location.reload() when button clicked.
there no issue android/chrome.
any feedback how reload html , load search page @ #page/1 appreciate that. have tried using location.href = url/#page/1, load page none of dynamic data.
more thoughts on topic:
1) rule of thumb avoid re-loading whole html page. how achieve this? in html page, should have specific div, manipulate see fit. example, on /#page/1, should set content of div whatever #page/1 supposed , when user hits search, search content should shown in field. (please notice that, talking ui side of things. actual search done other service , can make ajax call service page).
2) listening sorts of events (e.g. /#page/1, user hitting search button, server returning search results, or server returning error message etc). , depending on going on, should decorate div accordingly.
example html:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="format-detection" content="telephone=no"/> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/> <title>example</title> </head> <body> <div id="jqui"> <div id="content"> </div> </div> </body> </html>
in above html, play div id "content". here how:
document.addeventlistener("deviceready", letgetgoing, false); ... function letsgetgoing(){ $('content').html(usetemplatenamed('page1template')); $('.search').on('change', switchtosearch); } function switchtosearch(){ $('content').html(usetemplatenamed('search')); $('.submit').on('change', verifyandsendtoserver); } ...
above pseudo code. wrote give idea.
i hope helps.
Comments
Post a Comment