Dynamic content in Accordion

Hello Folks,

I am very new to dhtmlx touch and am still trying to find my way around. I need to be fill some accordion cells with content returned from a url by the server. This is the content I have tried unsuccessfully:

{ id: ‘app’, view: ‘layout’, height: 482, width: 322,
rows: [
{ view: ‘layout’, type: ‘wide’,
rows: [
{ view: ‘accordion’, id: ‘accordion_2’,
rows: [
{ header: ‘Panel’, headerAlt: ‘panel (closed)’,click:“loadPage()”
body: { view: ‘view’, id: ‘temp_designer_view_5’}, id: ‘accordion_body_cell_2’
},
{ header: ‘Panel’, headerAlt: ‘panel (closed)’,
body: { view: ‘view’, id: ‘temp_designer_view_6’}, id: ‘accordion_body_cell_3’
}
]
}
], id: ‘layout_2’
}
]
}

function loadView() {
$$(“about”).define(“src”, “http://host/script?query=string”);
}

I have reviewed the online documentation and the samples included with dhtmlx touch unsuccessfully. Any help would be greatly appreciated.

Thanks,

Daryl

Correction to the above loadView() function, s/b:

function loadView() {
$$(“accordion_body_cell_2”).define(“src”, “http://host/script?query=string”);
}

my error was due to the cut/paste to simplify the code example, and I’m actually not sure if the “accordion_body_cell_2” id is the right id to use given the above dhx.ui definition. Any help would be much appreciated.

Thanks,

Daryl

Hello Daryl,

accordion_body_cell_2 is an id of accordion item, not its body where you want to load content. Also the view shoud be “template”, as only this view has “src” property:

{
header: ‘Panel’,
headerAlt: ‘panel (closed)’,
click:“loadPage()”
body: {
view: ‘template’,
id: ‘temp_designer_view_5’
},
id: ‘accordion_body_cell_2’
},

function loadView() {
$$(“temp_designer_view_5”).define(“src”, “http://host/script?query=string”);
}

Hello Alexandra, Thanks for your reply. I tried your suggestion, but am still not having any luck, as the click parameter does not fire. I placed the click: “loadPage()” in the section immediately preceding the body and right after the header and headerAlt paramters, so the actual code now looks like this:

{ header: 'Logs', headerAlt: 'Logs', click: 'loadPage()', body: { view: 'template', id: 'log_body' }, id: 'logs_cell' },

I have however been able to attach a click event to the “log_cell” item and that does respond to a click,
and I can get xml output from the server, but when I try the same thing with the server responding with just some plain text, it does not work, although I can see the request in the apache logs.

So I was wondering if you had any ideas as to why the click: “loadPage()” does not work, and if there is also some way to capture the data returned by the server so that it can be massaged before displaying it.

Thanks again,

Daryl

Hello,

Click property can be set for buttons. If you want to call a function of cell collapse/expand, you can try to set onAfterExpand/ onAfterExpand event for accordion:

$$(“accordion1”).attachEvent(“onAfterExpand”,function(){
// your code here
});

You can also check a ready demo dhtmlxTouch_v12_120913/samples/09_template/02_ajax_content.html that shows how to load text content on button click.

Thanks Alexandra I will give that a try.

Regards,

Daryl