« - »

Using the Data Picker on an HTML page

2 March 2008
Author: Restamon Posted under Code

To use the data picker on an HTML page, you need to provide two things:

  1. A button, or control, to launch the pop-up window, and
  2. A Javascript function to accept the results returned by the selection of an item on the list

As a general convention, I always use an ellipsis for the value of a launcher button, but that’s just a personal preference. Mainly, you just want some kind of control on your page somewhere near the field(s) to be filled in that will pop up the selection window. Mine usually look something like this (from the demo page):

<input value="..." onclick="return launchCountryPopup();" type="submit">

To actually launch the pop-up window, I use a Javascript function such as this:

function launchCountryPopup() {
  var url = "select.html?id=cy&fn=updateCountryData";
  var popupCountry = window.open(url, "popupCountry", "toolbar=no,
       directories=no,status=no,scrollbars=yes,resizable=yes,
       resize=yes,menubar=no,height=400,width=650");
  if (window.focus) {
    popupCountry.focus()
  }
  return false;
}

If you look closely at the link to the page, you will notice an “fn” parameter that is set to the value “updateCountryData”. This is the name of the Javascript function that will process the selection made by the user. By setting the “fn” parameter, you are telling the pop-up window who to call once a selection has been made. This function is the #2 requirement (above) for implementing a data picker. In the case of the demo page, this function looks like this:

function updateCountryData(selected) {
  if (selected != null) {
    document.getElementById("code").value = selected.id;
    document.getElementById("name").value = selected.name;
  }
}

The pop-up data picker returns an object to the selection processing script. This object will have properties based on the configuration of the picker. In the case of the demo page, the Javascript file cyselect.js, which configured the picker, contained the following line:

fieldName = ['id','name'];

What that means is that the object returned by the picker will have two properies: “id” and “name”. The function that processes the selection can then use those properties to populate elements on the screen and/or pass them on to other functions on the page. Each configured data picker has its own unique set of properties returned, but you can easily determine what they are by examining the script that configured the picker.


http://blog.restafarian.org/2008/03/using-the-data-picker-on-an-html-page/

Comments are closed.

Sorry, the comment form is closed at this time.