Need more Info

[toddca]

My site will support IE8+, and all other modern browsers. I am not passing any additional command line parameters to the script as I am using it. Given that I have a couple of questions.

1. Do I need this library for older, non-HTML 5 browsers only or should I load it for all browsers?
2. I have tested on FF and Chrome and it seems to work however for IE8 it does not. I loaded the history.iegte8.js instead of the history.js but I still get errors. Basically it is reporting the history.pushState is not a property or method. There is no documentation but I suspect I only need to load the history.iegte8.js and not both the history.iegte8.js and history.js.

[devote]

Hi,

Do I need this library for older, non-HTML 5 browsers only or should I load it for all browsers?

Libraries are recommended for all browsers

2

Just load only history.iegte8.js

---

Basically it is reporting the history.pushState is not a property or method.

Can you give an example of what you do?

Thanks

[toddca]

The problem I am having now is that on IE 8 and greater I have to use: History.pushState(null, null, this.href); and have issues but on other browsers like FF, Chrome, and IE9 I use history.pushState(null, null, this.href); and it works great.

1. Why do I need to use different casing of History vs history here?

2. I cannot get IE8 and greater to work using this bit of code below.

    <![if !IE]><h1>Not IE</h1><script src="~/Scripts/history.js"></script><![endif]>
   
    <script type="text/javascript">
   
        var drax = window.drax || (function ($) {
   
            var that = {};
   
            //callback from from ajax post
            that.formPostSuccess = function (data, status, xhr) {
                if (xhr.status === 200) {
                    var redirectHeader = xhr.getResponseHeader("drax-location");
                    if (redirectHeader && redirectHeader != "") {
   
                        var hist = history ? history : History;
   
                        hist.pushState(null, null, redirectHeader);
                    }
                }
                return that;
            };
   
            return that;
   
        })(window.jQuery);
   
        $(function () {
   
            //used to refresh the page content after being loaded into DOM
            $("#page-content").on("click", "a", function () {
   
                var hist = history.pushState ? history : History;
                hist.pushState(null, null, this.href);
   
                $.ajax({
                    url: this.href,
                    success: function (data, status, xhr) {
                        $("#page-content").html(data);
                    }
                });
   
                return false;
            });
   
            // looking for all the links and hang on the event, all references in this document
            $("a").click(function () {
   
                var hist = history.pushState ? history : History;
                hist.pushState(null, null, this.href);
   
                $.ajax({
                    url: this.href,
                    success: function (data, status, xhr) {
                        $("#page-content").html(data);
                    }
                });
   
                return false;
            });
   
            // hang on popstate event triggered by pressing back/forward in browser
            $(window).bind("popstate", function (e) {
   
                var returnLocation = history.pushState ? history.location : History.location || document.location;
   
                $.ajax({
                    url: returnLocation.href,
                    success: function (data, status, xhr) {
                        $("#page-content").html(data);
                    }
                });
            });
        });
    </script>

[devote]

you just not plug the script in these conditional comment:

<![if !IE]><h1>Not IE</h1><script src="~/Scripts/history.js"></script><![endif]>

You need to make a script outside the conditional comment:

<![if !IE]><h1>Not IE</h1><![endif]>
<script src="~/Scripts/history.js"></script>

[devote]

The problem I am having now is that on IE 8 and greater I have to use: History.pushState(null, null, this.href);

Why do you use two libraries?

[devote]

Why do I need to use different casing of History vs history here?

You should not do this, you need only 'history'

[toddca]

Here is the conditional I was using - that was a copy paste issue:

    <!--[if gte IE 8]><h1>GTE IE 8</h1><script src="~/Scripts/history.iegte8.js"></script><![endif]-->
    <![if !IE]><h1>Not IE</h1><script src="~/Scripts/history.js"></script><![endif]>

1. So do I need to use a conditional or will loading history.js load history.iegte8.js if needed?
2. I am using History because when I run the code on IE 8 and above I get an error that the history.pushState method does not exist.

[devote]

Why do you use two scripts?

Only one script named history.js it also has support for all browsers, including IE

[toddca]

OK I am loading just history.js and everything works great on Chrome, FF, and IE9 however on IE8 I get this.

[devote]

This is very strange.

You are testing in IE9 in compatibility mode IE8 browser? Or yet in the full version of IE8?

You can see the same debugger is loaded history.js script to run. Perhaps the script was not loaded.

Can you give me the whole code listing, including HTML?

[toddca]

I am testing with IE8 - you can see for yourself here --> http://vs.azurewebsites.net/test/ Hitting the Continue link should take you to page1 and a "True" should be displayed indicating the request was made with AJAX, but it is showing False because of a javascript error

[toddca]

Also note I am not using IE8 compat

Here is my code - the formPostSucess is a helper that handles when I do a ajax form post and fixes up the history a bit since the post will handle a 302 and I need someway to handle the history - this however is not currently in effect as the issue reproduces on the index page.

    <script src="~/Scripts/history.js"></script>

    <script type="text/javascript">
        $(function () {

            // looking for all the links and hang on the event, all references in this document
            //$("a").live("click", function (e) {
            $("a").click(function () {

               // alert('a');

                // keep the link in the browser history
                history.pushState(null, null, this.href);

                //e.preventDefault();

                // here can cause data loading, etc.

                $.ajax({
                    url: this.href,
                    success: function (data, status, xhr) {
                        $("#page-content").html(data);
                    }
                });

                // do not give a default action
                return false;
            });

            // hang on popstate event triggered by pressing back/forward in browser
            $(window).bind("popstate", function (e) {

                // we get a normal Location object

                /*
                * Note, this is the only difference when using this library,
                * because the object document.location cannot be overriden,
                * so library the returns generated "location" object within
                * an object window.history, so get it out of "history.location".
                * For browsers supporting "history.pushState" get generated
                * object "location" with the usual "document.location".
                */
                var returnLocation = history.location || document.location;

                // here can cause data loading, etc.
                $.ajax({
                    url: returnLocation,
                    success: function (data, status, xhr) {
                        $("#page-content").html(data);
                    }
                });

                // just post
                //alert("We returned to the page with a link: " + returnLocation.href);
            });
        });

        var drax = window.drax || (function ($) {

            var that = {};

            //callback from from ajax post
            that.formPostSuccess = function (data, status, xhr) {
                if (xhr.status === 200) {
                    var redirectHeader = xhr.getResponseHeader("drax-location");
                    if (redirectHeader && redirectHeader != "") {
                        redirectHeader = redirectHeader.toLowerCase();
                        history.pushState(null, null, redirectHeader);
                    }
                }
                return that;
            };

            return that;

        })(window.jQuery);

    </script>

[toddca]

Sorry - also Full IE8 running on XP and compat mode is not turned on.

Looks like on > 8 this works: VBInc = (defineProp || defineGetter) && (!msie || msie > 8) ? 0 : 1,

and on < 8 you use an iFrame.

// If IE version 7 or lower to add iframe in DOM iframe = msie < 8 ? document.createElement('iframe') : False,

Given this how do you handle IE == 8?

[toddca]

[devote]

ок, the problem is very simple

You need to connect the library history.js before connect

<script src="/bundles/modernizr?v=qVODBytEBVVePTNtSFXgRX0NCEjh9U_Oj8ePaSiRcGg1"></script>

And all will be well

[devote]

I see everything working well now --> http://vs.azurewebsites.net/test/

[toddca]

YES!!! I made the change you suggested and disabled caching by sending no-cache header from browser and everything seems to be working great!

So just to be clear, I need to load history.js before any other script in my page?

[devote]

I need to load history.js before any other script in my page?

Yes