Javascript LookupControl

• Tweet
• 

        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

<label for="txtExistingClient">Client</label>
<input id="txtExistingClient" name="txtExistingClient" type="text" size="15" maxlength="14" class="text uppercase" runat="server">
<input id="cmdExistingClientLookup" name="cmdExistingClientLookup" type="button" value=" ? ">
<span id="lblExistingClient"></span>

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
// ----------------------------------------------------------------------------

Tags:
• control
• javascript
• lookup