0

Maybe I am confused about the concept of history API. I try to create a URL like jakeandamir.com/?jake=insecure&amir=crazy#specificPart

I press a button and the jake=insecure added to the url normally via history.pushState.

I press another button and #specificPart is added to the url via location.hash =

Now if I press another button to add amir=crazy it gets added, but the #specificPart disappears.

I guess history API deletes it automatically (cause of the hash). But I want it, so the page scrolls down a specific part of the page like <a href="#specificPart">Here is a title of a cool article</a>.

So how can I do that? Hashes that denote page parts and historyAPI no longer work together? If so, is there another way to denote page parts in the url?

Or is there a hack , so the API and the hash get along?

Thanks in advance

UPDATE

the code

<button onClick="one();">one</button>
<button onClick="two();">two</button>
<button onClick="three();">three</button>

var finalqs;

function one(){
    addtothequerystring("c=1&d=2");
    history.pushState({page: "ajaxtwo"}, "ajaxtwo", finalqs);
}

function two(){
    addtothequerystring("e=1&f=2");
    history.pushState({page: "ajaxfour"}, "ajaxfour", finalqs);
}

function three(){
    addhastag("portion");
}

function addhastag(addthis){
    location.hash = addthis;
}

function addtothequerystring(addthis){
    if (finalqs.indexOf("?")===-1){
        finalqs+="?"+addthis;
    }
    else{
        finalqs+="&"+addthis;
    }           
}
slevin
  • 3,640
  • 16
  • 58
  • 106

1 Answers1

1

Whenever you call pushState, you need to make sure to preserve the hash:

window.history.pushState(null, "", url + window.location.hash);

Technically, the hash is just as much part of the url as anything else. When you call pushState you are overwriting the entire url (including the hash).

Update

function one(){
    addtothequerystring("c=1&d=2");
    history.pushState({page: "ajaxtwo"}, "ajaxtwo", finalqs + location.hash);
}

function two(){
    addtothequerystring("e=1&f=2");
    history.pushState({page: "ajaxfour"}, "ajaxfour", finalqs + location.hash);
}
JosiahDaniels
  • 2,262
  • 17
  • 32
  • Wait, I know `pushState` overwrites this is why my code is like `theUrl+="?"+someDataToAdd`. So `key/value` never gets overwritten, but hashes do for some reason. Check the update on the OP – slevin Aug 06 '15 at 14:38
  • So, I think you want `theUrl + "?" + someDataToAdd + window.location.hash`. Right? Maybe if I had a bit more code it would help. – JosiahDaniels Aug 06 '15 at 14:41
  • Yes, but if I try `theUrl + "?" + someDataToAdd + window.location.hash + someExtraDataToAdd`, `window.location.hash` disappears – slevin Aug 06 '15 at 14:45
  • Yes. I updated my answer. You have to do `theUrl + "?" + someDataToAdd + someExtraDataToAdd + window.location.hash`. – JosiahDaniels Aug 06 '15 at 14:54
  • Thanks, will check later, I am getting a headache right now, I will take a break. Hey, where did the link to the other question go? It looks like an interesting solution and maybe will be handy to another problem. Thanks – slevin Aug 06 '15 at 15:48
  • Sorry. I removed it to keep the answer a bit cleaner. Here it is: http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter – JosiahDaniels Aug 06 '15 at 15:50