Event handle in drop-down menu.
- by QLiu
Hello fellows,
I am trying to develop a dynamic drop down menu by a customized widget style
The custom widget has two main features:
Read user's location cookies variable to set the proper contact phone number in the CP pages
When users select on the drop down menu, it triggers onChange event, it re-select the contact phone number based on users' selections, but it won't reset the location cookies.
My widgets conatins two files:
Controller.php: Simply one, it uses to handle get cookies variables
class serial extends Widget
{
function __construct()
{
parent::__construct();
}
function generateWidgetInformation()
{
$this->info['notes'] = "Serial Number search Box";
}
function getData()
{
//Get cookies code will go here, and pass to view.php
$this->data['locale'] = 'gb';// for test purpose now
}
}
view.php is about Presentation layer contains HTML, which get the data from my controller
<div style="border: 1px solid black; display: block;" id="<?=$this->instanceID;?>"></div>
<script>locale2contact('<?=$this->data['locale']?>', '<?=$this->instanceID;?>');</script>
And then the Javascript function, call locale2contact
var element_id =''; //Define Global Variables,
//Receive the cookies locale, and instance id from view.php
function locale2contact(locale, instance_id)
{
var details = '';
this.element_id=instance_id; //assing the instance id into global variable
// alert(instance_id); //Check whether we got the instance id from view files
if (locale == 'gb') details = 'UK Contact Details<br>' + build_dropdown(locale);
else if (locale == 'fr') details = 'French Contact Details<br>'+build_dropdown(locale);
else if (locale == 'be') details = 'Belgian Contact Details<br>'+ build_dropdown(locale);
else details = 'Unknown Contact Detail';
writeContactInfo(details);
}
//Build the drop down menu with pre-selected option by using cookies.
function build_dropdown(locale)
{
var dropdown = '<select onChange=changeContactInfo(this.options[selectedIndex].text)>';
dropdown += '<option' + (locale == 'gb' ? ' selected' : '') + '>UK</option>';
dropdown += '<option' + (locale == 'be' ? ' selected' : '') + '>Belgium</option>';
dropdown += '</select>';
return dropdown;
}
// Not smart way in here, once the people select the drop down box, it reselect the drop down menu and reset the contact info
function changeContactInfo(selected)
{
var details ='';
//alert(this.element_id);
//alert(locale);
if (selected == 'UK') details = 'UK Contact Details<br>' + build_dropdown2(selected);
else if (selected == 'fr') details = 'French Contact Details<br>'+ build_dropdown2(selected);
else if (selected == 'Belgium') details = 'Belgian Contact Details<br>'+ build_dropdown2(selected);
else details = 'Unknown Contact Detail';
writeContactInfo(details);
}
//Build the drop down menu
function build_dropdown2(selected)
{
var dropdown = '<select onChange=changeContactInfo(this.options[selectedIndex].text)>';
dropdown += '<option' + (selected == 'UK' ? ' selected' : '') + '>UK</option>';
dropdown += '<option' + (selected == 'Belgium' ? ' selected' : '') + '>Belgium</option>';
dropdown += '</select>';
return dropdown;
}
//Back to view
function writeContactInfo(details)
{
document.getElementById(this.element_id).innerHTML = details; //update the instance field in view
}
Javascript function is not efficient. As you see, I got two similar duplicate functions to handle events.
Users go to the page, the widget read the cookies variable to display contact info (locale2contact)and preselect the drop-down menu (function build_dropdown)
If users select the drop down menu, the displya contact info change (function changeContactInfo), and then I need to rebuild the drop down menu with user previously selection (function build_dropdown2).
I am looking for best practices for adding this functionality to RightNow widget.
Thank you. I really do not like the way i am doing now. It works; but the code looks bad.
