jqtree and JSON load from URL

Question

I want to load a JSON data from server in PHP in a jqTree . I have tried to use "data-url" like this :

$(function() {
$('#tree1').tree({
    //data: data,
    dataUrl: 'menu_content.ajax.php',
    autoOpen: true,
...

and the JSON gerated by menu_content.ajax.php is :

[
    {
        label: 'node1',
        children: [
            {
                label: 'child1'
            },
            {
                label: 'child2'
            }
        ]
    },
    {
        label: 'node2',
        children: [
            {
                label: 'child3'
            }
        ]
    }
]

When i put this JSON directly in the javascript code, it works, but it don't work with the PHP/JSON way. The example in the jqtree downloaded file use a mockjax more complicated as the manual said.

The reload function don't work too :

$('#tree1').tree('loadDataFromUrl', 'menu_content.ajax.php');

I have tried to use two different header in PHP :

header('Content-Type: text/html; charset=utf-8');
or
header('Content-Type: application/json');

But it don't work with and without.

It sure i am doing something wrong, but i don't see what.

We can see the application with JSON directly in javascript code here : http://naeco.free.fr/wfr/editionMenu/menuWilly_JSON-in-file.html and with php JSON here : http://naeco.free.fr/wfr/editionMenu/menuWilly.html

Firebug say all is OK : in Console, no error, and a the GET query give something ok.

thank's a lot for your answer.

Answer 1

The explanation is that the JSON was not valid.

Also it is important to note that the version :

var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ];

work when it is direct in javascript code, also without quote around the label, but don't work when it comes of PHP as loadURL parameter. For this, we need a well formed JSON as :

[
{
"label": "node1",
"children": [
{
"label": "child1"
},
{
"label": "child2"
}
]
},
{
"label": "node2",
"children": [
{
"label": "child3"
}
]
}
]