Dojox mobile back button

Question

Please help, this is really making me go crazy. I am somewhat new to Javascript, and am trying to work with the Dojox.mobile framework...

Basically, what I want to do is have a button, that goes to a <div> which is located before the current one when clicked. This needs to be a normal html <button> or <div>, and can't be a ul, li, heading or similiar, since it is located in the middle of the view, not on the top or any sort of border (the exact location is given in the style tag).. I tried implementing the dojo.back framework, but I can't seem to get it right with what should load or what should go where. I tried implementing it with the OnClick property (which is how I implement all other buttons that go forward), but it causes total overlapping between all the divs. I tried implementing it with the moveTo property, but I think that's only available to ul and li elements, not normal buttons or list elements (and if they are available to normal divs, I have no idea how to implement them).

And I have honestly no idea what else I can do, please help!

Answer 1

For dojox.mobile.View, there's a function called performTransition which can switch from one view to another. Here's a quick example of something you might could use:

HTML:

<div id="first_view" data-dojo-type="dojox.mobile.View">
    <p>First view you see</p>
    ...
</div>
<div id="second_view" data-dojo-type="dojox.mobile.View">
    <p>Second view</p>
    <button data-dojo-type="dojox.mobile.Button" 
        data-dojo-props='onClick:function(e){goBackToFirstView();}'>
        Back
    </button>
</div>

JavaScript:

function goBackToFirstView () {
    // load the view that should be visible
    var secondView = dijit.registry.byId("second_view");
    // transition slides back one
    secondView.performTransition("first_view", -1, "slide");
}