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.
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
});