How to Attach Event to Options Select ?

Scheduler Javascript
#1

Hi,

I am using following query in render_sql to populated events data

$scheduler->render_sql("select user_events.*, ust.user_service_type_description as descpt from user_events join user_service_type ust on(ust.user_service_type_id = user_events.type_id) where user_id = ".$user_id,“user_event_id”, “start_date,end_date,event_name,event_details,user_id,type_id,rec_type,event_pid,event_length,descpt”);

The XML output is:

<event id='2' >
    <start_date><![CDATA[2010-06-10 00:00:00]]></start_date>
    <end_date><![CDATA[0000-00-00 00:00:00]]></end_date>
    <text><![CDATA[]]></text>
    <event_details><![CDATA[---]]></event_details>
    <user_id><![CDATA[1]]></user_id>
    <type_id><![CDATA[1]]></type>
    <rec_type><![CDATA[]]> </rec_type>
    <event_pid><![CDATA[0]]></event_pid>
    <event_length><![CDATA[0]]></event_length>
    <descpt><![CDATA[Event]]></descpt>
</event>

And, following the PHP part of example samples/01_initialization_loading/08_options.html to generate options from a table. and need to attach an onchange event to it. The xml for type is as follows: (generated from user_service_type table, which has user_service_type_id, name & description)

<coll_options for=‘type’>







</coll_options>

And in lightbox.sections i have used,
{name:“type”, height:21, map_to:“type”, type:“select”,options:scheduler.serverList(“type”) }, {name:“description”, height:30, map_to:“descpt”, type:“textarea”},

Once user selecte types from the select box i need to change the value of description section & this description section is mapped to ‘descpt’ - which is taken from the query with join in above. And description section needs to be read only.

How would i attach event to select box and make description field ready only just to display the descpt value??? What is the better way to use joins in render_sql??

Please reply soon.

#2

further
{name:“description”, height:30, map_to:“descpt”, type:“textarea”},
is not showing its value in the lightbox section.

#3

There are two possible ways

a) define custom sections for editor, in such case you can control html output and add any necessary event handlers or attributes.

or

b) you can extend default code , so existing form block will be used but necessary events and attributes will be assigned dynamically.

Check the attached sample.

is not showing its value in the lightbox section.
Be sure that map_to attribute and name of tag in XML is exactly the same.
1276595328.zip (48.1 KB)

#4

Really appreciate your effort, thanks a lot. I am using the code from the demo.

i need only two sections: Select Box & the text field, i am using text field to populate the selected data. Lightbox config for me would be (taken from the demo)

scheduler.config.lightbox.sections = [
{name:“someA”, height:20, map_to:“somekey”, focus:true,
type:“select”, options:[
{key:“1”, label:“One”},
{key:“2”, label:“Two”},
{key:“3”, label:“Three”}
] },
{name:“description”, height:50, map_to:“text”, type:“textarea” ,},
{name:“time”, height:72, type:“time”, map_to:“auto”}
];

when i change value in select option, the value of text field would change, text field would be read only. Up to here the sample you attached is working fine, but when i create a new event i want to set the default value of the text field to first option of the select box, not the default New Event. and also need to remove this event_header & event_bar_text text from the light box,

i tried to accomplish this with:
scheduler.templates.event_header=function(start,end){
return ‘’;
}
but this removes the header from all the events in day, month & year view too. please reply soon.

#5

The header of lightbox can be accessed as

var spans = scheduler._get_lightbox().getElementsByTagName("span") spans[1].innerHTML = spans[2].innerHTML = "";

Not very beautiful solution, but this is the only way to access header area.
You can place this code in redefined set_value, so it will called each time before new form will be shown.

as for default value, you can replace in previous sample

[code] setTimeout(function(){
node.firstChild.onchange();
},1);

		return old.apply(this, arguments);[/code]

with

[code] setTimeout(function(){
node.firstChild.onchange();
},1);

		return old.apply(this, arguments);[/code]
#6

thank you so much. this really solved issues for now.