Tree Vai JSON mysql

[DavidSimmonsParticipant]

I am trying to create an AJAX tree. My JSON data seems to match the examples but not working. Anyone have any suggestions what I am doing wrong

$(document).ready(function () {
var theme = getTheme();

var source =
{
datatype: “json”,
url: “EmployeeJSON.php”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
id: ‘id’
};

var dataAdapter = new $.jqx.dataAdapter(source);

dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme });
});

[DimitarParticipant]

Hello DavidSimmons,

You should add the property async with a value of false to source in order to make your operations synchronous:

var source =
{
datatype: “json”,
url: “EmployeeJSON.php”,
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: ‘id’,
async: false
};

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[DavidSimmonsParticipant]

Ok, here is the change with JSON source. Still not getting this to work.
$(document).ready(function () {
var theme = getTheme();

var source =
{
datatype: “json”,
url: “EmployeeJSON.php”,
datafields: [
{ name: ‘ID’ },
{ name: ‘ParentID’ },
{ name: ‘Text’ }
],
id: ‘id’,
async: false
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘ID’, ‘ParentID’, ‘items’, [{ name: ‘Text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme });
});

EmployeeJSON feed
[{“id”:”19″,”0″:”19″,”parentid”:”-1″,”1″:”-1″,”text”:”Alfredo Capuchino”,”2″:”Alfredo Capuchino”},
{“id”:”32″,”0″:”32″,”parentid”:”-1″,”1″:”-1″,”text”:”Jose Capuchino”,”2″:”Jose Capuchino”},
{“id”:”30″,”0″:”30″,”parentid”:”-1″,”1″:”-1″,”text”:”Demar Celaya”,”2″:”Demar Celaya”}]

However it will work like this;
$(document).ready(function () {
var theme = getTheme();
var data = [
{“id”:”19″,”0″:”19″,”parentid”:”-1″,”1″:”-1″,”text”:”Alfredo Capuchino”,”2″:”Alfredo Capuchino”},
{“id”:”32″,”0″:”32″,”parentid”:”-1″,”1″:”-1″,”text”:”Jose Capuchino”,”2″:”Jose Capuchino”},
{“id”:”30″,”0″:”30″,”parentid”:”-1″,”1″:”-1″,”text”:”Demar Celaya”,”2″:”Demar Celaya”}]
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ }
],
id: ‘id’,
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme });
});

[DimitarParticipant]

Hi DavidSimmons,

Please note that JavaScript is case-sensitive. Datafield names from the source and the feed should be the same (as you have done in your second example). Thus:

$(document).ready(function () {
var theme = getTheme();
var source =
{
datatype: “json”,
url: “EmployeeJSON.php”,
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: ‘id’,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: 'text', map: 'label'}]);
$(‘#jqxWidget’).jqxTree({ source: records, width: ’300px’, theme: theme });
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts