1

我将 jQuery UI 库升级到 1.10 版本。根据文档，下面的代码假设可以工作，但事实并非如此。请告诉我是否是我在某处犯了错误，或者他们的新 jQuery UI 库只是充满了错误。

如果您想实时尝试下面的代码，我设置了测试链接。

这些选项卡将提取以下 JSON 字符串：

对于“GOOD Json”选项卡：

{
 "html":"This is HTML text from good Json",
 "msgWarning":"This is message text from good Json",
 "msgSuccess":"","misc":[]
}

对于“坏 Json”选项卡：

{
 "html":"This is HTML text from bad Json",
 "msgWarning":"This is message text from bad Json",
 "msgSuccess":"","misc":[]
}blablabla

您会注意到“JSON Good”选项卡加载得很好。由于 JSON 格式错误，“JSON Bad”选项卡将永远不会加载。在以前的 jQuery UI 版本中，我使用 ERROR 设置来捕获此类错误。但是无论我尝试什么，新代码都不会触发这个错误。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>

<body style="padding: 10px 10px 10px 10px;" >

<script type="text/javascript">
    function myprofileShow()
    {
        $("#tabs-myProfile").show();
        $("#tabs-myProfile").tabs();
        $('<li><a href="http://cl-t029-082cl.privatedns.com/public/json-good.html">JSON Good</a></li>').appendTo("#tabs-myProfile .ui-tabs-nav");
        $('<li><a href="http://cl-t029-082cl.privatedns.com/public/json-bad.html">JSON BAD</a></li>').appendTo("#tabs-myProfile .ui-tabs-nav");
        $("#tabs-myProfile").tabs("refresh");
        $("#tabs-myProfile").tabs('destroy');

        $("#tabs-myProfile").tabs({
            beforeLoad: function( event, ui ) {
                ui.panel.html('working...');

                ui.ajaxSettings.dataType = "json";

                ui.ajaxSettings.dataFilter = function(data) {
                    var jsonData = $.parseJSON(data);
                    return  jsonData.msgWarning + jsonData.html;
                };

                ui.jqXHR.done(function(data, textStatus, jqXHR) {
                    //do nothing
                });

               ui.ajaxSettings.error = function(jqXHR, textStatus) {
                    ui.panel.html('<b>Something went wrong test 1</b>');
                };

                ui.jqXHR.error(function() {
                    ui.panel.html('<b>Something went wrong test 2</b>');
                });

                ui.jqXHR.fail(function(jqXHR) {
                    ui.panel.html('<b>Something went wrong test 3</b>');
                });
            }
        });

        $("#tabs-myProfile").tabs({selected: 1});
    }
</script>

<div id="tabs-myProfile" style="display: none;">
    <ul>
    </ul>
</div>

<div>
    <script type="text/javascript">
    myprofileShow();
    </script>
</div>

</body>
</html>
4

2 回答 2

1

我认为dataFilter()函数应该理解为 这里解释的：

用于处理 XMLHttpRequest 的原始响应数据的函数。这是一个预过滤函数，用于清理响应。您应该返回经过清理的数据。

似乎此函数中的代码超出了 Ajax 异常处理的范围，而是在控制台上抛出异常：查看控制台显示：

未捕获的 SyntaxError：意外的令牌 b

这是由您的代码行触发的：

var jsonData = $.parseJSON(data);

我假设当您摆脱 dataFilter 函数并让 jQuery隐式处理 JSON 解析（当您的 dataType 设置为 'json' 时应该自动发生）然后 Ajax 异常处理（通过 error() / fail() ）将按预期工作。

于 2013-03-12T18:16:58.033 回答
0

看这里。

$("#MainContent_contentArea").tabs({
activate: function (event, ui) {
    if (ui.newPanel.is(':empty')) {
        ui.newPanel.append("<div class='tab-loading'>...Loading...<br /><img src='Images/ajax-loader.gif' /></div>");
    };
}
, show: {
    efect: 'slideDown',
    duration: 500
}
, beforeLoad: function (event, ui) {
    alert('beforeLoad');
    ui.ajaxSettings.accepts = { json: "application/json, text/javascript" };
    ui.ajaxSettings.contentType = "application/json; charset=utf-8";
    ui.ajaxSettings.type = "POST";
    ui.ajaxSettings.dataTypes[0] = "json";

    ui.jqXHR.setRequestHeader("Content-Type", ui.ajaxSettings.contentType);

    ui.jqXHR.error(function (data) { alert('error'); alert(data.status + ' - ' + data.statusText) });
    ui.jqXHR.success(function (data) { alert('success'); alert(data) });
}

});

于 2013-09-15T13:36:22.680 回答