Ajax with clean url how to use browser back

Asked

Viewed 139 times

0

Hello,

Does anyone know how I can use the back of the browser with some ajax/jquery feature, 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, e.g.: http://sistema.com.br/

  • When I am at page2, I want to use the browser back, returned to 1, and continue with the clean url...

ajax url

  • When you say: "navigate between pages 1,2 and 3" Does that mean you’re searching these pages "dynamically"? If that’s the case, there’s no browsing history on the site, there’s no going back...?

  • I search dynamically, and create a session in the browser, so I refer to using this session to assign when returning.

  • How will you use the session to come back? When speaking session, what kind in which language exactly (PHP?)?

  • Yes, with php. Let’s say I save a string in the session, like 'pagina1', so I’d like to know some command with jquery, so I can do . load() of the page, when executing the browser back, with this string.

  • Okay, I get it. But, reason with me: if no navigation has been done anywhere in the domain, then the back button will not work for your purpose. The way would be to add to the history for example: when doing .load('pagina1.html') add to history pagina1.html and so for the other uploads...so the back button works bad, the url changes.

  • You can store views as cookies.

  • even q saves up the page he is searching for in cookies, as he could use the back button if there is nothing in the history?

  • You would need a command with jquery, which references this session string at the time of coming back.. like . pushState().. something like that, but I don’t know which.. there is the . Session() of jquery tbm.. I would like to know how to implement, and how to call the return function

  • Atila Silva, what’s your idea?

  • Lauro, regarding the historical, there must be a way to create it dynamically..

  • Keeping the URL clean is probably a bad experience for the user, after all the purpose of the Urls is to make it intuitive where it is located and make use of the history and bookmakers (favorites).

  • Just for the record, there’s no way to dynamically manipulate the history, it’s based on Urls, the only thing you’ll get with pushState to keep the url clean is to have in the current tab the back and next of the Paggings, if you could change the history directly it would be a serious security breach regarding user privacy.

  • William, considering a system, there are Readcrumbs to the intuitive user experience in relation to their navigation. The code of @Tobias just below seems to arrive very close to what is needed.

  • Both historical and bookmarks rely on their own Urls for each item you want to present, even for google this is a requirement, canonical Urls of preference. Removing this feature from the user, being a normal site is a big problem, both for indexing and for the user in relation to the use of browser tools, this would also complicate in feed systems, as they would not have Urls to point to. To be honest, this seems to me just an aesthetic resource, without any need, I would advise you to create friendly Urls: https://answall.com/q/128341/3635

  • @Guilherme, your thoughts are directed to a website, when in fact I’m referencing a system. They are different needs.

  • @Neo this was not so obvious, but being a closed system it would not be more interesting to create an APP that would make the Urls less evident, something like Electronjs?

  • @William, I’ll see the Electronjs, how it works, interesting tool. But as I have another way to develop currently that meets well, I need to implement some specific things.

  • 1

    @Neo beyond the ElectronJS quoted by @Guilhermenascimento, you can also study a little about PWA. Besides, this requirement of yours, it looks a lot like a SPA. Perhaps a tool that will help you, is the Quasar Framework, be it PWA or ElectronJS

  • @Tobias, I stopped the quasar showcase, they implement a description in the url, and the content is dynamically loaded with ajax, making it possible to return. I’ve seen something like this before, but how to do it. It would just be that detail. And the code you put below seems to solve me tbm, I just haven’t been able to test yet

Show 14 more comments

2 answers

1

you will have to add some state at the history, you will retrieve it in the event popstate

the example below will add the value of input as a state in the history. if you navigate, the value of input will be updated with the present 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 on 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>
<input id="text" type="text" />
<input id="add" type="button" value="Adicionar" />

YOU MIGHT NOT NEED JQUERY

  • I visualized the fiddle, I realized that to each add, a new item in the history has been added. Now how do I rescue this added value and use so that the back is related to the previous screen?

  • Could you translate that code into jquery format?

  • 1

    @Neo in navigation you must add information to state that identifies that page. when the user comes to browse, the popstate event will be executed and the respective state, then you must recreate the page from it.

1

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

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

  • the "rooting" will be fired in the event click
  • the "route" will be a value in the attribute data-value="" on the button
  • a "container" will serve to display the loaded content
  • when returning to the default status of the history (null) the container is clean

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>

On the pages a simple <h1> indicating on which page this...".

The initial status of the history is null, when arriving at start state (case of return) just display its default interface.

Browser other questions tagged ajax url

You are not signed in. Login or sign up in order to post.