Ajax with clean url how to use browser back

Question

Ajax with clean url how to use browser back

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello,

Does anyone know how to use the back of the browser with some ajax / jquery resource, considering that the url is clean?

For example, when browsing, a php session is created, so when I navigate between page1, page2 and 3, the url remains clean, eg > link
When I'm on page2, I want to use the browser back, returned to1, and continue with the clean url ...

ajax url

asked by anonymous 06.04.2018 / 14:14

2 answers

Passing JS variable to ManagedBean Problems generating dynamically schedules

score 1 · Answer 1

You will have to add some state to history , you will recover it in event popstate

The example below will add the value of input to state in history . if you navigate, the value of input will be updated with the value present in history .

var text = document.getElementById("text");
var add = document.getElementById("add");
add.addEventListener("click", function () {
  history.pushState(text.value, document.title, "/");
})

window.addEventListener("popstate", function(evt){
  text.value = evt.state
});

<input id="text" type="text" />
<input id="add" type="button" value="Adicionar" />

The example does not work here in SO , but can be seen in JSFiddle

EDIT

Since you need more jquery ...

var text = $("#text");
var add = $("#add");
add.on("click", function () {
  history.pushState(text.val(), document.title, "/");
})

$(window).on("popstate", function(evt){
  text.val(evt.state);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="text" type="text" />
<input id="add" type="button" value="Adicionar" />

`YOU MIGHT NOT NEED JQUERY`

score 1 · Answer 2

Since you are dynamically loading these pages the correct one would be to use History API and save this "new state".

As you have not posted any code on how you will manage calls ( .load() ) this example assumes that:

"rooteamento" will fire in click
the "route" will be a value in the data-value="" attribute on the
a "container" will serve to show the loaded content
returning to the default history state (null) the container is cleaned

EXAMPLE

<body>
<div id="container"></div>
<button type="button" data-value="pagina1.html" class="navigate">Carregar pagina1.html</button>
<button type="button" data-value="pagina2.html" class="navigate">Carregar pagina2.html</button>
<button type="button" data-value="pagina3.html" class="navigate">Carregar pagina3.html</button>

<script src="path/to/jequery.js"></script>
<script>
    $('.navigate ').on('click', function() {
        let target = $(this).attr('data-value')
        $('#container').load(target, function() {
            history.pushState(target, "", "/")
        })
    })
    window.addEventListener("popstate", function(evt) {
        if ( evt.state ) {
            $('#container').load(evt.state)
        } else {
            $('#container').html('')
        }
    }, false)
</script>
</body>

In the pages a simple <h1> indicating on which page this ... you can navigate the history "front" and "back".

The initial status of the history is null , when it arrives in the initial state (if it returns) just display its default interface.