Topic: Dynamically updating a listbox
I'm trying to migrate a 3.x plugin to 4.x, largely by moving functionality from what had been an externally-loaded PHP script, into "pure TinyMCE" javascript.
My PHP script had a series of SELECT menus, and I used AJAX calls to dynamically update their contents.
The new version -- I'm basing it on the 4.x "link" plugin -- builds the series of ListBoxes using TinyMCE Control syntax:
moduleListCtrl = {
name: 'mmodule',
type: 'listbox',
label: 'Module',
values: buildmoduleList(),
onselect: moduleListChangeHandler
};
classListCtrl = {
name: 'mclass',
type: 'listbox',
label: 'Class',
values: buildclassList()
};
and those are passed into an editor.windowManager.open() call, where they are rendered into fancy TinyMCE controls by virtue of some magic I have not discovered yet (the means by which the "body" parameters are converted to HTML is not very well documents).
I have an AJAX call in the moduleListChangeHandler function, which I use to fetch a new list of values that are intended to REPLACE the values in the control built by classListCtrl.
So far, however, I haven't figured out how to get the new values into the existing rendered classListCtrl ListBox. Normally I'd handle such things with DOM manipulation, but the ListBox HTML is complicated, and it seems like there should be a more integrated way to do it.
Can anyone provide an example?
Do I replace the values of classListCtrl, and call repaint()? Do I get the parent container of classListCtrl and tell it to replace the entire classListCtrl with a "newClassListCtrl"? And then "reflow()"?
This seems like it should be easy, but hasn't been so far!