Dynamic content in Accordion

Discontinued products DHTMLX Touch
#1

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

#2

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

#3

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”);
}

#4

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

#5

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.

#6

Thanks Alexandra I will give that a try.

Regards,

Daryl