jQuery UI Tabs: JSON not displaying

Question

I'm using jquery ui tabs with ajax.

Ajax will face a JSON content like this.

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

I'm using this 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.");
            }
        }
    });
});

(i've seen this question Loading JSON-encoded AJAX content into jQuery UI tabs)

The JSON file (is generated by php) is correctly loaded and I have validated it using JSONLint but the tab remain white and the content isn't loaded, can you help me?

It's the first time that i work with JSON and Ajax so forgive me if I'm doing some stupid error

EDIT: the json content is sent with a content type = application/json, removing the content type it display the json but i want to parse the json file using jquery is that possible?

Answer 1

I think you should not call $.parseJSON(result); since you specified dataType : 'json' (look at my answer to this question Why is 'jQuery.parseJSON' not necessary? ) and so jQuery parses the response for you. Looking at the other example you should also return

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

EDIT - letting dataType: 'json' this should be ok

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