Back-Button from a php to a html page div id without history.back()

Question

i got a problem with a connection between two html files with a *.js

i got index.html i got a formular.php and i got a backbutton.js

what i want to do is: if i send my fomular via button im calling the formular.php to write the text into my MySQL database. If someone forgets to put in an e-mail adress i got a error page which got a button "back". with that button i want to get back to the formular page.

My Problem is that my index.html is a page with 3 differt divs with the ids page1, page2, page3. when the user finishes a quiz the page changes itself from page1 to page2 with a

function checkplayer() {
if (player1 == true && player2 == true && player3 == true && player4 == true) {
    setTimeout(function() {
        $(document).ready(function() {
            $("#page1").fadeOut(1000);
            setTimeout(function() {
                $("#page2").fadeIn(1000);
            }, 1500);
        });
    }, 1000);
}

so my whole page is 1 page at all with 3 differnt divs that are faded in and out.

If i use my back button from the formular.html with history.back(); i land at the page1 div. But i need to get to the page3 div with the formular. Same happens if i reload my page. i always land on page1 since my index.html starts with page1 and page2 and page3 are set to display: none. Thats why i guess the history back is not working in this case since i step back always means a new loaded index.html

What i tried is to make a backbutton.js

function backButton() {

    jQuery("#errorpage").fadeOut(0);
    jQuery("#page3").fadeIn(0);

}

The errorpage is faded out but the page3 is not faded in because the backbutton.js doesnt know the index.html in which the page3 div is.

Is there any possiblity to get the errorpage to fadeout and the index.html page3 to fade in? is it possible to "import" the index.html page3 div into the backbutton.js?

Anyone got an Idea on how to get a connection between these 3 files or if there is any other way to get the errorpage to fadeout and my page3 div to fadein?

Any help is appreciated. Thank you

Answer 1

You can pass the hash to a URL:

function backButton() {
    jQuery("#errorpage").fadeOut(0);
    window.location = "index.html#page3";
}

and then check for the same hash on original page like this:

function checkHash() {
    $(document).ready(function() {
        if (window.location.hash === "#page3") {
            $("#page3").fadeIn(1000);
        }
    });
}

Also, consider not allowing user to go forward at first place, if e-mail address is not entered.

Answer 2

Consider using the hash (#) to identify the 3 different pages; i.e. when switching from page 1 to page 2 signal it by changing your URl to 'YOUR_PHP_PAGE.php#page2' etc. This way, the browsers history (as well as re-load) should be able to correctly handle it. In the page-JS listen to the hash-changed-event and show the appropriate div. (Note that changing the hash by location.href = ...#page2 does NOT re-load the page, but triggers the event.) Regarding the error page (fade in/out) you could place it on the same page. Then use ajax to post the data back to the server instead of loading a new page..

Answer 3

You can use hash term as id in div and wee can call by adding hash like this (index.html#page2) to land on the specific div. This directly lands to the id instead of reload the whole page. Same time we can use fade in fade out using jquery and ajax script to post the data

Answer 4

It has been common to direct the user using anchors. With HTML5 you can make use of the history / state APIs through History.js.

I rewrote your code using the history.js plugin. Read the comments within the sample code to see what is happening. Replace the page2finished() and throw_error() functions with your currently existing ways of telling when the user has finished page 2 and when an error should be shown. Those were included to show you the flow this code should take.

HTML

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/history.js"></script>

JavaScript

$(document).ready( function() {
    var player1,
        player2,
        player3,
        player4,
        errorpage = $("#errorpage");

    //Initialize the history.js script by binding it to the window object.
    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
    });

    //Add page 1 to the browser history and load the first anchor.
    History.pushState({state:1}, "Page 1", "?page=1");

    //Make sure that the other elements are hidden when the user first loads the page.
    $("#page2, #page3, #errorpage").hide();

    function checkplayer() {
        if (player1 && player2 && player3 && player4) {
            $("#page1").fadeOut(1000, function() {
                $("#page2").fadeIn(1000, function() {
                    //Add page 2 to the browser history and load the second anchor.
                    History.pushState({state:2}, "Page 2", "?page=2");
                });
            });
        }
    }

    //After the user is done with page 2 throw them to page 3 by adding it to the browser history then loading the third anchor.
    function page2finished() {
        $("#page2").fadeOut(1000, function() {
            //Add page 3 to the browser history and load the third anchor.
            $("#page3").fadeIn(1000, function() {
                History.pushState({state:3}, "Page 3", "?page=3");
            });
        });
        
    }

    //Something went wrong! Show the #errorpage element.
    function throw_error(text) {
        //Put the error text into the element and show it to the user.
        errorpage.text(text);

        //Hide the main pages.
        $("#page1, #page2, #page3").hide();

        //Add the error to the browser history and show that anchor.
        errorpage.show();
        History.pushState({state:3}, "Error", "?page=errorpage");
    }

    //The user clicked the back button
    function backButton() {
        errorpage.hide();

        //We saved '3' linking to page 3 so tell history.js to go there.
        History.back(3);
    }

});