CODEWITHSUNDEEP
jqueryajaxcordovajquery-mobile
mpatel
mpatel

Reputation: 486

Page Navigate to Itself using jQuery Mobile ajax Navigation Technique +PhoneGap

I am developing an Mobile application based on the jQuery Mobile and Phonegap Framework. I am using jQuery Mobile's Ajax Based Navigation in my application. I mean all the pages in single page template using data-role="page".

However I am stuck with one problem.I am using the jQuery mobile's $.mobile.changePage('#xyz'); method to navigate between pages.but the problem is when I tap on the button the page go to other page and again comes back on the page from where I had tapped on the button or link. like a->b->a again on that page itself. I don't know what is happening. I have no code errors or code issues. I have given transition="fade" in my application. I have tried all things including -webkit-backface-visibility:hidden; , "$.mobile.changePage.defaults.allowSamePageTransitions = true;" but nothing is working.I am not able to copy or paste the code. I have not the permission to do this. but if you guys can provide me the help it will be a great thing.

Hope you all will understand what I want to ask you.

This is my Edit.

For Javascript

$('#secondPage').on('pageinit',function() { jQuery('#itemlist').on('tap',function(){$.mobile.changePage('#homePage',{transition:"fade"});}); });

And For HTML

<body>
<div data-role="page" id="firstPage">
<div data-role="header" data-position="fixed" data-theme="c">
</div>
<div data-role="content" data-theme="c">
<a data-role="button" href="#" data-theme="c" data-corners="false" id="itemlist">HomePage</a>
</div>
<div data-role="footer" data-theme="c">
</div>
</div>
<!- ------------------------------------------------------------------------------- ->
<div data-role="page" id="homePage">
<div data-role="header" data-theme="c">
</div>
<div data-role="content" data-theme="c">
</div>
<div data-role="footer" data-theme="c">
</div>
</div>
</body>

Upvotes: 0

Views: 1332

Answers (1)

hegemon
hegemon

Reputation: 6764

I think there is a problem with two consecutive events firing one after another:

  1. tap event: page changes to #homePage

  2. click event: page changes back to #firstPage

Although I don't see an error in your code, this might be a bug o some unexpected behaviour of a browser. Things to consider:

  • try removing href="#" from the link
  • try removing javascript and put href="#homePage" in your link.
  • try changing the JS event from tap to click and return false.

Upvotes: 1

Related Questions