JavaScript: Firing alerts once per column

In our application there was a HTML table which is like an Excel Grid, where users can enter data. Each cell contains a textbox through which user can enter data. There are alerts and remainders which can be configured and they get fired when the focus comes to the cell. However the business wants the alert to be fired only once per column.

Assume that the table contains 10 rows and 10 columns. User has set alert for all even columns – 2,4 ,6 8 and 10. So when focus comes to this fied, system MUST fire the underlying alert message set for that column. However this alert needs to be fired ONLY ONCE  per column.

The code is legacy and so no naming convention was followed. Normally each cell in the table will have an index from which we can make out which column it belongs to. However the code we have was so amateure that we cannot determine the cell index based on the id of the element in it.

We need a reliable solution and we decided to make use of the TD cell index.

Logic

  • Define onfocus event for each element in the cell
  • Define a JS function for the onfocus event.
  • Pass the current element id as a parameter to the above JS function
  • Insider the JS function, get handle to underlying TD onject and its cell index.
  • Check whether cell index is already is considered by checking a string, which contains all the handled cell index appended in “_index_” format.
  • If cellIndex string is not found, then it will show the alert and append the current cellindex to it.

The above logic make sure that alert will be fired only one time for each column, irrespective of which cell is accessed by the user.

Demo

Let us create a table with 4 columns and 6 rows, each containing a textbox element. We will then define an “onfocus” event and to which the respective textbox element is passed.

A javascript method is then defined which will be triggered during “onfocus” event.

Here is the code which does the magic

[code]

<html> <head> “<script>

// a magic variable which will store all the cell index for which alerts are shown.

// a cell index will be stored in <strong>”_{INDEX}_”</strong> format

var magic = “”;

/*

The function which will be invoked bu onfocus EVENT of the cell element, which in this example is the textbox.

The function will first extract the cell index and check whether alert is already generated for that column.

*/

function focuson(obj)  {

// extracting the underlying TD cell index of the object in focus.

var val = “_”+obj.parentNode.cellIndex+ “_”;

// check whether the index is already considered.

if (magic.indexOf(val) < 0 )  {

// adding the current index string to the magic string.

magic = magic + val;

// displaying the alert message for the column.

alert(val + “Focus  ON : ” + obj.parentNode.cellIndex);

}

}

</script>

</head>

<body>.

<table border=”1″>

<tr>

<td><input id=”id1″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id2″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id3″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id4″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

</tr>

<tr>

<td><input id=”id1″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id2″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id3″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id4″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

</tr>

<tr>

<td><input id=”id1″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id2″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id3″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id4″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

</tr>

<tr>

<td><input id=”id1″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id2″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id3″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id4″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

</tr>

<tr>

<td><input id=”id1″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id2″ type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id3″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

<td><input  id=”id4″  type=”text” value=”Hello” onfocus=”focuson(this)” /></td>

</tr>

</table>

</body>

</html>

[/code]

Posted in: Programming

Leave a Comment