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.
Related
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.
I'm in the process of migrating our primary application from Seam 2.2 to Seam 2.3beta1, in order to get some of the benefits of JSF 2.0 and JPA 2.0. For the most part, it's going smoothly. However, some of the Ajax changes in JSF 2.0 and Richfaces 4.x are proving to be problematic in porting the code.
I have a series of components that are populated based on the contents of the others. For example, the first menu selects the item category. When a value is selected, the subcategories of that category are retrieved from the database and act as the selection items for the second menu. This entire process is Conversation scoped. Currently, the code looks like this:
<h:selectOneMenu value="#{newObjAction.category}"
required="true"
requiredMessage="You must select a category"
style="width:300px;">
<s:selectItems var="cat"
value="#{newDesignAction.designCategories}" label="#{cat.name}"
noSelectionLabel="Select a category..."
hideNoSelectionLabel="true" />
<s:convertEntity />
<a:support event="onchange" reRender="subCategoryPanel"
limitToList="true" ajaxSingle="true" status="subCategoryStatus" />
</h:selectOneMenu>
This works with no problem in Seam 2.2 with JSF 1.2. However, has been removed from JSF 2.0. I've tried something like this in its place:
<f:ajax listener="#{newObjAction.handleCategoryChange}">
It fires the event as expected, but there's one large problem: it is not propagating the conversation. As a result, when the listener object is about to be called it is intercepted and the user is redirected to the defined no-conversation-view-id from pages.xml. Is there any way to propagate the conversation when using <f:ajax />? Is there a better way to accomplish this? At this point the entire migration is at a stand still, as this is a major component in the application.
I'd REALLY appreciate any help or advice.
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.
I am developing web application using JSF richfaces.I have one rich:modalpanel in main templete. This modalPanel have 'Your request is processing....." message.
I want to show this message(modalPanel) every action(ajax request). But without using a4j:status element.
Is there possible to acheive this(using listener or any otherway)?
How to show the wait modalPanel for all action using listener?
Help me about this.
Thanks in advance.
Update :
If i use my main templete,
<a4j:status id="waittingMessage"
onstart="javascript:Richfaces.showModalPanel('progressWaitModalPanel');"
onstop="javascript:Richfaces.hideModalPanel('progressWaitModalPanel');"/>
And i call the above a4j:status for the following places :
The following each and every component i use more than 100 place in my application
<a4j:commandButton status="waittingMessage"/>
<a4j:commandLink status="waittingMessage"/>
<h:selectOneMenu><a4j:support status="waittingMessage"/> </h:selectOneMenu>
<h:selectOneRadio><a4j:support status="waittingmessage"/></h:selectOneRadio>
<h:selectBooleanCheckbox><a4j:support status="waittingmessage"/></h:selectBooleanCheckbox>
In future,
i don't need to show the progressWaitModalPanel, that time i will delete a4j:status
in main templete.
But what about this status="waittingMessage"? Because this status="waittingmessage" i added more than 1000 places in my whole application.
<a4j:status> is the proper way to do this. I don't know of any other way. Perhaps you can hook to some low-level javascript, but that would be the wrong thing to do.
If the status is in the current form, there is no need to explicitly indicate which is the status - it is used by default.
<a4j:status id="waittingMessage"
onstart="Richfaces.showModalPanel('id_modalPanel')"
onstop="Richfaces.hideModalPanel('id_modalPanel')">
<f:facet name="start">
<label></label>
</f:facet>
<f:facet name="stop">
<label></label>
</f:facet>
</a4j:status>
<ui:include src="/modalPanel.xhtml" />
modalPanel.xhtml can contain display related content.
you can put the content above in a separate file say status.xhtml and then include it in your other pages
as below:
<a4j:outputPanel ajaxRendered="true">
<ui:include src="status.xhtml" />
</a4j:outputPanel>
so any page that has ajax request will display above message window
You need not add any status msg for each a4j:button ,etc.