JQuery UI Tabs: JSON wird nicht angezeigt

Question

Ich benutze jquery ui tabs mit ajax.

Ajax wird auf einen JSON-Inhalt wie diesen stoßen.

[
  {
    "title"   :"eine Notiz",
    "type"    :"text",
    "content" :"MEINE ERSTE NOTIZ!"
  },
  {
    "title"   :"zwei Notiz",
    "type"    :"text",
    "content" :"MEINE ERSTE NOTIZ Wenn HTML funktioniert<\/b>, sollte ich darauf achten!"
  }
]

**

Ich verwende diesen Code:

$(function() {
    $("#tabs").tabs({
        cache : false,
        ajaxOptions : {
            cache : false,
            dataType : 'json',
            dataFilter : function(result) {
                var data = $.parseJSON(result);
                return data;
            },
            error : function(xhr, status, index, anchor) {
                $(" anchor.hash ").html("Dieser Tab konnte nicht geladen werden. Wir werden versuchen, das so schnell wie möglich zu beheben. " + "Wenn das kein Demo wäre.");
            }
        }
    });
});

(Ich habe diese Frage JSON-kodierten AJAX-Inhalt in jQuery UI-Tabs laden gesehen)

Die JSON-Datei (die von PHP generiert wird) wird korrekt geladen und ich habe sie mit JSONLint validiert, aber der Tab bleibt weiß und der Inhalt wird nicht geladen. Kannst du mir helfen?

Es ist das erste Mal, dass ich mit JSON und Ajax arbeite, also verzeih mir, wenn ich einen dummen Fehler mache.

BEARBEITEN: Der JSON-Inhalt wird mit einem Content-Type = application/json gesendet, wenn ich den Content-Type entferne, wird der JSON angezeigt, aber ich möchte die JSON-Datei mit jQuery parsen. Ist das möglich?

**

Answer 1

Ich denke, du solltest nicht $.parseJSON(result); aufrufen, da du dataType : 'json' angegeben hast (siehe meine Antwort auf diese Frage Warum ist 'jQuery.parseJSON' nicht notwendig?) und jQuery parse die Antwort für dich. Wenn du das Beispiel ansiehst, solltest du auch zurückgeben

       dataFilter : function(result) {
            var data = $.parseJSON(result);
            return data.content;
        },

EDIT - wenn dataType: 'json' gesetzt ist, sollte das in Ordnung sein

       dataFilter : function(result) {
            return result.content;
        },

Answer 2

Der Inhalt wird nicht ordnungsgemäß in den Tab geladen, weil dieser Teil fehlt:

dataType : 'json',
dataFilter : function(result) {
    var data = $.parseJSON(result);
    return data;
}

Sie erhalten Daten als json, also ist result ein Javascript-Objekt. Aber $.parseJSON() benötigt einen String, kein Objekt (siehe Dokumentation). Es funktioniert - wie Sie schreiben - wenn dataType : 'html' gesetzt ist, da mit dieser Einstellung die Daten als Text zurückgegeben werden.

Um das zu beheben, können Sie entweder dataType : 'html' setzen oder den dataFilter-Teil entfernen. Wenn Sie Daten im JSON-Format anfordern, ruft jQuery intern $.parseJSON() auf.

UPDATE: Eine weitere Information, warum Sie keine Fehler mit $.parseJSON() erhalten - Seit jQuery 1.4 wird die Anfrage in der Regel stillschweigend fehlschlagen, wenn die JSON-Datei einen Syntaxfehler enthält siehe auch die Dokumentation

Answer 3

Ich fand es einfacher, false an den beforeLoad Handler zurückzugeben und eine getJSON-Anforderung innerhalb des beforeLoad Handlers zu senden. Siehe meine Antwort hier.