Displaying a value in <h:outputText> when some event occurs

[Avinash Bhat]

Hi,

I have one requirement where when i click on the attribute i would like to create an action and display the same in OutputText.

Ex:

This is Attribute Description outputText :

<rich:columnGroup id="CMAttributeBrowserDescriptionRow2">
								<rich:column id="CMAttributeBrowserDescriptionColumn2" styleClass="selectedObj"
									rendered="#{CMBrowserBean.attributePresent}" >
									<!--<h:outputText id="SelectedObjectDescription1" render="true" value="#{currentAttribute.value}"/>-->
									[b][quote]<h:outputText  styleClass="attributeTableFont1" readonly="false" id="attributeTextdescription" disabled="false"/>[/quote][/b]
								</rich:column>
							</rich:columnGroup>

The action should be for :

<rich:column  id="AttributeColumn2" styleClass="parentBrowserColumn">
											[b]<a onclick="document.getElementById('CMBrowser:0:CMAttributeBrowserDescriptionForm:attributeTextdescription').value=#{currentAttribute.name}" >[/b]<h:outputText id="AttributeName" title="#{currentAttribute.name}" value="#{currentAttribute.name}"
													styleClass="attributeValueFont" /></a>
											</rich:column>

I am unable to get the text coming on outputText, when i click on the above attribute.

[Tim Holloway]

I am not sure what that is supposed to look like to the user.

However, your outputText element with ID "attributeTextdescription" has no value, so it's not going to display anything. I'm not sure, in fact that it will even generate the <span> element that is used to hold the CSS info for the outputText. So I'd recommend putting in a value="" attribute as a placeholder.

One thing that can help a lot when debugging JavaScript in a JSF page is if you take complex javascript and wrap it in a javascript function. For quick-and-dirty function definitions, you can put them in a construct like this:
<f:verbatim><script><![CDATA[ function setAttributeValue(attrValue) { var destElement = document.getElementById('CMBrowser:0:CMAttributeBrowserDescriptionForm:attributeTextdescription'); destElement.value=attrValue; // ]]></script></f:verbatim>

The verbatim tags permit JSF to pass through their body unmodified. The CDATA ensures that the XML parser won't get confused if "magic" xml characters such as ">" or "'" appear in the javascript expressions.

That results in the much simpler column definition:

<rich:column  id="AttributeColumn2" styleClass="parentBrowserColumn">  
      <h:outputText id="AttributeName"
            title="#{currentAttribute.name}"
            value="#{currentAttribute.name}"  
            onclick="setAttributeValue('#{currentAttribute.name}');" 
            styleClass="attributeValueFont" />
</rich:column> 

When you do this, you can set breakpoints and use your javascript debugger to see what's happening. Note that I got rid of the raw HTML <a> tag, since the onclick works just as well on the outputText element.

I think, actually that your problem is that you didn't put quotes around #{currentAttribute.name} in your element value assignment, which would generate code expecting #{currentAttribute.name} to be the name of a javascript variable instead of a literal value like you wanted. But the trick I just described will make it easier to debug.

[Avinash Bhat]

My XHTML looks something like this:

<a onclick="onAttributeClick('#{currentAttribute.name}')" 
style="cursor: pointer; text-decoration: underline; ">
<h:outputText id="AttributeName" title="#{currentAttribute.name}" value="#{currentAttribute.name}" styleClass="attributeValueFont" />
</a>

Java script:

function onAttributeClick(id){
document.getElementById('CMBrowser:0:CMAttributeBrowserDescriptionForm:attributeTextdescription').value="The current attribute selected is = " +id;
}

Question:

When user clicks on the Attribute, I have a function in jsp file ( CMBrowserBean.java)  This must be called.
Function:

      //Reading attribute
      
      public String readAttribute(String id){
            CMBAdaptationData cmbData = new CMBAdaptationData();
            String str = cmbData.getAttributeDetails(id);
            return str;
      }

So here I want to pass the attribute clicked to this JSP file, and get the id of the attribute (attribute name) like shown above…

And that readAttribute(), returns the string,,,, I want to display back this returned string in another inputTextarea field.

Another inputTextarea field is this:

<h:inputTextarea value ="Displays the annotations of the attribute." readonly="true" rows="25" cols="80" style="resize:none; color:#0000FF; background-color:#F0F0F0; border:solid 1px #e0e0e0;margin-bottom:8px; margin-top:8px; overflow:hidden;" id="attributeTextdescription"/>

So basically:

When user clicks on the Attribute, it should go to JSP method, the returned value must be back to XHTML file and I will display that in inputTextArea.


How do I do this?

[Tim Holloway]

Your terminology appears to be scrambled. You refer to something you call a "JSP file", but the sample is java code like I'd expect to find in a backing bean. If you're expecting to invoke a method in a backing bean when you click on an item in the View, you'll need to set up an AJAX event in the View Definition. Or alternatively, expect it to refresh the entire page.

JSPs are not used in JSF version 2, incidentally. The View Template Language/View Definition Language for JSF2 is the facelets xhtml.