json via php request

[ScottNLMember]

Hallo,

I am new to this forum and i am running into a bit of trouble with the menu. I hope you guys can help.

for some reason

php source

[{"id":"1","parentid":"-1","text":"Main"},{"id":"2","parentid":"-1","text":"Sales"},{"id":"3","parentid":"-1","text":"Purchase"},{"id":"4","parentid":"-1","text":"Items"},{"id":"5","parentid":"-1","text":"Relations"},{"id":"6","parentid":"-1","text":"Finance"},{"id":"7","parentid":"-1","text":"Settings"}]



var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
url: 'ajax/menu.php'
};

this does not work.

this however this does:


$.getJSON('ajax/menu.php', function(respons) {
var data = respons;

// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
localdata: data
};


i want to use the jqx functionality and not via getJSON.

Been busy for about 1 hour now trying to solve what’s probably very simple.

Any ideas?

another thing which i cannot figure out is how to apply a href to json menu.

i have added url but have failed to apply this to structure.

Hope you guys can help me with this great library.

[Peter StoevKeymaster]

Hi ScottNL,

The issue here is that the first code makes ‘async’ ajax request and when you build the hierarchy, the dataAdapter may still not be loaded with data and the data may still not be downloaded from your server.

var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

The second code is performed when the data is downloaded. The solution here is to set the ‘async’ parameter of the source object to false.

source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' }
],
id: 'id',
async: false,
url: 'ajax/menu.php'
};

To apply links to the items, you can take a look at the code below. The code maps the ‘html’ property instead of the ‘label’ property to the data source’s ‘text’.

var data = [
{
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1",
    "subMenuWidth": '250px'
}, {
    "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
}, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
}, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
}, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
}, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1",
    "subMenuWidth": '200px'
}, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
}, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
}, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
}, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
}, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
}, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1",
    "subMenuWidth": '250px'
}, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
}, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
}, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
}, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
}, {
    "id": "14",
    "text": "<a href='http://jqwidgets.com'>www.jqwidgets.com</a>",
    "parentid": "12"
}]
// prepare the data
var source =
{
    datatype: "json",
    datafields: [
        { name: 'id' },
        { name: 'parentid' },
        { name: 'text' },
        { name: 'subMenuWidth' }
    ],
    id: 'id',
    localdata: data
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
// get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
// the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
// specifies the mapping between the 'text' and 'label' fields.  
var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'html'}]);
$('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ScottNLMember]

Cheers Peter,

you have just solved all my problems!

[Author]

Posts