I am using JSF 2.3 and Bootsfaces 3.3 in a small web application. I stumbled upon a scenario where Bootsfaces' <b:commandButton ajax=true ...> raises an exception while <h:commandButton>+<f:ajax> does not. Looking at the exception that gets raised Bootsfaces is not able to find the element with the given ID that should be updated in the render response phase ("ajaxUpdateMe" in the examples below).
I played around the xhtml page to nail down where the actual problem is and to me it looks like <ui:repeat ...> and an ajaxafied <b:commandButton> is not working well together.
This is the (stripped down version of the) xhtml page that I am using (minus <html> and <head> parts):
<h:body>
<b:form id="formTable">
<!-- iterate over list of objects -->
<ui:repeat value="#{testBean.list}" var="element">
<b:row>
<b:column><h:outputText id="ajaxUpdateMe" value="#{element.name}" /></b:column>
</b:row>
<b:row>
<b:column>
<!-- iterate over another list -->
<h:dataTable value="#{element.innerList}" var="inner">
<h:column>
<b:commandButton ajax="true" value="submit"
action="#{testBean.submit(element)}"
update=":#{component.namingContainer.parent.namingContainer.clientId}:ajaxUpdateMe"
process="#this" />
</h:column>
</h:dataTable>
</b:column>
</b:row>
</ui:repeat>
</b:form>
</h:body>
When I try to access the xhtml page through the browser (GET request) then an exception is immediately raised that looks like this (shortened for sake of brevity):
Caused by: javax.faces.FacesException: Invalid search expression: formTable:j_idt4:0:ajaxUpdateMe The subexpression 0 doesn't exist, or it can't be resolved. net.bootsfaces.component.commandButton.CommandButton formTable:j_idt4:0:j_idt9:0:j_idt13 Additional information: ID not found: 0 search expression: formTable:j_idt4:0:ajaxUpdateMe
at net.bootsfaces.expressions.ExpressionResolver.translateSearchExpressionToId(ExpressionResolver.java:143)
at net.bootsfaces.expressions.ExpressionResolver.getComponentId(ExpressionResolver.java:89)
at net.bootsfaces.expressions.ExpressionResolver.getComponentIDs(ExpressionResolver.java:50)
at net.bootsfaces.expressions.ExpressionResolver.getComponentIDs(ExpressionResolver.java:44)
at net.bootsfaces.component.ajax.AJAXRenderer.generateAJAXCallForClientBehavior(AJAXRenderer.java:582)
at net.bootsfaces.component.ajax.AJAXRenderer.generateBootsFacesAJAXAndJavaScript(AJAXRenderer.java:233)
at net.bootsfaces.component.ajax.AJAXRenderer.generateBootsFacesAJAXAndJavaScript(AJAXRenderer.java:177)
at net.bootsfaces.component.commandButton.CommandButtonRenderer.encodeBegin(CommandButtonRenderer.java:120)
at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:892)
at com.sun.faces.renderkit.html_basic.HtmlBasicRenderer.encodeRecursive(HtmlBasicRenderer.java:307)
at com.sun.faces.renderkit.html_basic.GroupRenderer.encodeChildren(GroupRenderer.java:114)
at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:918)
at com.sun.faces.renderkit.html_basic.HtmlBasicRenderer.encodeRecursive(HtmlBasicRenderer.java:309)
at com.sun.faces.renderkit.html_basic.TableRenderer.renderRow(TableRenderer.java:398)
at com.sun.faces.renderkit.html_basic.TableRenderer.encodeChildren(TableRenderer.java:161)
I replaced the command button from Bootsfaces with this code here:
<h:commandButton value="submit"
action="#{testBean.submit(element)}">
<f:ajax render=":#{component.namingContainer.parent.namingContainer.clientId}:ajaxUpdateMe"
execute="#this"/>
</h:commandButton>
Now the page loads fine and the command button does what it should do.
Checking the source of the html page in the browser I can see that the element that is mentioned in the exception message formTable:j_idt4:0:ajaxUpdateMe is actually there.
Did I hit a bug in Bootsfaces or am I doing something wrong? Does someone know a workaround where I can still use the command button from Bootsfaces?
It looks like BootsFaces ID resolver strugles with the 0 in formTable:j_idt4:0:ajaxUpdateMe. You can try to add an id="elements to the ui:repeat and then directly reference the target component via :formTable:elements:ajaxUpdateMe.
<h:body>
<b:form id="formTable">
<!-- iterate over list of objects -->
<ui:repeat id="elements" value="#{testBean.list}" var="element">
<b:row>
<b:column><h:outputText id="ajaxUpdateMe" value="#{element.name}" /></b:column>
</b:row>
<b:row>
<b:column>
<!-- iterate over another list -->
<h:dataTable value="#{element.innerList}" var="inner">
<h:column>
<b:commandButton ajax="true" value="submit"
action="#{testBean.submit(element)}"
update=":#formTable:elements:ajaxUpdateMe"
process="#this" />
</h:column>
</h:dataTable>
</b:column>
</b:row>
</ui:repeat>
</b:form>
</h:body>
My IDE does not suggest ui:repeat actually has an id attribute, but it somehow works for me.
Alternatively you can add a standard f:ajax to your button:
<b:commandButton ajax="true" value="submit" process="#this">
<f:ajax render=":#{component.namingContainer.parent.namingContainer.clientId}:ajaxUpdateMe" />
</b:commandButton>
I'm not sure if this is to be considered a bug. You may want to bring this up in their issue tracker
Related
I have xhtml with following structure:
<h:form id="frmMain2">
<f:subview id="sub1">
<ui:repeat var="vatId" value="#{someBean.suppliesKeys()}" id="rep1">
<fieldset>
<legend>vatId</legend>
<h:panelGroup id="panel">
<ui:repeat var="item" value="#{someBean.supplies[vatId]}" id="rep2">
<f:subview id="sub2">
<h:commandLink id="command">
${item}
<f:ajax
event="click"
render=":frmMain2:sub1:rep1:0:panel">
</f:ajax>
</h:commandLink>
</f:subview>
</ui:repeat>
</h:panelGroup>
</fieldset>
</ui:repeat>
</f:subview>
</h:form>
This is running in Websphere Portlet via portlet bridge which means I am stuck with Myfaces 2.0.
The problem I am facing is that I am getting following error:
javax.portlet.PortletException: Component with id::frmMain2:sub1:rep1:0:panel not found
Notice that I am trying to reference first iteration of panel inside f:ajax render (:frmMain2:sub1:rep1:0:panel).
If I referenced something else (outside iterated part), e.g. :frmMain2:sub1:rep1, component is found and portlet works.
I am unable to find how do I reference some iterated component in render attribute.
Found following post where this problem is described as resolved in Mojarra newer version, but Myfaces 2.2.7 does not solve the problem: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
So, Is there a way to reference the component I want to render in f:ajax?
Since you only want to render the first iteration, you could create a custom component, tag, or template that encapsulates the components that you are iterating over as a workaround:
<fieldset>
<legend>vatId</legend>
<h:panelGroup id="panel">
<ui:repeat var="item" value="#{someBean.supplies[vatId]}" id="rep2">
<f:subview id="sub2">
<h:commandLink id="command">
${item}
<f:ajax
event="click"
render=":frmMain2:sub1:rep1:0:panel">
</f:ajax>
</h:commandLink>
</f:subview>
</ui:repeat>
</h:panelGroup>
</fieldset>
Then you could hard code the first option. Here's some example code (you'll definitely need to adapt this since I don't have all the info about your model data):
<h:form id="frmMain2">
<f:subview id="sub1">
<custom:component id="first" items="#{someBean.supplies[hardcodedFirstKey]}">
<f:ajax event="click" render="#this" />
</custom:component>
<ui:repeat var="vatId" value="#{someBean.suppliesKeys()}" id="rep1">
<custom:component items="#{someBean.supplies[vatId]}" rendered="#{!key eq hardcodedFirstKey}">
<f:ajax event="click" render=":frmMain:sub1:first" />
</custom:component>
</ui:repeat>
</f:subview>
</h:form>
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 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?
The problem:
I have a MenuItem component that looks like this - <p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" /> - but it renders into markup that looks like this - <a href="documents.xhtml">
Details:
There are two XHTML pages at play here. The first is index.xhtml at /portal/index.xhtml and the second is admin-widget.xhtml at /portal/home/admin-widget.xhtml.
Relevant part of index.xhtml:
<ui:fragment rendered="...">
<div class="...">
<p:panel styleClass="...">
<f:facet name="header">
<h:outputText value="Administration" />
</f:facet>
<ui:include src="/portal/home/admin-widget.xhtml" />
</p:panel>
</div>
</ui:fragment>
Relevant part of admin-widget.xhtml:
<h:form style="...">
<ui:fragment rendered="...">
<p:menu style="...">
<p:submenu label="Administration Links">
<p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" />
</p:submenu>
</p:menu>
<h:link value="Documents" outcome="/portal/admin/documents.xhtml" />
</ui:fragment>
</h:form>
The <h:link> below the <p:menu> was just a test, in order to see if the problem was just with the <p:menuitem> or not. However, the <h:link> also renders incorrectly.
The most interesting thing is that when I view the index.xhtml page, the link is incorrect, but if I view the admin-widget.xhtml page directly, the link is correct. So it has to be something with how I am inserting the page, but I'm not sure what I am doing wrong.
I am using PrimeFaces 5.3 and JSF 2.0.
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?