Just saw a lot of questions envolving "update", "#all", "#form", but no one solved a situation here in my application.
I got a custom JSF tag called threadList with:
<h:form>
<h:panelGroup>
<p:commandButton action="#{Bean.action(catId, id)}" icon="ui-icon-weblibrary ui-icon-weblibrary-like" title="Start" update="#form" value="#{Bean.threadName}" />
</h:panelGroup>
</h:form>
This custom tag is inserted by another custom tag like this:
<ui:repeat value="#{Bean.threadList}" var="thread">
<ui:include src="threadList.xhtml">
<ui:param name="catId" value="..." />
<ui:param name="id" value="..." />
</ui:include>
</ui:repeat>
Sometimes this can be a result of an update in the second taglib and via ajax.
And here's the thing...
When I set update="#form" in the p:commandButton everything works fine but in my log I see a "Cannot find component with identifier "j_idt70:0:j_idt82" in view.";
When I set update=":#form" or update=":form" the "Cannot find component with identifier "j_idt70:0:j_idt82" in view." disappears, but the event doesn't update anything (even if the action runs with success);
Finally, when I give form and panelGroup an id and try update=":formId:panelId" or update=":#formId:panelId" or update=":formId" the message "Cannot find component with identifier "j_idt70:0:j_idt82" in view." appears and nothing is uptade.
The curious is that there's no in browser's source code. So, I don't know if this "ghost" j_idt70 is corrupting all the ids and update commands.
I tried all the things I learned in old questions in stack overflow before asking you again about this.
Thanks a lot for reading and the attention.
The code given so far works just fine for me on Mojarra 2.1.9 and PrimeFaces 3.3.
If you upgrade to the latest versions as well, then your problem should most likely be solved.
Related
When submitting a form that includes a required inputText, the styles that indicate not validated fields remain in place until submitting again. I want the styles to disappear as soon as the field is edited.
<p:inputText value="#{data.bezeichnung}"
id="bezeichnung"
styleClass="panelInputField input_mandatory"
required="true"
title="Bezeichnung"/>
After a lot of trying around, I found the easiest answer to add a "onkeyup" as follows:
<p:inputText value="#{data.bezeichnung}" id="bezeichnung"
styleClass="panelInputField input_mandatory"
required="true"
onkeyup="$(this).removeClass('ui-state-error');"
title="Bezeichnung"/>
If the jquery code needs to be in a more general place, the following might work as well: (it may be helpful to know the escaping codes used here)
onfocus="$('.ui-state-error').removeClass('ui-state-error');"
onkeyup="$('input[name="form:bezeichnung"]').removeClass('ui-state-error');"
onkeyup="$('input[name$=bezeichnung]').removeClass('ui-state-error');"
The following bit of code doesn't add jquery-plugins.js:
<p:lightBox styleClass="imagebox">
<h:outputLink value="../resources/images/car.png">
<h:graphicImage value="/resources/images/car.png" />
</h:outputLink>
</p:lightBox>
This code does add jquery-plugins.js:
<p:lightBox styleClass="imagebox">
<h:outputLink id="tip" value="../resources/images/car.png">
<h:graphicImage value="/resources/images/car.png" />
</h:outputLink>
</p:lightBox>
<p:tooltip for="tip"></p:tooltip>
This tooltip has just been added for testing purposes and isn't needed in production. However, it seems that removing it will also break my p:lightBox (since jquery-plugins.js) won't be included anymore.
I am using templating (ui:insert, ui:define), the template does use h:head and h:body. Does anyone know how to fix this (so how to automatically include jquery-plugins.js with just p:lightBox)?
Note that I have tried multiple versions of Primefaces in which this occurs.
Does anyone know how to fix this (so how to automatically include jquery-plugins.js with just p:lightBox)?
It's a bug in their LightBox component. The resource dependency on jquery-plugins.js is missing. See the source code:
#ResourceDependencies({
#ResourceDependency(library="primefaces", name="primefaces.css"),
#ResourceDependency(library="primefaces", name="jquery/jquery.js"),
#ResourceDependency(library="primefaces", name="primefaces.js")
})
public class LightBox extends UIComponentBase implements org.primefaces.component.api.Widget {
They have to fix it themselves by adding the desired #ResourceDependency. Report an issue to PrimeFaces.
In the meanwhile, you can workaround it by just explicitly including it in master template.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" />
Okay, so I have read through stackoverflow and various other portions of the net for a few days, and have not found a solution yet that fixes my issue.
Basically, I have an h:form in a p:dialog with two required fields. When the fields are both filled in, the form successfully submits and the dialog closes. When either or both fields are left blank, required field validation fails and updates the h:messages component in the p:dialog with the appropriate required messages. However, also when validation fails, the AJAX call seems to never "finish" and prevents subsequent calls from being executed. This is seen evident by my p:ajaxStatus component never disappearing from the screen, indicating that something is hanging somewhere. This is remedied by refreshing the page, at which point all other AJAX components begin to function again.
Additionally, I will note that this p:dialog is in a ui:define in a ui:composition, that dumps it into a master template. It is not nested within another h:form.
<p:dialog id="dlgDecision"
header="Decision"
widgetVar="dialogDecision"
modal="false"
resizable="false"
appendToBody="true">
<h:form id="fDlgDecision">
<h:messages id="msgDlgDecision" binding="#{msgform.messages}" errorClass="errormsg" infoClass="infomsg1" layout="table"/>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'A'}">
<h:outputText value="Select an accept and admit code."/>
</h:outputFormat>
<h:outputFormat rendered="#{studentdetailsform.decisionAction == 'C'}">
<h:outputText value="Select a cancel and reason code."/>
</h:outputFormat>
<h:panelGrid columns="1">
<h:selectOneMenu id="apdcCode"
value="#{studentDetails.apdcCode}"
required="true"
requiredMessage="Please choose a decision code.">
<f:selectItem itemLabel="Select Decision Code"/>
<f:selectItems value="#{apdcCodes.apdcCodeList}"
var="apdc"
itemValue="#{apdc.apdcCode}"
itemLabel="#{apdc.apdcCode} - #{apdc.apdcDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="admtCode"
value="#{studentDetails.admtCode}"
required="#{studentdetailsform.decisionAction == 'A'}"
requiredMessage="Please choose an admit code."
rendered="#{studentdetailsform.decisionAction == 'A'}">
<f:selectItem itemLabel="Select Admit Code"/>
<f:selectItems value="#{admtCodes.admtCodeList}"
var="admt"
itemValue="#{admt.admtCode}}"
itemLabel="#{admt.admtCode} - #{admt.admtDesc}"/>
</h:selectOneMenu>
<h:selectOneMenu id="wrsnCode"
value="#{studentDetails.wrsnCode}"
required="#{studentdetailsform.decisionAction == 'C'}"
requiredMessage="Please choose a reason code."
rendered="#{studentdetailsform.decisionAction == 'C'}">
<f:selectItem itemLabel="Select Reason Code"/>
<f:selectItems value="#{wrsnCodes.wrsnCodeList}"
var="wrsn"
itemValue="#{wrsn.wrsnCode}"
itemLabel="#{wrsn.wrsnCode} - #{wrsn.wrsnDesc}"/>
</h:selectOneMenu>
<p:commandButton id="decisionSubmit"
value="Submit Decision"
type="submit"
action="#{mainform.saveDecision}"
ajax="true"
partialSubmit="true"
process="#form"
update="#form msgDlgDecision"
oncomplete="if (!args.validationFailed) dialogDecision.hide()"/>
</h:panelGrid>
</h:form>
</p:dialog>
Some things I have already done in my debugging and troubleshooting:
- Moved the h:form into the p:dialog
- Made the backing bean with the values for the rendered attribute on the required fields ViewScoped (was having an issue with only some of the required messages showing, this resolved this problem)
- Added appendToBody="true" to p:dialog
- Added if (!args.validationFailed) to the oncomplete event of p:dialog
- Tried making the required fields NOT conditional (removed rendered attributes) to be sure this wasn't being caused by failed validation on non-rendered components (grasping at straws...)
EDIT: Here is a console dump from Chrome. Javascript error gets thrown when submitting the form with null required fields.
Uncaught SyntaxError: Unexpected token { jquery.js:14
bG.extend.parseJSON jquery.js:14
PrimeFaces.ajax.AjaxUtils.handleResponse primefaces.js:1
PrimeFaces.ajax.AjaxResponse primefaces.js:1
j.success primefaces.js:1
bZ jquery.js:14
b7.fireWith jquery.js:14
ca jquery.js:21
bZ
EDIT 2: Below are the only two JavaScript imports, both of which are in my template that is applied to the page via the ui:define and ui:composition mentioned above.
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<script type="text/javascript" src="#{request.contextPath}/resources/scripts/jscript.js" />
The first import will force Primefaces to import jQuery into the page, even if there are no components on the page that utilize JavaScript. This is to allow my custom scripts in jscript.js to use jQuery reliably.
Other information:
JSF 2.1
Primefaces 3.4.2
Tomcat 6.0
Don't import jQuery.js manually as this is already done implicitly by PrimeFaces (it uses jQuery under the hood). You can remove that line.
Also you should see some examples of importing your custom js files with h:outputScript like this for example:
<h:outputScript library="scripts" name="jscript.js" />
but this is probably not reason of your problem, this is just hint for better JSF design.
A similar error showed up in Google Chrome, today, after I downloaded PrimeFaces 4.0 snapshot (2013-05-09) and tested my app.
Basically, I had to remove single quotes from data sent from bean to p:schedule via JSON. Since the error mentioned 'parse JSON' and "unexpected '" (unexpected single quote), I went to the datatable view of my data (instead of p:schedule) and recognized that some of the data had single quotes embedded. So, I removed the single quotes from the data, and that solved the issue for me.
Please click forum topic URL below.
PF 4.0 SNAPSHOT 2013-05-09: schedule not working
I've had the exact same problem at my application. The real problem was a duplicate jar problem.
I've had two primefaces jar in my application, one under the WEB-INF/lib directory, and the other under the ear/lib directory. Once I deleted the one under the WEB-INF, everything started to work as expected.
You could find the solution on the net via a search for the js exception.
Having this lines of code:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="filterWindowDiv tableX" listener="#{beanX.reset}" />
</h:commandLink>
and as well as with:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="#all" listener="#{beanX.reset}" />
</h:commandLink>
an unknown error will be thrown in Internet Explorer 8:
Object doesn't support this property or method pageX.jsf, line1 character 7
The h:commandLink is within a o:window (OpenFaces 3).
However, I do get the same error if I am using the same lines of code for example for a Delete button which shows after invoking a bean method a o:popupLayer.
Any ideas? Thank you in advance!
I've had JavaScript code within my div which must be rendered adhoc while re-render a part of the page. However, it seems IE cannot handle that issue while FF don't mind. I think to remember I've read something something about this. Anyway, since I've removed the JavaScript error is gone.
But how to invoke my JavaScript code after rendering? I've solved it like this example:
<h:commandLink value="Reset Filter" styleClass="button">
<f:ajax event="click" render="#all" listener="#{beanX.reset}"
onevent="callback" />
</h:commandLink>
Callback method:
function callback(data) {
data.status == "success") {
// your JavaScript code
}
}
Thanks again for all your help!
The problem here lies with click event of <h:commandLink>
Don't know the possible cause, but using mousedown will hopefully solve your problem.
I have JSF page has two drop down lists and I want to load the second one with values based on what was chosen in the first one. However, the "onchange" event is only detected the second time I change the selection!
Web page Code snippet:
<h:form id="selectRegion">
<h:selectOneMenu id="governorate"
value="#{SearchView.governorate}"
styleClass="mediumInput" immediate="true"
valueChangeListener="#{SearchView.goverValueChanged}"
onchange="submit();">
<f:selectItems value="#{SearchView.goverItemsList}" id="govItems" />
</h:selectOneMenu>
<h:selectOneMenu id="district"
value="#{SearchView.district}"
styleClass="mediumInput">
<f:selectItems value="#{SearchView.districtItemsList}" id="distItems" />
</h:selectOneMenu>
</h:form>
<h:form id="SearchFor">
<hx:commandExButton
id="button1" styleClass="btn" type="submit"
value="Search" action="#{SearchView.searchAction}"
onclick="document.getElementById('selectRegion').submit();">
</hx:commandExButton>
</h:form>
The problem is that goverValueChanged(ValueChangeEvent event) is invoked only when I modify the value of the governorate for the second time but not for the first time (I put system out in goverValueChanged(ValueChangeEvent event) to know that).
Does anyone have an idea regarding what might be wrong? Thanks in advance! I am using JSF 1.1 and run on IBM WAS
It has been a long time ago I fighted with IBM and JSF 1.1 for last time, but I vaguely recall some ancient JSF 1.1 bug which caused that the valueChangeListener won't be fired when the initial value is null. I'd suggest to set the initial value (the property behind value="#{SearchView.governorate}") to an empty string or to something else.
You can of course also upgrade JSF 1.1 to the latest build JSF 1.1_02. It has pretty a lot of functional bugfixes, maybe it will also fix this (and other) problems. IBM WAS 5.x namely ships with a very early version of JSF 1.1 which is cluttered of some odd bugs like that. Or maybe you're using IBM WAS 6.x, then you can also dump JSF 1.1 altogether and go for the much improved JSF 1.2. You can download JSF libraries from the archives right here.