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.

leo.fcx · Accepted Answer · 2015-07-10 18:54:07Z

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

Even when I change it to window.history.back();, it still does not transition between the pages.
That is because you button is a submit one and you need to prevent default behavior, I updated the reponse for it

Robert Araujo · Accepted Answer · 2015-07-10 18:33:54Z

3

This always worked for me to go back.

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

answered Jul 10, 2015 at 18:33

Robert Araujo

1371 gold badge2 silver badges11 bronze badges

2 Comments

user3413170 Over a year ago

If possible, I would love to keep them as <buttons> and not <a>

Robert Araujo Over a year ago

Here: <button onclick="history.go(-1);">Go back</button>

Darren H · Accepted Answer · 2015-07-10 18:34:36Z

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

This almost works! But it takes two clicks to get through the function, any idea why this might be?

Rohallah Hatami · Accepted Answer · 2019-03-04 12:08:44Z

1

whith onclick

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

answered Mar 4, 2019 at 12:08

Rohallah Hatami

5596 silver badges13 bronze badges

Comments

Hamid Parchami · Accepted Answer · 2015-07-10 18:36:09Z

0

Use this:

window.history.back();

answered Jul 10, 2015 at 18:36

Hamid Parchami

7,7392 gold badges21 silver badges22 bronze badges

Comments

Serkan Hürsgünel · Accepted Answer · 2019-05-22 10:14:09Z

This code snippet to simulate a back button based on the users last page

$(document).ready(function(){ $('a.back').click(function(){ parent.history.back(); return false; });

});

Collectives™ on Stack Overflow

Back button with JavaScript/jQuery

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Related