IE兼容性问题动态加载Jquery Ajax

时间:2013-02-26 07:26:16

标签: javascript jquery internet-explorer browser compatibility

我正在使用Jquery Ajax生成动态垂直菜单。

该代码适用于Chrome,Firefox但未使用IE加载。我不熟悉IE的Web开发和浏览器兼容性问题。

演示链接位于pumpit.in 请参阅左侧菜单中的加载程序。它没有出现在IE中。如果您重新加载链接,它可能会来。

使用的js代码是:

$.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>');
    }
});

如果有人可以指导我,那将非常有帮助。

1 个答案:

答案 0 :(得分:0)

从ajax调用中读取结果后,您将返回一些HTML5元素,例如“section”。它在Firefox / Chrome和IE9中运行良好。但是,小于IE9的版本不支持HTML5标记。他们无法识别HTML5标签。请注意,IE9并不支持所有HTML5。参考:HTML5 tags in IE9

对于少于IE9的版本,您可以通过在github html5shim中添加javascript fix html5shiv /来帮助他们识别HTML5代码。
- 或 -
更改将HTML5标记更改为div。


关于修复加载图像,我想我们会做这个工作。

HTML - 将加载图像预加载到容器并显示

<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>');
    }
});