无法弄清楚为什么jQuery UI 1.10在使用选项卡时既不支持ajaxSettings.error也不支持jqXHR.fail

我将jQuery UI库升级到1.10版本。根据文档，下面的代码假设可以工作，但事实并非如此。请告诉我，如果是我在某处做错了，或者他们新的jQuery UI库只是充满了bug。无法弄清楚为什么jQuery UI 1.10在使用选项卡时既不支持ajaxSettings.error也不支持jqXHR.fail

如果你想尝试下面的代码还活着，我成立了the test link.

的选项卡将拉动下面的JSON字符串：

对于 “GOOD的Json” 选项卡：

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

对于“ BAD Json“标签：

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

您会注意到，标签“JSON Good”加载得很好。 “JSON Bad”选项卡将不会加载，因为JSON格式不正确。在以前的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>

来源

2013-03-12 user2033934

从jQuery 1.9开始，jsonp请求不会触发错误处理程序。 – 2013-03-12 16:02:38

不知道它与JSONP有什么关系。我没有提到对其他域进行AJAX调用 – user2033934 2013-03-12 17:02:36

我做了基于jQuery UI的假设与错误回调没有任何关系发生，并且最近发生的唯一更改会改变您看到的功能是jQuery 1.9不再触发错误jsonp请求。 – 2013-03-12 17:21:19

我认为dataFilter（）函数应该被理解为解释 here:

A function to be used to handle the raw response data of XMLHttpRequest.This is a pre-filtering function to sanitize the response. You should return the sanitized data.

看来，这个函数中的代码是超越了阿贾克斯异常处理的范围，并抛出一个异常从控制台，而不是上：一看控制台显示：

Uncaught SyntaxError: Unexpected token b

其中有被你的代码行triggerd：

var jsonData = $.parseJSON(data);

我认为，当你摆脱你dataFilter功能，让jQuery的隐含处理JSON解析（当你的数据类型设置为“JSON”，这应该自动发生）那么Ajax异常处理（通过error（）/ fail（））将按预期工作。

来源

2013-03-12 18:16:58 marty

没有。之前尝试过这种情况。 jQuery不再承认它。在之前的版本中，筛选器在JSON验证之后应用。目前看来，JSON验证完全没有执行。 – user2033934 2013-03-12 18:40:04

对不起，澄清。如果您在制表符功能之外使用它，它会尊重它。但是，如果您尝试通过制表符功能传递参数，那么该流程不再有效。作为一个事实的变化，我从来没有能够产生任何类型的错误，将被捕获.fail回调。 – user2033934 2013-03-12 18:43:01

看看here。

$("#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-15 13:36:22 user1482297

不要对加载指示器使用'activate'事件，在动画完成后'activate'触发。 'beforeLoad'事件非常适合显示加载指示器。 – 2016-02-27 21:44:17

无法弄清楚为什么jQuery UI 1.10在使用选项卡时既不支持ajaxSettings.error也不支持jqXHR.fail

回答

相关问题