How to stay on tab when refresh page in jQuery?

Question

Pages are changing without loading (thanks to jQuery), but after reloading page they always go back to main page (main.jsp). Is it possible to stay on page I choose after refreshing?

JSP file (main.jsp):

<ul>
    if ((loginBean.getStatus() != "") && (loginBean.getStatus() != null)) {
%>
<li><a href=main.jsp><h:outputText value="#{kom.glowna}"/></a></li>
<li><a id="about_us" href="#about">O nas</a></li>
    <%
        if (loginBean.getStatus().equals("admin")) {
    %>
<li><a id="show_accounts" href="#accounts"><h:outputText value="#{kom.konta}"/></a></li>
<li><a id="register_all" href="#register"><h:outputText value="#{kom.zarejestruj}"/></a></li>
<li><a id="delete_account" href="#delete"><h:outputText value="#{kom.usun}"/></a></li>
    <%
    } else if (loginBean.getStatus().equals("klient")) {
    %>
<li><a id="zapis_na_wizyte" href="#visit"><h:outputText value="#{kom.wizyta}"/></a></li>
<li><a id="add_animal" href="#animal"><h:outputText value="#{kom.zwierze}"/></a></li>
<%
} else if (loginBean.getStatus().equals("lekarz")) {
%>
<li><a id="patients" href="#patients"><h:outputText value="#{kom.pacjenci}"/></a></li>
    <%
        }
    %>
<li><a id="my_account" href="#account"><h:outputText value="#{kom.konto}"/></a></li>
<li>
    <h:form>
        <h:commandLink action="#{loginBean.logout}" ><h:outputText value="#{kom.wyloguj}"/></h:commandLink>
    </h:form>
</li>
<%
} else {
%>    
<li>
    <h:form>
        <h:commandLink value="Wróć do strony głównej." action="#{loginBean.logout}"><h:outputText value="#{kom.wroc}"/></h:commandLink>
    </h:form>
</li>
<%
    }
%>
</ul>

JavaScript:

$().ready(function()
{
    $("#about_us").click(function()
    {
        $("article").load("about.jsp");
    });
    $("#show_accounts").click(function()
    {
        $("article").load("showAccounts.jsp");
    });
    $("#register_all").click(function()
    {
        $("article").load("registerAll.jsp");
    });
    $("#delete_account").click(function()
    {
        $("article").load("deleteAccount.jsp");
    });
    $("#zapis_na_wizyte").click(function()
    {
        $("article").load("showAnimal.jsp");
    });
    $("#add_animal").click(function()
    {
        $("article").load("addAnimal.jsp");
    });
    $("#patients").click(function()
    {
        $("article").load("pacjenci.jsp");
    });
    $("#my_account").click(function()
    {
        $("article").load("account.jsp");
    });
});

I'll be gratefull for any help.

Answer 1

One way to do it is to use hash .

See https://developer.mozilla.org/en-US/docs/Web/API/Window.onhashchange for more infos.

The idea is to use this event to handle when hash changed. This event is also sent when you load your page which contain a hash (eg yoursite.com/main.jsp#my_account).

To retreive the current hash, use window.location.hash .

Another way to do it is to use History.js .

See https://github.com/browserstate/history.js/

Answer 2

you could use a cookie (or a session) to save the page. There is a jquery plugin to manage cookies here: http://plugins.jquery.com/cookie/