Multiple ajax select dropdowns on editor

Hello,

I am trying to implement 2 select boxes in the editor, where the values in the second select box are generated based on the value chosen in the first select box. All values will be stored and in the MySql database, also I am using the php connector.

Would this be possible if I created a new custom section in the editor for the select boxes and basically put in the ajax calls to generate the values in the second select box? Or is there a better way to be doing this?

Thanks for such a great product!

Yep, creating custom form section will be the best solution.

If you have not so many options list, you may consider adding all of them to the form and showing the necessary one.
viewtopic.php?f=6&t=13411

Also, you can put the dhtmlxcombo in the form block ( there is no built in block with such functionality but its pretty easy to add one ), combo has API to load data from server side connectors, so it can be used to simplify ajax data loading.

Thanks for the info. Integrating the dhtmlxCombo sounds really good.

Should it just be a matter of putting the div tag in the form block render and then init the combo box?
I tried the below code, but it doesn’t show up. If I place the div tags for the combo box anywhere on the main html page it works.

scheduler.config.lightbox.sections = [	
{name:"description", height:60, type:"comboselect", map_to:"combo_zone", focus:true},];
scheduler.form_blocks["comboselect"]={
render:function(sns){
var html="<div class='dhx_cal_ltext' style='height:30';'></div><div id='combo_zone'></div>";
return html;
var combo = new dhtmlXCombo("combo_zone", "combo_name", 200);
combo.enableFilteringMode(true);
combo.loadXML("1.xml")

a) define some default height for combo container
b) move combo init in set_value method of form block

[code] scheduler.form_blocks[“comboselect”]={
render:function(sns){
var html="

";
return html;
},
set_value:function(){
var combo = new dhtmlXCombo(“combo_zone”, “combo_name”, 200);
combo.enableFilteringMode(true);
combo.loadXML(“1.xml”)
		},[/code]

Thank you very much for your help. Works perfectly - I just had to add a function to remove the combo box when the lightbox is closed, otherwise it creates multiples.

Can be done as

set_value:function(){ if (!this._combo_init){ var combo = new dhtmlXCombo("combo_zone", "combo_name", 200); combo.enableFilteringMode(true); combo.loadXML("1.xml") this._combo_init = true; }

That is a much cleaner way, cheers.

A strange thing that is happening is the dropdown menu for the combo box appears to be displaying behind the rest of lightbox. The actual combo box itself is ok, I can see it and manually type the option into it, just cant see the dropdown menu part. If I make the height of the lightbox fairly short I can see the dropdown menu appear below the lightbox. Any ideas what could be causing this?

Thanks

Try to add the next style

.dhx_combo_list{
z-index:10200;
}

it must fix the issue.

hi!
may you post full code of metods for scheduler.form_blocks[“comboselect”] ?

thanks!

As per usual, that worked perfectly. Thanks!

vipp - sorry for the delay. I have posted my code at the bottom, hope it may help.

My ‘get_value’ function is quite ugly though. I have managed to retrieve the values from each of the combos individually by accessing their DOM object value. However I am not sure how to get scheduler to add this to the event in the database (MySQL with PHP connector). Is it possible to map multiple return values from a form block? Or is there a different function I can call to update particular values?

I am thinking of setting an event listener on the lightbox save button calling a function which does something along the lines of:

scheduler.getEvent("someId").CustomField = document.getElementById(id).nextSibling.firstChild.value; scheduler.updateEvent("someId");

Am I thinking in the right direction here?

Code for combo_select editor:

[code] scheduler.form_blocks[“combo_select”]={
render:function(sns){
var html="

";
return html;
},
	set_value:function(node,value,ev){	
	if (!this._node_init){

		node.combo1 = new dhtmlXCombo("c1", "c1", 150);
		node.combo1.loadXML("combo/01.php");
		node.combo2 = new dhtmlXCombo("c2", "c2", 150);
		node.combo1.attachChildCombo(node.combo2, "combo/02.php");
		node.combo3 = new dhtmlXCombo("c3", "c3", 150);
		node.combo2.attachChildCombo(node.combo3, "combo/03.php");
		
		this._node_init = true;
		}
	},
	
	get_value:function(node,ev){
		var a = node.combo1.getComboText();
		var b = node.combo2.getComboText();
		var c = node.combo3.getComboText();
			return a+b+c;
	},

}[/code]

If you have on server side

render_table(some, id, "start,end,text,combo1,combo2,combo3);

You can use on client side

get_value:function(node,ev){ var a = ev.combo1 = node.combo1.getComboText(); ev.combo2 = node.combo2.getComboText(); ev.combo3 = node.combo3.getComboText(); return a; }

properties of event will be send to the server side, and save to DB if they mentioned in list of fields.