inputText, javascript

[Sarina Smith]

Hi,
I used h:inputText inside dataTable for the input field. When user clicks(focus) on the input field, I want to have the border changed.

<h:inputText id="field1" onfocus="checkFocus(???)"...>, how can I pass the input field id to checkMouse(??)? I viewed the page source, h:inputText becomes sth. like <input id="form1:table1:0:field1" type="text" name="form1:table1:0:field1" ...(Note "0" in table1:0:field1 dynamically change depends on number of rows, for example, if there are 3 rows in the dataTable, it could be table1:0:field1,table1:1:field1,table1:2:field1)
That means in my jsp, I should use onfocus="checkFocus(form1:table1:?:field1)". But how can I dynamically pass that arg to checkMouse() in JSF?


function checkFocus(fieldId) {
if (check) document.getElementById(fieldId).style.borderColor="#E00000";
else document.getElementById(fieldId).style.borderColor="";
}

Thanks,
Sarina

[Josh Juneau]

I have a similar setup (with ADF Faces but it should work the same without)...I use something like this:

Within the dataTable :

<af:column>
<f:facet header....
...(more code)...
</f:facet>
<h:inputText id="blah" onchange="javaScriptFunction(this.form,this);"
...(more code)...
/>

In the javascript function:

javaScriptFunction(form,component) {
//This will obtain the id of the textfield
var compid = component.getAttribute("id");
//This will obtain the value of the text
var fieldValue = form[compid].value;
...(more code)...


Hope this helps!

Josh Juneau

[Eric Pascarello]

onfocus="ChangeBorder(this,true)" onblur="ChangeBorder(this,false)"

the script

function ChangeBorder(obj,flag){
  if(flag)obj.style.borderColor="#0000FF";
  else obj.style.borderColor="#000000";
}

Eric

[Eric Pascarello]

This will be moved to JS forum I hope!

[Varun Khanna]

Originally posted by Sarina Smith:
But how can I dynamically pass that arg to checkMouse() in JSF?

DataTable has a seperate renderer you may extend and customize the renderer as per your needs.

[Sarina Smith]

Hi,
I tried:
javaScriptFunction(form,component) {
//This will obtain the id of the textfield
var compid = component.getAttribute("id");
//This will obtain the value of the text
var fieldValue = form[compid].value;

It WORKS!
I haven't got time to try other solutions other guys provided here.

Thanks a lot, Guys!
Best Regards,

Sarina