Hello fellows,

I am trying to develop a dynamic drop down menu by a customized widget style

The custom widget has two main features:

1. Read user's location cookies variable to set the proper contact phone number in the CP pages

2. 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.

1. 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)

2. 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.