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
– Suave Nti, Commented Feb 4, 2012 at 13:15

Community · Accepted Answer · 2017-05-23 12:27:29Z

5

+50

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Feb 4, 2012 at 13:31

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicola Peluchetti Over a year ago

@MatteoPagliazzi yes but you should let dataType: 'json' and just return result.content i added that to my answer

Nicola Peluchetti Over a year ago

@MatteoPagliazzi that's strange, anyway the important thing is that it works

BartekR · Accepted Answer · 2012-02-08 10:46:42Z

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

Community · Accepted Answer · 2017-05-23 12:27:02Z

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, 2017 at 12:27

CommunityBot

11 silver badge

answered Feb 5, 2013 at 15:08

DavidHyogo

2,9064 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery UI Tabs: JSON not displaying

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related