Javascript LookupControl

Will_Rickards (Will Rickards) — Fri, 14 Jul 2006 22:28:13 GMT

A lookup control is a common thing to have on many web pages. In this case we assume a textbox, a command button, and a label of some sort to display a description.

The HTML might look like this



Client

Here is a javascript function to call in the onload to setup that lookup control. And examples of the functions required.



// ----------------------------------------------------------------------------

// SetupLookupControl

//

// Description : sets up a lookup control by linking it to its 

//    associated controls and hooking up the event handlers

//

// Arguments :

//    strTextBoxID               : input type=text id

//    strLookupButtonID          : input type=button id

//    strLabelID                 : span of div id

//    funcTextBoxOnChange        : function for textbox's onchange and onblur event

//    funcLookupButtonOnClick    : function for lookup button's onclick event

//

// Dependencies : none

//

// History :

// 2006.07.14 - WSR : created

//

function SetupLookupControl( strTextBoxID, strLookupButtonID, strLabelID, funcTextBoxOnChange, funcLookupButtonOnClick )

   {



   // get reference to lookup button

   var ctlLookupButton = document.getElementById(strLookupButtonID);



   // if lookup button was found

   if (ctlLookupButton)

      {



      // hookup event handlers and control references

      ctlLookupButton.onclick = funcLookupButtonOnClick;

      ctlLookupButton.textbox = document.getElementById(strTextBoxID);



      // if textbox was found

      if (ctlLookupButton.textbox)

         {



         // hookup event handlers and control references

         ctlLookupButton.textbox.onchange = funcTextBoxOnChange;

         ctlLookupButton.textbox.onblur = funcTextBoxOnChange;

         ctlLookupButton.textbox.label = document.getElementById(strLabelID);



         // init last value property of textbox

         if ( typeof ctlLookupButton.textbox.lastvalue == 'undefined' )

            ctlLookupButton.textbox.lastvalue = ''; 



         }



      }



   }

//

// SetupLookupControl

// ----------------------------------------------------------------------------



// ----------------------------------------------------------------------------

// cmdTimekeeperLookup_click

// Description: handler for requesting timekeeper selection button click event

// Arguments: none

// Dependencies:

//    TimekeepQuery (lookup.js)

//

function cmdTimekeeperLookup_click()

   {



   // show timekeeper query window

   TimekeepQuery( this.textbox );



   // update timekeeper information

   this.textbox.onchange();



   // process default action

   return true;



   }

//

// cmdTimekeeperLookup_click

// ----------------------------------------------------------------------------





// ----------------------------------------------------------------------------

// txtTimekeeper_change

// Description: event handler for timekeeper textbox change event

// Arguments: none

// Dependencies:

//    window.strTkprMask (masking.js)

//    trim

//    ApplyMask (masking.js)

//    TimekeepLookup (lookup.js)

//    UpdateElementText (shared.js)

//

function txtTimekeeper_change()

   {



   var strTimekeepName = '';

   var objXMLDOM;

   var nodField;

 

   // trim input

   this.value = this.value.trim();

  

   // if there was input

   if ( this.value.length > 0 )

      {



      // apply timekeep mask to textbox input

      ApplyMask( this, window.strTkprMask );



      // if inputted timekeeper is different from current timekeeper

      if ( this.lastvalue != this.value )

         {



         // request timekeeper information

         objXMLDOM = TimekeepLookup( this.value );



         // if XML DOM object returned

         if ( typeof objXMLDOM == 'object' )

            {



            // get field values

            nodField = objXMLDOM.selectSingleNode('//lastname');

            if (nodField != null)

               strTimekeepName = nodField.firstChild.nodeValue;



            nodField = objXMLDOM.selectSingleNode('//firstname');

            if (nodField != null)

               strTimekeepName = strTimekeepName + ', ' + nodField.firstChild.nodeValue;



            // update timekeeper

            this.lastvalue = this.value;



            }

         // if XML DOM object wasn't returned

         else

            {



            // indicate timekeeper was not found

            strTimekeepName = 'Timekeep \'' + this.value + '\' was not found.';



            // update timekeeper

            this.lastvalue = '';



            }



         // update document

         UpdateElementText( this.label, strTimekeepName );



         }



      }

   // if there was no input

   else

      {



      // clear the timekeep and display

      this.lastvalue = '';

      UpdateElementText( this.label, '' );



      }



   // process default action

   return true;



   }

//

// txtTimekeeper_change

// ----------------------------------------------------------------------------

DZone Snippets: lookup code

Javascript LookupControl