jquery mobile change page with page transition from javascript

Question

I am doing transitions with the help of this page: http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html

I do a transition when clicking on the link:

<a href="#page1" data-transition="slide" data-role="button" > Submit </a>

That makes a slide transition.

If I where to change data-transition attribute to data-transition="none" I will get no transition.

Now I will like to do some logic before doing the transition. In other words it will be nice if I could perform the same transition with javascript. This is what I have right now:

function GoTopage1()
{
    if(someVar == true)
        window.location = "#page1";
}

and my link now is like:

<a onclick="GoTopage1()" data-transition="slide" data-role="button" > Submit </a>

That code works but I have lost the slide transition. When clicking on the link I get the default transition which is a fade in transition. How could I do the transition with code?

---

Edit

Finally I figured out how to do it:

I placed a hidden link:

<a id="t1" href="#page1"  data-transition="slide" ></a>

then on my function I now have:

function GoTopage1()
{
    if(someVar == true)
        $("#t1").click(); // simulate link click        
}

Answer 1

I suspect that because you're binding with the onclick in the anchor tag, your method happens first, and then jQuery mobile probably says "we're already there - no need for a transition".

I wonder if you could use the $.mobile.changePage() method from jQuery-mobile instead of setting window.location. That might push the activity through jQuery-mobile code and make the transition work.

Alternatively, since jQuery page logic is based on hashchange events, maybe you should be setting location.hash instead of location. You might check out the docs here:

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

Edit: As of jQuery Mobile 1.4, $.mobile.changePage() is deprecated and $.mobile.pageContainer.pagecontainer("change") should be used instead. Example:

$.mobile.pageContainer.pagecontainer("change", "#page1", {transition: "slide"})