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?

Have you tried using : return data.content instead of return data — Suave Nti, Feb 04 '12 at 13:15

score 5 · Accepted Answer · edited May 23 '17 at 12:27

5

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;
        },

edited May 23 '17 at 12:27

Community

1
1

answered Feb 04 '12 at 13:31

Nicola Peluchetti

76,206
31
145
192

@MatteoPagliazzi yes but you should let `dataType: 'json'` and just `return result.content` i added that to my answer – Nicola Peluchetti Feb 04 '12 at 13:43
@MatteoPagliazzi that's strange, anyway the important thing is that it works – Nicola Peluchetti Feb 04 '12 at 14:35

BartekR · Answer 2 · 2012-02-08T10:46:42.143

The content isn't properly loaded to the tab because of this part:

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

You receive data as json, so result is javascript object. But $.parseJSON() requires string, not object (see docs). It works - as you write - when dataType : 'html' because with this setting data is returned as text.

To fix it you can either set dataType : 'html' or get rid of dataFilter part. When you ask for data in json format jQuery calls $.parseJSON() internally.

UPDATE: One more information why you don't get any errors with $.parseJSON() - As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently see docs too

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

I found it simpler to return false to the beforeLoad handler and send a getJSON request from within the beforeLoad handler. See my answer here.

edited May 23 '17 at 12:27

Community

1
1

answered Feb 05 '13 at 15:08

DavidHyogo

2,838
4
31
48

jQuery UI Tabs: JSON not displaying

3 Answers3