Princess Cornflakes

Too trashy to print on a cereal box

Use rowKeyVar to Access dynamic id from JSF dataTable using JavaScript

with 6 comments


In JSF, ids of dataTable rows are dynamically generated. This can be frustrating when trying to access a specific field in a specific row from JavaScript. The trick to getting the specific dataTable field is to know the exact row number in JavaScript, and that is what I will demonstrate here.

I am using RichFaces 3.1.6 along with Apache MyFaces 1.1.3. For unexplicable reasons, I cannot get MyFaces 1.2.x to run with my Websphere Application Server Community Edition v. 2. So I’m stuck with 1.1.x. What this means is that I can’t use the newest version of RichFaces and I’m stuck with a lot of components that don’t work right.

I have a <rich:dataTable> with many rows, each of which contains several columns with <h:inputText> fields. A time value goes into each field and I need to validate the time input strings and compare them to one another.

I tried to use <f:validator>. Well it worked ok, but I couldn’t modify the javascript event that controlled the validation. It only responded to the “enter” key being pressed, and I wanted “onblur” to trigger the validation. Therefore I made a simple javascript call from within the <h:inputText> tag, like this:

<h:inputText value="#{addShopScheduleBean.sundayp2}" size="5"
id="sunp2" onblur="validateTime(this.value);">

I used ValidateTime like this, to validate a well-formed time string:

function validateTime(html) {
var match = /^([0-1]?[0-9]|2[0-3])\:[0-5][0-9]$/.test(html);
// empty string is ok
if ((!match) && (html.length > 0)) {
alert("BAD VALUE! ");
}
}

But, I need validateTime to do more. I need it to compare that field with another field in the same row.

JSF creates dynamic ids for all components, and the two id’s I needed were roughly:

‘a4jform-3:dt-173:0:sunp1’

‘a4jform-3:dt-173:0:sunp2’

The 0 refers to the row number. If I needed components from row 23 it would be:

‘a4jform-3:dt-173:23:sunp1’

‘a4jform-3:dt-173:23:sunp2’

It is this row number variable I needed JavaScript to have access to. Here is how I solved the problem.

I used the rowKeyVar in <rich:dataTable> like this:

<rich:dataTable headerClass="schedule" footerClass="schedule-foot"
styleClass="schedule" value="#{addShopScheduleBean.employees}"
var="schedshopemp" id="dt-173" rowKeyVar="myrow">

then, in my inputText, I called my javascript function, validateTime, using “myrow” as an argument:

<h:inputText value="#{addShopScheduleBean.sundayp2}" size="5"
id="sunp2" onblur="validateTime(this.value,#{myrow});">

Voila! My JavaScript can now see the row number from which it is getting called and I can get to the value of other inputTexts in that row, like this:

function validateLast(html, row) {
var lastval = document.getElementById('a4jform-3:dt-173:'+ row +':sunp1').value;
alert("html is " + html + " and row is " + row + " and lastval is " + lastval);
}

That enabled me to see what was in the ‘a4jform-3:dt-173:5:sunp1’. If for example I was in ‘a4jform-3:dt-173:5:sunp2’. Now I can compare the two entered times to see if the last one is earlier than the first and produce the appropriate errors for the user.

I hope this has helped someone.

Advertisements

Written by nattie

September 18, 2008 at 1:49 pm

6 Responses

Subscribe to comments with RSS.

  1. Thank you so much! This is exactly what I’ve been trying to do.

    Adam T.

    May 9, 2011 at 7:20 pm

    • Great. I’m glad I could help someone…

      heather201

      May 10, 2011 at 12:44 pm

    • Grate!!! Thanks….

      Weeradarshaka

      July 20, 2011 at 8:55 am

  2. This is great! Thank you so much.

    GK

    September 26, 2011 at 8:06 pm

  3. I added the rowKeyVar=”innerRowIndex”to my table but the index that I got was 1, 2, 3, etc, and not the cryptic id form such as a4jform-3:dt-173:23:sunp or in my case, glTable0:1:j_id953. Is there any additional config or attributes required?

    I am passing the innerRowIndex as a parameter to the action for a4j:support, but I didn’t think that should matter.

    BD

    October 3, 2012 at 9:12 pm

    • I apologize but I have not looked at this code in a long, long time. Therefore I am unable to help you with this question right now. Good luck!

      heather201

      October 12, 2012 at 5:25 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: