Search code examples
javascripthtmlhistory.jshtml5-history

History.js and url encoding

I have the below example of a URI that I am requesting on my local site in Firefox v15.0.1, I have removed the hostname for brevity.

/search?cat=ngb%26b

and some paging links are shown on the resulting page with href's like this

?p=2&cat=ngb%26b

that do the below history request on their click event which is using https://github.com/browserstate/History.js/ which uses HTML5 History for it's state changes from what I know of it.

History.getState().url;

the url History.getState().url is giving me the below, this is passed to an async function on the click event:

/search?cat=ngb&b&p=2

and the history is then adjusting the browsers URI to this

/search?cat=ngb&b=undefined&p=2

and my Async action is failing because the "cat" param is now incorrect.

I can't URL encode the entire result from getState().url because that would be incorrect.

Is there something I am missing that needs to be done when facing this sort of situation?

Any help would be appreciated. Thanks.

UPDATE: I am currently debugging this and looking at the object that the getState() function returns.. it has a "data" object property that has the correctly encoded params in it.

Potentially I could spin through and then add them on to the URL i pass to my function that makes an ajax request (instead of passing it the .url property) but this doesn't sound like a good idea when History is meant to handle hash url fallback for HTML4.

Solution

  • Answering my own question here.

    I had two issues here, 1 with History.js and another with using JQuery.param in an incorrect situation because that encodes anything you give it to make it valid for URL use.

    To fix some issues with the History.js plugin I found this useful branch https://github.com/hrunting/history.js/tree/encoded-uris which is still an open pull request but it helped me out a lot unfortunately it does require having to re-bundle the changed files and minify them if you need to.

    Once that was changed I also had an issue in the code with using $.param() to add the values in a state object that had been built up based on the values in the querystring. Obviously the "ng%26b" value was already encoded and param was encoding the % so it ends up as "ng%2526".

    Hope this might help someone in the future anyway.

    Thanks