Try
window.location.hash = '';
instead of using
window.history.back();
if you want to remove hash from the URL. It will also trigger window.onhashchange
Try
window.location.hash = '';
instead of using
window.history.back();
if you want to remove hash from the URL. It will also trigger window.onhashchange
Your code isn’t updating the history when it sets the hash, so history.back()
reverts to the earlier URL state.
This will update the hash and the history:
function addHash (hashString) {
let myHash = '#' + hashString;
location.hash = myHash;
history.replaceState(null, null, myHash);
}
I have the following jQuery code which closes bootstrap modal on click of back button. It’s working fine. However, when it closes the modal it should remove the the #my-modal-id
from the URL bar, which it does. But, while doing that it also removes the additional “required” parameters from the URL. For example:
It works fine when the URL is: http://localhost/gamearena/index.php#my-modal-id
. Here it removes #my-modal-id
from the URL bar as per the script. So far so good.
However, it messes up when the URL has additional parameters like
http://localhost/gamearena/index.php?ref=shreyansh#sidebar-left
. Here, it even removes ?ref=shreyansh
along with it. How do I control it so that it only removes the modal id set by itself earlier.
Here is the code:
// Close model on clicking back button / swiping back
$('div.modal').on('show.bs.modal', function() {
var modal = this;
var hash = modal.id;
window.location.hash = hash;
window.onhashchange = function() {
if (!location.hash){
$(modal).modal('hide');
}
}
});
$('div.modal').on('hidden.bs.modal', function() {
var hash = this.id;
history.replaceState('', document.title, window.location.pathname);
});
// when close button clicked simulate back
$('div.modal button.close').on('click', function(){
window.history.back();
})
// when esc pressed when modal open simulate back
$('div.modal').keyup(function(e) {
if (e.keyCode == 27){
window.history.back();
}
});
EDIT
After diagnosing a little I found out that the line history.replaceState('', document.title, window.location.pathname);
is responsible for changing the content of the URL here, i.e., removing the hash and other parameters. Further, I noticed that window.location.pathname
grabs the URL only upto the index.php
and not the parameters beyond it. Hence, in my opinion the function reverts back the URL to the state index.php
instead of index.php?ref=shreyansh
as it cannot recognize it. Therefore, I come to a conclusion that if window.location.pathname
is replaced by a function which has the ability to fetch the URL up to index.php?ref=shreyansh
(the location before adding the hash part), the problem will be solved. Hence, experts are requested to throw some light on this.
I will try.. Give me a minute. However, in the meantime I want to mention that when I tried commenting block of codes from bottom I found out that it’s
Tried, not working. As I said it’s the above line causing the issue.
I have edited the question above, please watch out.