Question

I’m trying to use the ClientHandler.validateMatches() method to hide/display and enable/disable some elements of a ui. I’m adding two ClientHandlers but only one actually seems to execute as expected. Code is as follows:

function doGet(e) {
  var app = UiApp.createApplication();
  var grid = createAdultInfoGrid(135, 8);

  app.add(grid);
  return app;
}

/* Element id for adult-specific information grid element */
var GRID_ADULTS_ID = 'G_AdultInfo';
/* Element id for driver status field */
var PARTICIPANT_DRIVER_ID = 'P_IsDriver';
/* Element id for seatbelt count field */
var PARTICIPANT_SEATBELT_COUNT_ID = 'P_BeltCount';
/* Element id for seatbelt count status message field */
var PARTICIPANT_SEATBELT_MSG_ID = 'P_BeltCountMsg';

/**
 * Creates a new grid for display of adult-specific information using the GRID_ADULTS_ID constant as its id
 * @param pLblWidth - the width to be used for labels
 * @param pCellPadding - the value to be used for cell padding in the resulting grid
 */
function createAdultInfoGrid(pLblWidth, pCellPadding) {
  Logger.log("Creating adult participant information grid . . .");
  var app = UiApp.getActiveApplication();
  var grid = app.createGrid(2, 3).setId(GRID_ADULTS_ID).setCellPadding(pCellPadding);

  Logger.log("Creating listbox - driver . . .");
  var lstBoxDriver = app.createListBox().setId(PARTICIPANT_DRIVER_ID).setName('DriverStatus');
  lstBoxDriver.setVisibleItemCount(1);
  lstBoxDriver.addItem('Yes');
  lstBoxDriver.addItem('No');  
  lstBoxDriver.setItemSelected(0, true);

  Logger.log("Creating textbox - seatbelts . . .");
  var txtBoxSeatBelts = app.createTextBox().setId(PARTICIPANT_SEATBELT_COUNT_ID).setValue('2');
  var labelBeltStatus = app.createLabel('Please enter a number between 1 and 15.').setId(PARTICIPANT_SEATBELT_MSG_ID).setWidth(pLblWidth * 2).setVisible(false);
  var driverYesHandler = app.createClientHandler()
      .validateMatches(lstBoxDriver, '([Yy][Ee][Ss]){1}')
      .forTargets(txtBoxSeatBelts)
      .setText('')
      .setEnabled(true)
      .setVisible(true)
      .setStyleAttribute("color", "black")
      .setStyleAttribute("background", "white")
      .forTargets(labelBeltStatus)
      .setVisible(false);

  var driverNoHandler = app.createClientHandler()
      .validateMatches(lstBoxDriver, '([Nn][Oo]){1}')
      .forTargets(txtBoxSeatBelts)
      .setText('0')
      .setEnabled(false)
      .setVisible(true)
      .setStyleAttribute("color", "black")
      .setStyleAttribute("background", "white")
      .forTargets(labelBeltStatus)
      .setVisible(false);

  lstBoxDriver.addChangeHandler(driverYesHandler);
  lstBoxDriver.addChangeHandler(driverNoHandler);

  Logger.log("Adding listbox - driver . . .");
  grid.setWidget(0, 0, app.createLabel('I am willing to drive:').setWidth(pLblWidth));
  grid.setWidget(0, 1, lstBoxDriver);

  Logger.log("Adding textbox - seatbelts . . .");
  grid.setWidget(1, 0, app.createLabel('Seatbelts:').setWidth(pLblWidth));
  grid.setWidget(1, 1, txtBoxSeatBelts);
  grid.setWidget(1, 2, labelBeltStatus);

  app.close();
  return grid;
}

When accessed in a browser, I can change the listbox to ‘No’ from ‘Yes’ and the ClientHandler works (text is set to 0, field is disabled, etc). But when the listbox is changed from ‘No’ to ‘Yes’, the expected actions are not performed – the form remains in the same state. I’ve tried using ‘Yes’ and ‘No’ as the regex pattern with the ‘i’ flag specified – also tried using validateNotMatch() method, but to no avail. The event doesn’t seem to be caught after the first change is made from default values. Any suggestions would be appreciated.

thanks in advance,
dgg

Answer 1

See the open bug Issue 1226.
There is a bug with ClientHandlers and ListBoxes such that regardless of the validation the handler will always fire. Therefore both of your handlers are firing, and as your ‘No’ handler was added last, that is the one which runs last. You can prove this by reversing the order in which you add the ChangeHandlers.