Sorry JSF is not my main language
I have a JSF Composite Component named validatedInputTextQuestion. It's essentially a bold label, then a textbox on first line.. next line is a note about said inputText, and below that is where my validation message would show.
<cc:implementation>
<b>#{cc.attrs.questionLabel} : </b>
<h:inputText value="#{cc.attrs.bindingValue}" id="checkSpecs" required="#{cc.attrs.required}" size="15" label="#{cc.attrs.errorLabel}">
<f:validateLength minimum="#{cc.attrs.minLength}" maximum="#{cc.attrs.maxLength}" />
</h:inputText>
<br />
<b>#{cc.attrs.notes}</b>
<br />
<h:message for="checkSpecs" style="color:red" />
<br />
</cc:implementation>
not all instances of this template have a note. but when I test out this page there is a extra break above my error message. Which is to be expected as that is what my template does... What i'd like to know is if there is a dynamic way of having this note attribute take up space if there is data.. I know in Silverlight I could use a grid and set a row definition height of Auto... or use a boolean to visibilty converter, but i can't find the equivalent in JSF. Can someone help point me to a solution for this?
Related
I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");
So I'm working through validating my forms in asp.net and I noticed the rendered form input elements are changing the "name" attribute from something like name="firstName" to name="ctl00$ContentPlaceHolder1$txtFN".
It appears to be grabbing the id of the input element as well as some other text which at this point I can't entirely make sense of.
For reference:
this is the rendered element -
<input name="ctl00$ContentPlaceHolder1$txtEmail" type="text" id="ContentPlaceHolder1_txtEmail" class="reqT">
and this is what I am setting up initially -
<asp:TextBox ID="txtFN" class="reqT" runat="server" name="firstName"></asp:TextBox>
Would anyone be able to clarify:
- the significance of this insert
- is it changeable, and if so what sort of effects does this have
Thanks!
ASP.NET does that to insure completely unique names on input elements. You can disable it by changing the ClientIDMode to Static.
Scott Gu explains a few ways to do that here: http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx
I personally find the web.config option to be the easiest:
<system.web>
...
<pages clientIDMode="Static" />
...
</system.web>
I am developing a Web page on struts2 If I am correct theme in Struts2 is set such that all the tags will eventually be inside a table so all tags will be aligned one below other.
In My web page i have login page with Submit and Reset button I want both side by side (next each other) rather than in separate line.I Tried googling i got some answer like { display : inline; } in CSS and also { position : float} and theme="simple" in form. Nothing worked
<table><tr><td><s:submit method="CheckUser" value="Login" align="center" /></td><td><s:reset value="Clear" align="center" /></td></tr>
In case if i set i get the 2 buttons(submit+reset) as required
but though label="User Id" is given i get only text field without label
<tr><td><s:textfield name="userid" label="User Id" size="25" /></td></tr>
<tr><td><s:password name="password" label="Password" size="25" /></td></tr>
Please do suggest me where I am going wrong and how to get both label to text field and also submit_Reset button side by side
Just leave default Struts2 theme, which is xhtml by the way, as it is and change only your <s:submit> and <s:reset> tags adding to them theme attribute with value simple.
<s:form>
...
<tr>
<td colspan="2">
<s:submit value="Login" theme="simple"/>
<s:reset value="Clear" theme="simple"/>
</td>
</tr>
</s:form>
In struts.xml set the theme to simple
<struts>
...
<constant name="struts.ui.theme" value="simple" />
...
<struts>
Now things will work as you expect.
The theme can also be scoped in other ways if you don't want the simple to to be default (page and per tag are common) see here: http://struts.apache.org/2.3.8/docs/selecting-themes.html
I have a JSF2 application and a page with the following code:
<h:inputText id="someInput" required="true" />
<p:outputPanel id="itemsPanel">
<ui:repeat var="i" value="#{myBean.itemIndices}" id="items">
<h:inputText
id="itemInput"
value="#{myBean.dataItems[i]}"
/>
<h:panelGroup
layout="block"
styleClass="clear"
rendered="#{((i+1) % 10 == 0)}"
/>
</ui:repeat>
</p:outputPanel>
<br/>
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
update="itemsPanel"
immediate="false"
ajax="true"
/>
The ui:repeat is dynamically rendering a number if text boxes depending on the itemIndices and dataItems properties. The "Add Row" button calls a method that will dynamically increase the number of itemIndices and dataItems, therefore additional text inputs appear.
The current code will not work if there is no value in the text box someInput, because the AJAX request also validates the form and validation fails. Pressing the button in this case has no visual effect, not even feedback for the user that validation did not pass (because I update itemsPanel only).
If I change the button to have immediate="true", then the validation issue is no more. Unfortunately, I want to be able to restore the values of the dynamic input fields that the user might have changed prior adding the new row. The immediate="true" attribute causes the form not to be submitted to the server, therefore the user-entered data will not be persisted.
A possible solution to this could be to add process="all dynamic input ids csv" attribute to the command button and set the immediate attribute back to true. This will cause the server to validate only the inputs specified in the process attribute and they will be persisted. The problem here is that these input ids are dynamically generated by JSF and I cannot come up with a proper way to get them as a CSV. I would also not prefer a solution for dynamically generating ids in myBean relying on assumptions of how JSF would output them.
All suggestions will be greatly appreciated.
You could use process="itemsPanel".
<p:commandButton
classStyle="btn"
value="Add Row"
actionListener="#{myBean.increaseItemsCount}"
process="itemsPanel"
update="itemsPanel"
ajax="true"
/>
You should only move the command button into <h:outputPanel id="itemsPanel">.
I am using the following rich:editor control to create a new message. I choose Heading 1 under Format drop down and entered some text and persist the entry. But when I try to edit the message it fails with the following error on load. How should I fix this issue?
An error occurred during conversion seam text to html
<s:decorate template="/layout/edit.xhtml">
<ui:define name="label">Message</ui:define>
<rich:editor required="true" id="messageField" theme="advanced" useSeamText="true" viewMode="visual" autoResize="true" value="#{newsHome.instance.message}">
<f:param name="theme_advanced_buttons1" value="newdocument,separator,cut,copy,paste,separator,bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,hr,removeformat,visualaid,separator,sub,sup"/>
<f:param name="theme_advanced_buttons2" value="bullist,numlist,separator,outdent,indent,blockquote,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,code,separator,forecolor,backcolor"/>
<f:param name="theme_advanced_buttons3" value="fontselect,fontsizeselect,formatselect,styleselect,separator,charmap"/>
<f:param name="theme_advanced_resizing" value="true"/>
<f:param name="theme_advanced_toolbar_location" value="top" />
<f:param name="theme_advanced_toolbar_align" value="left" />
</rich:editor>
</s:decorate>
That sounds like a problem we had with rich:editor whenever someone entered content with an odd number of underscores. It was caused by a bug in RichFaces, and we fixed it by upgrading RichFaces to 3.3.3.