javascript in jsf

[Nareshkumar Kapilavai]

Hi,
i am very new to jsf.i am trying to assign some value to output text id from java script function. that output text is in one of the row of data table. but it is not happening.that output text value is not changing.can any body sugest me that wheather it is possible or not.

and another one is i need to change the color of some out put text value from onclick javascript function. in normal html i can do this thing by using some span tags.i need to change the style of output text value from javascript function.can any body suggest me that how can i do my requirment in jsf.

Thanks in advance.

Thanks & regards
Naresh

[Tim Holloway]

I can't answser your first question, but you can probably set the color of an outputText tag by giving it an "id=" attribute and setting the color using that ID as a target. If not, another, somewhat messier possibility is to use "verbatim" JSF tags to wrap HTML span tags and target the span.

JSF tags are more function- and less display-oriented, often resulting in multiple or even variable sets of HTML output from a single JSF tag, which is why sometimes a more sophisticated approach is needed.

[Anirban Mandal]

For the first one ---- Yes its very much possible get the object and set the text as innerHtml like document.getElementById("").innerHTML = "hi".

Is this what you are looking for or I am not in right track ---!! let me know

[Anirban Mandal]

OK sorry i missed the datatable part--- are you tryingto set the text in any event or on what ?

[Leonardo Rafaeli]

you must keep in mind how JSF component Ids are generated

all jsf components follow a naming pattern for identification, the patterns is: name of the form (two dots) name of a container (two dots) number of row (if you are using a datatable plus two dots) and keep moving on until the id of component. lets see:

<h:form id="myForm">
  <h:inputText id="myInput" />
</h:form>

The generate html of myInput will be:

<input type="text" id="myForm:myInput" />

if you have a panelGrid

<h:form id="myForm">
  <h:panelGrid id="myGrid">
    <h:inputText id="myInput" />
  </h:panelGrid>
</h:form>

The generate html of myInput will be: <input type="text" id="myForm:myGrid:myInput" />
Ps.: If myGryd was a parent of "myForm", so the id would be: myGrid:myForm:myInput

finally, if you use a dataTable

<h:form id="myForm">
  <h:dataTable id="myTable" var="myVar" value="myCollection">
    <h:inputText id="myInput" />
  </h:panelGrid>
</h:form>

you input ID will be, for each row:
myForm:myTable:X:myInput -> where X is the number of the row, if the dataTable iterates 5 times, so the id of the inputs will be:
myForm:myTable:0:myInput
myForm:myTable:1:myInput
myForm:myTable:2:myInput
myForm:myTable:3:myInput
myForm:myTable:4:myInput

I hope you've understood my explanation :P

Ps.: If you want to access a component by javascript, just use DOM and be happy ;D
document.getElementById( 'myForm:myTable:0:myInput' ).value = "WE ROCKS";

[Nareshkumar Kapilavai]

Thanks for your valuble suggetions.
but here i am able to assign the value to input text.but in case of output text i am not able to assign the value.if i assign the value to input text id the modification is haapeening. but if i am trying to assign the value to out put text id it is not happening.
eventhow my Scenario in dataTable.. i am putting the button for every row. so when i clicking on the button that particular row values it is taking.

[Bauke Scholtz]

An inputText value can be submitted to the server. An outputText value is for display only. If you change that on the client side, the server side won't know anything about it.