How to change html Ajax content when clicking on the back button?

user_7273122 0
Viewed 115

I have a search page with filter. When the user change the filter values, I add parameters to the URL to prevent the values if the user refreshed the page

q       = $('#form input[name=q]').val(),
srchtype= $('#filter input[name=srchtype]:checked').val(),
sortBy  = $('#filter select#sortBy').val(),
parameters = "q="+qVal+"&srchType="+srchType+"&sortBy="+sortBy;
history.pushState(null, null, '?'+parameters);

then I get the data using Ajax

$.ajax({
    type: "POST",
    url: url,
    data: parameters+"&_token="+_token
}).done(data => {
    // Javascript Code
});

The problem is that when the user click on the browser's back button, the URL will change to the previous one, but the data on the page will not change.

jquery ajax javascript
1 Answers

I tried and it works :D

history.replaceState($('body').html(), null) // store the first body html

q       = $('#form input[name=q]').val(),
srchtype= $('#filter input[name=srchtype]:checked').val(),
sortBy  = $('#filter select#sortBy').val(),
parameters = "q="+qVal+"&srchType="+srchType+"&sortBy="+sortBy;

$.ajax({
    type: "POST",
    url: url,
    data: parameters
}).done(data => {
    // Javascript Code

    history.pushState($('body').html(), null, '?'+parameters); // store the next body html and url
});
user_72731220
Related