0

I am using jQueryUI Auto-complete on my site along with it is the window.history.pushState which changes the browser-url without refreshing the page. It perfectly works on Chrome and Mozilla but unfortunately it does not work the way I wanted it to work on Internet Explorer 9. Here's the situation, using jQueryUI Auto-complete I can search for regions, counties and zips thru the <input /> tag on my page. Then if I clicked any of the suggested results of the auto-complete, using window.history.pushState the browser-url changes to from www.example.com/sites to www.example.com/sites/selected_region without refreshing the page. Now as what I have said, it works on Chrome and Mozilla but it fails on IE9, because what happens is that when I clicked any of the suggested results of the jQueryUI Auto-complete, it neither changes the browser-url nor closes the list of suggestions. It definitely does not support window.histoty.pushState. So I searched and found a solution that might worked using history.js. I just followed the instructions to upload it on my server and include the history.js files but it turns out it conflicts with my other .js files being used. How would I fix this? Thanks in advance.

PS: Here's how I use window.history.pushState

$( "#find" ).autocomplete({
minLength: 1,
source: function(request, response) {
            var results = $.ui.autocomplete.filter(locations, request.term);
            response(results.slice(0, 10));
        },
focus: function( event, ui ) {
    $( "#find" ).val( ui.item.value );
    return false;
},
appendTo: "#results",
open: function(){
    var position = $("#results").position(),
                    left = position.left, top = position.top;

            $("#results > ul").css({left: (left + 15) + "px",
                                                    top: (top + 30) + "px", width: (206) + "px" });
},

select: function( event, ui ) {
    $( "#find" ).val( ui.item.value );
    $(":header.title").html(ui.item.value);

    var base = '/stats/';
    var url = base + ui.item.href;
    var label_name = ui.item.value;
    document.title = "Statistics for " + label_name + "| ASI";
    window.history.pushState({"url":url}, document.title, url);
    return false;
}
});

Please feel free to correct me in any way possible. Cheers.

Tsukimoto Mitsumasa
  • 973
  • 4
  • 17
  • 38
  • 1
    can you post the conflict you get? you should use `History.pushState()` function instead of `window.history.pushState()` if you are using History.js plugin – Eru Sep 19 '12 at 15:37
  • 1
    @Eru, does `History.pushState()` works just the same as `window.history.pushState()` ? Or what will be the fix if I will go back to what I have previously used, just using `window.history.pushState()` and exclude using `history.js`, what will be my fix to make it work on `IE9` ? – Tsukimoto Mitsumasa Sep 19 '12 at 15:41
  • IE does not support html5 history api. You have to use `history.js` plugin or similar to support it. It works very similar. – Eru Sep 19 '12 at 18:58

0 Answers0