How to attach function to OnChange event on checkbox

Scheduler Javascript
#1

Hi,
I saw the samples for doing the same for a “select” field, but am not able to adapt it for the checkbox type.

Where could I be going wrong?

[code]var old = scheduler.form_blocks.checkbox.set_value;
scheduler.form_blocks.checkbox.set_value = function(node){
//need to work out how to access the checkbox onchange event
//below works only for select
node.firstChild.onchange = function(){

            alert("onchange");
            
            //based on value set certain fields to visible...
        }
        
        return old.apply(this, arguments);
    }[/code]

thank you!
regards,
Rose

#2

Almost… :slight_smile:

var old = scheduler.form_blocks.checkbox.set_value; scheduler.form_blocks.checkbox.set_value = function(node){ old.apply(this, arguments); var checkbox = node.previousSibling.getElementsByTagName('input')[0]; checkbox.onchange=function(){ alert('Hello world'); }; }
Hope this helps.

Best regards,
Ilya

#3

Hi Ilya,
For some reason just overriding the function as follows:
scheduler.form_blocks.checkbox.set_value= function(node){
}
causes the checkbox not to be rendered…
The checkbox node loses it’s input child item and consists only of the text title. In the attached screenshot, “Is Booking” should have a checkbox.

I’m quite stuck with this :frowning:

Any more ideas?

thank you,
Rose

IsBookings.JPG1440×874 120 KB

#4

Hi Ilya,

In the end I decided to give up on overriding the set_value function and tried another way. Managed with the following:

scheduler.attachEvent(“onLightbox”, getCBEvent);
function getCBEvent() {
var cbnode = scheduler._lightbox.childNodes[1].childNodes[0].childNodes[0];
cbnode.onchange = function() {
alert(“hello”);
}
}

thanks,
Rose

#5

Hello,

I am glad you have worked that out.
Just in case it could help someone else i am attaching sample with my solution. Save it as html and place in [b]scheduler\samples\02_customization[/b] folder.

[code]

<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">

<script src="../../codebase/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>

<script type="text/javascript" charset="utf-8">
	function init() {
		scheduler.config.multi_day = true;
		
		scheduler.config.event_duration = 30;
		scheduler.config.auto_end_date = true;
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		
		
		var old = scheduler.form_blocks.checkbox.set_value;
		scheduler.form_blocks.checkbox.set_value = function(node){
			old.apply(this, arguments);
			var checkbox = node.previousSibling.getElementsByTagName('input')[0]; 
			checkbox.onchange=function(){
				alert('Hello world');
			};
		}			
	
		scheduler.locale.labels.section_checkme = "I'm going to participate"; 	
		
		scheduler.config.lightbox.sections=[	
			{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
			{ name:"checkme", map_to:"single_checkbox", type:"checkbox", checked_value: "registrable", unchecked_value: "unchecked" },
			{ name:"time", height:72, type:"time", map_to:"auto"}	
		];
		
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.init('scheduler_here',null,"week");
		scheduler.load("../common/events.xml");
		
	}
</script>
 
 
[/code]

Best regards,
Ilya