CODEWITHSUNDEEP
jquery-mobilecordova
coderslay
coderslay

Reputation: 14370

How to change the page so that i won't see it happening using Jquery-mobile?

I am using phonegap(1.8.1) and jquerymobile(1.1.0) together in my application

Now i open my application by opening the index.html page. My index.html contains lots of pages like

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

I need to open a page depending upon the flag which i have. Currently the page1 opens by default. But suppose i want to open page2 as soon as my application opens then i did a changePage() in pagebeforeshow like this

$("#page1").on("pagebeforeshow", function(e) {
$.mobile.changePage("#page2");
});

But it always shows me page1 first and then it goes to page2. I want to directly open page2 How to do it?

Upvotes: 1

Views: 229

Answers (1)

Th0rndike
Th0rndike

Reputation: 3436

So, i think you're using the wrong event here. From jqm-events:

**pagebeforeshow**
Triggered on the "toPage" we are transitioning to, before the actual transition  
animation is kicked off. Callbacks for this event will recieve a data object
as their 2nd arg.  


 **pagebeforeload**

Triggered before any load request is made. Callbacks bound to this event can call  
preventDefault() on the event to indicate that they are handling the load request.  
 Callbacks that do this *MUST* make sure they call resolve() or reject() on the   
deferred object reference contained in the data object passed to the callback.

So, pagebeforeload is probably the default event you need to use in order to switch the page, since it's executed before LOADING the page, so you can't see it.

The main problem with pagebeforeshow is that when this event is triggered, there's already a page being loaded and ready to be shown. Calling a changePage() inside this event will only put in a queue the page transition to the new page to be shown after the currently being shown page. Maybe using this event and the "preventDefault()" technique explained in the jqm site could get you to the required behaviour, but i have never tried this so i can't help you further. Good luck.

EDIT: As the OP stated in the comments, the problem was the default transition of jqm. If a new page is loaded, automatic slide transition will be triggered, so the first page will be shown and then transitioned to the page called in changePage(). Solution is to avoid the transition like this:

$.mobile.changePage('#page', {transition:'none'});

that way, target page will be shown suddenly.

Upvotes: 1

Related Questions