Solution 1 :

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

Solution 2 :

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

Problem :

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.

Comments

Comment posted by Shreyansh Kashyap

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

Comment posted by Shreyansh Kashyap

Tried, not working. As I said it’s the above line causing the issue.

Comment posted by Shreyansh Kashyap

I have edited the question above, please watch out.

By

Leave a Reply

Your email address will not be published. Required fields are marked *