Back button with JavaScript/jQuery

Question

I have two identical HTML pages (index.html and page1.html) that contain two buttons:

<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li class="ui-body ui-body-b ui-li-static ui-body-inherit ui-last-child">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <button id="submit" type="submit" class="ui-btn ui-btn-a ui-corner-all">Submit</button>
            </div>
            <div class="ui-block-b">
                <button id="cancel" data-direction="reverse" type="submit" class="ui-btn ui-btn-a ui-corner-all">Cancel</button>
            </div>
        </fieldset>
    </li>
</ul>

Where one button changes to the second page, and the second button acts like a back button. (Ideally, you can use the first button to get to the second page, and then use the back button on the second page to get back to the first.)

I control this using JavaScript (this only pertains to the index.html buttons, but the page1.html JS is identical):

$(document).on('click', '#submit', function() {
    $(":mobile-pagecontainer").pagecontainer("change", "page1.html",  {
        transition: 'slide',       
        changeHash: true
    });
});

$(document).on('click', '#cancel', function() {
    parent.history.back();
    //$.mobile.back();
});

But nothing I try seems to work. I know that the program reaches the parent.history.back(); because I've set break points in the console, but other than that I have no idea why it will not return to the first page.

Answer 1

history is a property from window object and not from an html element. So, this should work:

window.history.back();

instead of:

parent.history.back();

At the end you should have something like this:

$('button#cancel').on('click', function(e){
    e.preventDefault();
    window.history.back();
});

This is going to also prevent the default behavior of your submit button

Answer 2

This always worked for me to go back.

<a href="javascript:history.back()">BACK</a> 

Answer 3

Your cancel button is still a submit button, so it's going back then submitting the form, sending you forwards again and essentially undoing your back maneuver.

Use

return false;

after the parent.history.back();

to stop the submission from continuing

Answer 4

whith onclick

 <a onclick="window.history.back();" class="btn btn-sm btn-info">back</a>