javascript - page navigation not working -

javascript - page navigation not working -

i'm new phonegap , have had pick else's code. having issue page navigation. have onclick event on list item , depending on boolean, want navigate specific page.

the 2 possible pages user move identical. there 1 div different containing list view. had 1 page , loaded html of div dynamically javascript css not beingness applied decided create additional page identical apart 1 div mentioned above.

my issue whichever div(page) create first in index.html work navigation sec 1 not i.e.

if define divs in next order:

<div id="page1" data-role="page"></div> <div id="page2" data-role="page"></div>

then navigating page1 work , navigating page 2 not. if switch order in place divs in index.html page i.e.

<div id="page2" data-role="page"></div> <div id="page1" data-role="page"></div>

then navigating page 2 work , navigating page 1 not.

hope made sense. here code:

in head tag have next function:

function setmyaccountsbool(bool){ myaccountsbool=bool; if (checkbool){ alert('here'); $.mobile.changepage("file:///users/roseannecarroll/documents/workspace2/girtbank/assets/www/index.html#myacctrans4"); //window.location = "file:///users/roseannecarroll/documents/workspace2/girtbank/assets/www/index.html#myacctrans3"; //$("#myacctrans3").trigger("pagecreate"); } else{ alert('here2'); //$.mobile.changepage('#myacctrans'); $.mobile.changepage("file:///users/roseannecarroll/documents/workspace2/girtbank/assets/www/index.html#myacctrans"); } };

then on listview, calling above function onclick event. entering function, getting alert either 'here' or 'here2' depending on boolean.

and here 2 identical divs have:

<div id="myacctrans" div class="page" data-role="page" data-theme="a" style="text-align: center;"> <div data-role="header"> <a href="#transfermoney" data-rel="back" data-icon="arrow-l" data-iconpos="notext" data-role="button" data-theme="c" data-transition="slide"></a> <div class="centered"> <img src="../images/log_out.png" alt="log_out" onclick='javascript:location.href="#loginscreen";' class="c1"> <h3><div id="myacctrans_name"></div>choose</h3> </div> </div> <div data-role="content" style="padding: 10px;text-align:center"> <div class="centered"> <div class="centered" id="myacctrans_number"></div> </div> </p> <div class="bookbal"><b><div id="myacctrans_book_bal"></div></b> </div> </p> <div class="accountnum"> </div> <div style="padding:10px"> <ul data-role="listview" data-divider-theme="a" data-inset="true"> <li data-role="list-divider" role="heading"> take existing business relationship transfer: </li> <div id="myacctrans_target_div" style="padding:10px"> <ul id="myacctrans_ul" data-inset="true" data-role="listview" data-divider-theme="a"> <li id="0" data-theme="c"><a href="#maketransfer" data-transition="slide" > savings - 173</a><div ><a href="#myacctrans" data-transition="slide"> </a></div></li></ul> </div> </ul> </div> <div data-role="footer" class="centered3" data-theme="a" > <a href="#" onclick="boolcheck();" class="tabbar" data-role="button"><img src="../images/homegrey50.png"></a> <a href="#exchangecalc" class="tabbar" data-role="button"><img src="../images/eurogrey50.png"></a> <a href="#loancalc" class="tabbar" data-role="button"><img src="../images/calculatorgrey50.png"></a> <a href="#other" class="tabbar" data-role="button" ><img src="../images/locationgrey50.png"></a> </div> </div>

and

<div id="myacctrans4" div class="page" data-role="page" data-theme="a" style="text-align: center;"> <div data-role="header"> <div class="centered"> <img src="../images/log_out.png" alt="log_out" onclick='javascript:location.href="#loginscreen";' class="c1"> <h3><div id="myacctrans_name"></div>choose</h3> </div> </div> <div data-role="content" style="padding: 10px;text-align:center"> <div class="centered"> <div class="centered" id="myacctrans_number4"></div> </div> </p> <div class="bookbal"><b><div id="myacctrans_book_bal4"></div></b> </div> </p> <div class="accountnum"> </div> <div style="padding:10px"> <ul data-role="listview" data-divider-theme="a" data-inset="true"> <li data-role="list-divider" role="heading"> take existing business relationship transfer: </li> <div id="myacctrans_target_div4" style="padding:10px"> <ul id="myacctrans_ul4" data-inset="true" data-role="listview" data-divider-theme="a"> <li id="0" data-theme="c"><a href="#maketransfer" data-transition="slide" > current - 004</a><div ><a href="#myacctrans" data-transition="slide"> </a></div></li></ul> </div> </ul> </div> <div data-role="footer" class="centered3" data-theme="a" > <a href="#" onclick="boolcheck();" class="tabbar" data-role="button"><img src="../images/homegrey50.png"></a> <a href="#exchangecalc" class="tabbar" data-role="button"><img src="../images/eurogrey50.png"></a> <a href="#loancalc" class="tabbar" data-role="button"><img src="../images/calculatorgrey50.png"></a> <a href="#other" class="tabbar" data-role="button" ><img src="../images/locationgrey50.png"></a> </div> </div>

any help appreciated

javascript jquery html css cordova