I want to include a popup inside a form. The normal way to do that is to have 2 forms like:
<div class="wrapper" >
<h:form>
<h:panelGroup id="id1" layout="block">
<ui:include src= content1 />
</h:panelGroup>
</h:form>
</div>
<h:form id="modalId">
<ui:include src= popupContent >
</ui:include>
</h:form>
and render with a button inside content1, the form "modalId" that contains the popUp.
I have the popup form in an external component that is included inside "content1". Due to the popup form is inside the other form,it isnt well rendered. How can I fix that? The idea is to use that component that is common for all my xhtml views
The way i was writing my own components was to rely on the existance of the external form. That is, i did not include any form elements inside the component.
If there was a need to reference the outer form element then i would just pass the from id as one of the attributes of the interface. Composite components are really useful for this kind of stuff:
<composite:interface>
<composite:attribute name="formId" type="java.lang.String" />
</composite:interface>
<composite:implementation>
<h:commandButton value="button" action="someaction">
<f:ajax execute="#{cc.attrs.formId}" render="#{cc.attrs.formId}" />
</h:commandButton>
</composite:implementation>
Then you include that in your outer form (assuming 'comp' is your namespace for composite components and 'modal' is the name of the file containing the component):
<h:form id="myForm">
<comp:modal formId="myForm"/>
</h:form>
Go through this tutorial if you are not familiar with them:
http://docs.oracle.com/javaee/6/tutorial/doc/giqzr.html
I have following code:
<ui:repeat var="class2" value="#{bean.list}" varStatus="status">
<h:form id="#{class2.name}">
<h:outputText value="#{class2.name}" />
</h:form>
</ui:repeat>
However, when I open the page, it errors as follows:
component identifier must not be a zero-length String
But it is properly printed in the <h:outputText>. How is this caused and how can I solve it?
You can use EL in the id attribute of a JSF component, but the EL variable has to be available during view build time, while the JSF component tree is to be built. However, the <ui:repeat> runs during view render time, while the HTML output is to be generated based on JSF component tree. The <ui:repeat var> is not available during view build time and #{class2.name} evaluates to null which totally explains the error you got. That it works in <h:outputText> is because it runs during view render time.
If you replace <ui:repeat> by <c:forEach>, which runs during view build time, then it'll work as you intented. The <c:forEach> will namely generate physically multiple <h:form> components in the JSF component tree which each generate individually their own HTML output (in contrary to <ui:repeat>, wherein the very same <h:form> component is been reused multiple times to generate HTML output).
<c:forEach var="class2" items="#{bean.list}" varStatus="status">
<h:form id="#{class2.name}">
<h:outputText value="#{class2.name}" />
</h:form>
</c:forEach>
However, I really wonder why you need to do that. There's usually no need to dynamically assign component IDs. JSF will already ensure the uniqueness of the ID. The below example,
<ui:repeat var="class2" value="#{bean.list}" varStatus="status">
<h:form id="form">
<h:outputText value="#{class2.name}" />
</h:form>
</ui:repeat>
will end up in multiple forms with each an unique ID, suffixed with iteration index of the <ui:repeat>. If you actually need to use #{class2.name} for some JavaScript/jQuery purposes (you did nowhere state the concrete functional requirement in the question for which you thought that this would be the right solution, so it's merely guessing), then just wrap it in a plain vanilla HTML element:
<ui:repeat var="class2" value="#{bean.list}" varStatus="status">
<div id="#{class2.name}">
<h:form id="form">
<h:outputText value="#{class2.name}" />
</h:form>
</div>
</ui:repeat>
Or set it as style class of a JSF component, which is also just selectable via a CSS selector:
<ui:repeat var="class2" value="#{bean.list}" varStatus="status">
<h:form id="form" styleClass="#{class2.name}">
<h:outputText value="#{class2.name}" />
</h:form>
</ui:repeat>
See also:
JSTL in JSF2 Facelets... makes sense?
I am using JSF 2.1. I'm trying to use TinyEditor on a <h:inputTextarea>. Here is my code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<h:outputStylesheet library="css" name="editor_style.css" />
<h:outputStylesheet library="css" name="css/main.css" />
<h:outputStylesheet library="css" name="css/dropdown.css" />
<h:outputScript name="js/tinyeditor.js"></h:outputScript>
</h:head>
<h:body>
<div class="content">
<ui:include src="/template/layout/commonLayout.xhtml" />
<ui:include src="/template/layout/menu.xhtml" />
<h:form>
<div class="quick_links">
<div class="q_title">
</div>
<div class="q_window">
<div class="q_top"></div>
<div class="q_main">
<h:inputTextarea value="#{EditorBean.value}" id="input"
style="width:100%; height:300px;">Sample FAQ</h:inputTextarea>
<h:outputScript>
new TINY.editor.edit('editor',{
id:'input',
width:945,
height:175,
cssclass:'te',
controlclass:'tecontrol',
rowclass:'teheader',
dividerclass:'tedivider',
controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
'font','size','style','|','hr','link','unlink'],
footer:true,
fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
xhtml:true,
cssfile:'style.css',
bodyid:'editor',
footerclass:'tefooter',
toggle:{text:'Source',activetext:'HTML',cssclass:'toggle'},
resize:{cssclass:'resize'}
});
</h:outputScript>
</div>
<div class="q_bottom"></div>
</div>
<h:commandButton value="Savebutton" action="#{EditorBean.test}"></h:commandButton>
</div>
<div class="push"></div>
</h:form>
</div>
</h:body>
</html>
If I remove the <h:form> tag, then only editor gets displayed, but the <h:commandButton> doesn't work.
If I keep the <h:form> tag, then the <h:commandButton> works, but the TinyEditor editor does not get initialized.
How is this caused and how can I solve it?
The <h:outputScript> works perfectly fine. The concrete problem is just in your own JavaScript code. You specified an ID of "input" in the TinyEditor configuration script:
id:'input',
However there is no such HTML element with that ID in the JSF-generated HTML output. Yes, you should be looking at the JSF-generated HTML output, because that's basically all what the browser is retrieving. JavaScript does not run in webserver, but in the webbrowser and sees the JSF-generated HTML output only. Rightclick page in browser and do View Source to see it yourself as well.
The generated ID of the <h:inputTextarea> has in this particular construct the ID of the <h:form> prepended. In your particular case, you didn't specify any ID for the <h:form>, so JSF will autogenerate one like so j_id123 so that the HTML element ID of the <textarea> as generated by <h:inputTextarea> will become j_id123:input. You need to specify exactly that ID in the TinyEditor configuration script.
However, better is to specify a fixed ID on the <h:form>, as the autogenerated ID may change whenever you add/remove components to the view.
<h:form id="form">
<h:inputTextarea id="input" />
...
This way the generated <textarea> will get an ID of form:input. Then you can just use it in the TinyEditor configuration script:
id:'form:input',
I have problem with organizing forms. When I make one form some buttons (or any other components making ajax calls) don't perform action but they do perform update. When I split the form into two new ones the buttons start working.
In this case buttons and autocomplete don't work.
<h:form styleClass="question-#{cc.attrs.question.id}">
...
<p:commandButton value="add answer" update="#form" action="#{questionEditorBean.addAnswer}" />
<p:commandButton value="save" update="#(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
<p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />
<p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"
var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
<p:ajax event="itemSelect" action="#{action}" update="#form"/>
</p:autoComplete>
</h:form>
When I split the form everything works.
<h:form styleClass="question-#{cc.attrs.question.id}">
...
<p:commandButton value="add answer" update="#form" action="#{questionEditorBean.addAnswer}" />
<p:commandButton value="save" update="#(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
<p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />
</h:form>
<h:form>
<p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"
var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
<p:ajax event="itemSelect" action="#{action}" update="#form"/>
</p:autoComplete>
</h:form>
I don't have nested forms. I am running to this problem all the time. I don't understand this behaviour and I don't want to split buttons and components into more forms when they should be conceptually together. Is there a solution?
You could try giving the form an id and set prependId="false", as in this example:
<h:form id="ccForm" prependId="false">
Then you add the form id to all update targets.
<p:ajax event="itemSelect" action="#{action}" update="ccForm:tagSelect" />
This way you make explicit what are the update targets inside your composite component.
Also I noticed that you're trying to use styleClass as an id in your form, and trying to update it. Following this way I suggested, make its update property look like this:
<p:commandButton value="save" update="ccForm:question-#{cc.attrs.question.id}" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
I hope it helps.
I'm doing a simple search engine for my web app and I'm facing a problem.
My search.xhtml works by getting a parameter, so that search.xhtml?key=lol will return the results for "lol".
What I need to do is that my search commandButton will redirect do search.xhtml?key=INPUT TEXT CONTENT.
Here's my simple code :
<div id="searchBox">
<pou:panel id="searchPanel">
<h:form>
<h:inputText id="searchInput" value="#{dispensaRicercaBean.query}" size="99" maxlength="99"/> <pou:commandButton icon="ui-icon-search" action="ricerca?faces-redirect=true"/>
<pou:watermark value="Search" for="searchInput"/>
</h:form>
</pou:panel>
</div>
where dispensaRicercaBean is #RequestScoped and my result page loads the data calling executeQuery(#{request.getParameter('key')) (a rough example, actually there are some differences)
How can I do that?
Use a plain HTML <form>
<form action="ricera.xhtml">
<h:inputText id="key" size="99" maxlength="99" />
<pou:watermark value="Search" for="key" />
<pou:button icon="ui-icon-search" onclick="submit(); return;" />
</form>