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":[]
}

「BAD 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 に答える