Making section of lightbox always hidden

Scheduler Javascript
#1

How can I make a certain section of a lightbox form (like the one named “patient_ID”) always hidden?

Here is some of my code:

scheduler.config.lightbox.sections=[
										
		{name:"patient_ID", height:20, map_to:"patient_ID", type:"textarea"},
		{name:"description", height:130, map_to:"text", type:"textarea", focus:true},
		{name:"location", height:20, type:"select", map_to:"location", options:[
			{key:"", label:"None"},
			{key:"Area1", label:"Area1"},
			{key:"Area2", label:"Area2"}
			]},
		{name:"reason", height:20, type:"select", map_to:"reason", options:scheduler.serverList("reason")},
		{name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
		{name:"time", height:72, type:"time", map_to:"auto"}
		]

I have been trying to implement this, but it makes ALL sections that use a textarea hidden. I want just to hide certain sections like the section titled “Patient_ID”.

scheduler.form_blocks.textarea.set_value=function(node,value,ev){
        node.firstChild.value=value||"";
        var style = ev.some_property?"":"none";
        node.style.display=style; // editor area
        node.previousSibling.style.display=style; //section header
        scheduler.setLightboxSize(); //correct size of lightbox
 
    }
#2

always hidden?
Why do you need a hidden section at all?
Event property will be stored and used for all db operations even if it has not a section in lightbox, so you can just not include property in question in the lightbox at all.

#3

I want to pass a hidden URL value to my db. I am used to doing that with a hidden textbox inside a form.

#4

Not sure if this question was ever answered, but here is the solution I used:

scheduler.form_blocks.textarea.set_value=function(node,value,ev){
	var sns = this.config.lightbox.sections;	
	for (var i = 0; i < sns.length; i++) {
		if (sns[i].name == "description"){
			node.firstChild.value = "Task";
			alert(node.firstChild.value);
			var style = "none";
			node.style.display = style; // editor area
			node.previousSibling.style.display = style; //section header
			scheduler.setLightboxSize(); //force lightbox auto-sizing
		}
	}
}
#5

oops… you might want to take the alert line. :smiley:

#6

Nope, it was never answered. Thanks! I’ll try to implement this.

#7

The code I gave before works if you only have one textarea on your form. If you have more than one textarea, you must first edit the dhtmlscheduler.js file.

Find this code:

scheduler.form_blocks={
	textarea:{
		render:function(sns){
			var height=(sns.height||"130")+"px";
			return "<div class='dhx_cal_ltext' style='height:"+height+";'><textarea></textarea></div>";

And replace it with this code to add an id to the div that holds the textarea:

scheduler.form_blocks={
	textarea:{
		render:function(sns){
			var height=(sns.height||"130")+"px";
			return "<div class='dhx_cal_ltext' id='sns.name' style='height:"+height+";'><textarea></textarea></div>";

And then, in your init() function add this code (pay special attention to the highlighted portion):
NOTE: You MUST handle each of your textarea fields in your custom set_value function.

scheduler.form_blocks.textarea.set_value=function(node,value,ev){
//////////////////////////////////////////////////////////////////////////////////////
	var sns = scheduler.config.lightbox.sections;
	for (var i=0; i < sns.length; i++) {
		//DESCRIPTION - Field I am hiding
		if(sns[i].name == "description"){
			//editor area
			var thisdescription = document.getElementById("description");
			thisdescription.innerHTML = "<textarea readonly='readonly'>"+ev.itemtype+"</textarea>" || "<textarea readonly='readonly'>Task</textarea>";
			thisdescription.style.display = "none";
			//section header
			var thisthisdescriptionheader = document.getElementById(sns[i].id);
			thisthisdescriptionheader.style.display = "none";
			//force auto-resize of lightbox
			scheduler.setLightboxSize();
//////////////////////////////////////////////////////////////////////////////////////
		//ITEMCATEGORY - readonly field, and display "better looking" text
		}else if(sns[i].name == "itemcategory"){
			//editor area
			var thisitemcategory = document.getElementById("itemcategory");
			if(ev.itemcategory == "nonspecialty"){
				thisitemcategory.innerHTML = "<textarea readonly='readonly'>Non-Specialty</textarea>";
			}else if(ev.itemcategory == "welding"){
				thisitemcategory.innerHTML = "<textarea readonly='readonly'>Welding</textarea>";
			}else if(ev.itemcategory == "electrical"){
				thisitemcategory.innerHTML = "<textarea readonly='readonly'>Electrical</textarea>";
			}else if(ev.itemcategory == ""){
				thisitemcategory.innerHTML = "<textarea readonly='readonly'></textarea>";
			}
			thisitemcategory.style.display = "block";
			//section header
			var thisitemcategoryheader = document.getElementById(sns[i].id);
			thisitemcategoryheader.style.display = "block";
		//STDHOURS - not readonly
		}else if(sns[i].name == "stdhours"){
			//editor area
			var thisstdhours = document.getElementById("stdhours");
			thisstdhours.innerHTML = "<textarea>"+ev.stdhours+"</textarea>" || "<textarea></textarea>";
			thisstdhours.style.display = "block";
			//section header
			var thisstdhoursheader = document.getElementById(sns[i].id);
			thisstdhoursheader.style.display = "block";
		//UNITSTYPE - readonly field
		}else if(sns[i].name == "unitstype"){
			//editor area
			var thisunitstype = document.getElementById("unitstype");
			thisunitstype.innerHTML = "<textarea readonly='readonly'>"+ev.unitstype+"</textarea>" || "<textarea readonly='readonly'></textarea>";
			thisunitstype.style.display = "block";
			//section header
			var thisunitstypeheader = document.getElementById(sns[i].id);
			thisunitstypeheader.style.display = "block";
		//ITEMQTY - not readonly
		}else if(sns[i].name == "itemqty"){
			//editor area
			var thisitemqty = document.getElementById("itemqty");
			thisitemqty.innerHTML = "<textarea>"+ev.itemqty+"</textarea>" || "<textarea></textarea>";
			thisitemqty.style.display = "block";
			//section header
			var thisitemqtyheader = document.getElementById(sns[i].id);
			thisitemqtyheader.style.display = "block";
		//ITEMTOTAL - readonly field
		}else if(sns[i].name == "itemtotal"){
			//editor area
			var thisitemtotal = document.getElementById("itemtotal");
			thisitemtotal.innerHTML = "<textarea readonly='readonly'>"+ev.itemtotal+"</textarea>" || "<textarea readonly='readonly'></textarea>";
			thisitemtotal.style.display = "block";
			//section header
			var thisitemtotalheader = document.getElementById(sns[i].id);
			thisitemtotalheader.style.display = "block";
		}
	}
}

Just FYI… my lisghtbox sections configuration looks like this:

scheduler.config.lightbox.sections=[
	{name:"description", height:50, map_to:"itemtype", type:"textarea"},
	{name:"itemname", height:21, type:"select", map_to:"itemname", options:[
	<?php
		$Ctasks = mysql_query("select * from tasks where belongsto != 'milestone' order by belongsto, taskname");
		$counttasks = mysql_num_rows($Ctasks);
		$task = 1;
		while($Rtasks=mysql_fetch_array($Ctasks)){
			if($task == $counttasks){
				echo '{ key:"'.$Rtasks['taskname'].'", label:"'.$Rtasks['belongsto'].' - '.$Rtasks['taskname'].'" }';	
			}else{
				echo '{ key:"'.$Rtasks['taskname'].'", label:"'.$Rtasks['belongsto'].' - '.$Rtasks['taskname'].'" },';
			}
			$task++;
		}
	?>
	]},
	{name:"itemcategory", height:25, map_to:"itemcategory", type:"textarea"},
	{name:"stdhours", height:25, map_to:"stdhours", type:"textarea"},
	{name:"unitstype", height:25, map_to:"unitstype", type:"textarea"},
	{name:"itemqty", height:25, map_to:"itemqty", type:"textarea"},
	{name:"itemtotal", height:25, map_to:"itemtotal", type:"textarea"},
	{name:"time", height:72, type:"time", map_to:"auto"}
]
#8

Hello,

Shame on us, if the above solution don’t work for you I will create sample with the ‘hidden’ section (though really I believe there is no reason to use it).

Kind regards,
Ilya

#9

No worries, Ilya. I got it to work in the end.

Thanks for everyone’s help.