IE Compatibility Issue Dynamic Loading Jquery Ajax

Question

I am generating Dynamic Vertical Menu using Jquery Ajax.

The Code is working fine with Chrome, Firefox but it is not loading using IE. I am new to web development and Browser compatibility issues of IE.

The Demo Link is at pumpit.in See the loader in the left menu. It is not appearing in IE. If you reload the Link, it may come.

The js code used is :

$.ajax({

    type: "POST",
    url: "Index.aspx/wmCommSubComm",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    cache: false,
    beforeSend: function () {
        // this is where we append a loading image
        $('#container_leftns').html('<img src="/images/loading123.gif" alt="Loading..." />');
        //return false;
    },
    success: function (msg) {
        //retData = msg.d;
        $('#container_leftns').html(msg.d);
        return false;
    },
    error: function () {
        // failed request; give feedback to user
        //$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
    }
});

If anybody could guide me it would be very helpful.

Answer 1

After reading the result from your ajax call, you are returning some HTML5 elements such as "section". It works nicely in Firefox/Chrome and IE9. However, HTML5 tags are not supported for the version that less than IE9. They cannot recognize HTML5 tags. Please note that not all HTML5 are supported in IE9. Ref: HTML5 tags in IE9

For the version less then IE9, you can help them to recognize the HTML5 tags by including javascript fix html5shim / from github html5shiv.
-OR-
Change change the HTML5 tags to div instead.

Regarding to fix the loading image, I think we would do this work around.

HTML - Preload the loading image to the container and display it

<div id="container_leftns_loading" class="container_leftns">
    <img src="http://pumpit.in/images/loading123.gif" alt="Loading..." />
</div>
<div id="container_leftns"></div>

JavaScript

$.ajax({
    type: "POST",
    url: "Index.aspx/wmCommSubComm",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    cache: false,
    beforeSend: function () {
        // use show instead and clear the leftns container
        $('#container_leftns_loading').show();
        $('#container_leftns').html('');
        //return false;
    },
    success: function (msg) {
        // hide the loading image when success
        $('#container_leftns_loading').hide();
        $('#container_leftns').html(msg.d);
        return false;
    },
    error: function () {
        // failed request; give feedback to user
        //$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
    }
});