Onglets jQuery UI : JSON ne s'affiche pas

Question

J'utilise jquery ui tabs avec ajax.

Ajax sera confronté à un contenu JSON comme celui-ci.

[
  {
    "title"   :"a note",
    "type"    :"text",
    "content" :"MY FIRST NOTE!"
  },
  {
    "title"   :"two note",
    "type"    :"text",
    "content" :"MY FIRST NOTE <b>if html works<\/b> i should pay attention to this!"
  }
]

J'utilise ce 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("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
            }
        }
    });
});

(j'ai déjà vu cette question Chargement de contenu AJAX codé en JSON dans des onglets jQuery UI )

Le fichier JSON (généré par php) est correctement chargé et je l'ai validé en utilisant JSONLint mais l'onglet reste blanc et le contenu n'est pas chargé, pouvez-vous m'aider ?

C'est la première fois que je travaille avec JSON et Ajax, alors pardonnez-moi si je fais une erreur stupide.

EDIT : le contenu json est envoyé avec un type de contenu = application/json, en supprimant le type de contenu il affiche le json mais je veux analyser le fichier json en utilisant jquery, est-ce possible ?

Answer 1

Je pense que vous ne devriez pas appeler $.parseJSON(result); puisque vous avez spécifié dataType : 'json' (voir ma réponse à cette question Pourquoi la fonction "jQuery.parseJSON" n'est-elle pas nécessaire ? ) et ainsi jQuery analyse la réponse pour vous. En regardant l'autre exemple, vous devriez également renvoyer

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

EDIT - laisser dataType: 'json' cela devrait être correct

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

Answer 2

Le contenu n'est pas correctement chargé dans l'onglet à cause de cette partie :

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

Vous recevez les données sous forme de json, donc result est un objet javascript. Mais $.parseJSON() requiert une chaîne de caractères, pas un objet ( voir docs ). Cela fonctionne - comme vous l'écrivez - lorsque dataType : 'html' car avec ce paramètre, les données sont renvoyées sous forme de texte.

Pour le corriger, vous pouvez soit définir dataType : 'html' ou se débarrasser de dataFilter partie. Lorsque vous demandez des données au format json, jQuery appelle $.parseJSON() en interne.

UPDATE : Une information supplémentaire pour expliquer pourquoi vous n'obtenez aucune erreur avec $.parseJSON() - Depuis la version 1.4 de jQuery, si le fichier JSON contient une erreur de syntaxe, la requête échoue généralement en silence. voir aussi les docs

Answer 3

J'ai trouvé plus simple de retourner false à la beforeLoad et envoyer un getJSON à partir de l'application beforeLoad manipulateur. Voir ma réponse aquí .