Why am i unable to ajax update Primefaces ContextMenu (for DataTable)? - ajax

Hi I seem unable to ajax update Primefaces ContextMenu (for Datatable) to determine whether it is active or not (based on backing bean requestBean.editMode) - is there some reason why this wont work?
setEditMode(Boolean.FALSE);
PrimeFaces.current().ajax().update("stContext:stctxt");
<h:form id="stContext">
<p:outputPanel id="stctxt">
<p:contextMenu id="ctxST" for="slotDetailForm:addSlot" rendered="#{requestBean.editMode}">
<p:menuitem value="Edit Slot Type Details" update="SlotTypeDetailsForm:enterSlotTypeDetails" icon="ui-icon-pencil"
actionListener="#{requestBean.editST}"
oncomplete="PF('enterSTypeWithDuration').show()"/>
</p:contextMenu>
</p:outputPanel>
</h:form>
I also tried moving the rendered attribute to the outputPanel with the same non-effect.
Many thanks for all relevant suggestions received!
Primefaces version 6.2

Related

malformedXML: During update: outerTab:j_idt185 not found; iframe id="JSFFrameId"

I have a form with a PrimeFaces selectOneMenu which, when the user selects an option, I want to refresh a DataTable in the same form with different data. When I select an option I get a Javascript popup that says "malformedXML: During update: outerTab:j_idt185 not found" with no DataTable refresh and on inspecting the source I see an invisible iframe at the bottom of the page with id="JSFFrameId" that contains an element <partial-response> that in turn contains an element <update id="outerTab:j_idt185" ...> and this contains an element <![CDATA[<div id="outerTab:j_idt185" class="ui-messages ui-widget" aria-live="polite"></div>]]>. I think this references my <messages> tag, but nothing in the backing bean creates a message, and I do see an element in the page source <div id="outerTab:facilitatorTestsForm:j_idt113" class="ui-messages ui-widget" aria-live="polite"></div> where the messages should be, so the messages tag is indeed rendered. I can find no element with an ID containing "j_idt185" and apparently neither can some Javascript.
The "outerTab" in the IDs is a PrimeFaces TabView that contains all this stuff.
A page refresh causes the update to happen and the DataTable shows the correct data for the selected SelectOneMenu option.
I have found several posts by balusC where some element that is updated by an ajax call has a rendered value that makes it not render and therefore unable to be found when the update is called for. The target of my update (the DataTable) has no rendered attribute and is visible all the time, so this is a different problem. Other posts speak to a bug in earlier versions of PrimeFaces (I am using 6.1). I cannot figure out why this error occurs.
#Kukeltje kindly pointed me to several posts showing that using an encoding type of multipart/form-data in a file-upload component or a form submit can cause this problem but my page has neither of these.
Here is an excerpt of my page:
<div align="center">
<h:form id="facilitatorTestsForm">
<p:messages for="testBeanMessages" showSummary="true" showDetail="true" globalOnly="true" escape="false" autoUpdate="true" />
Tests for which event?
<p:selectOneMenu value="#{testBean.selectedEventId}" style="top: 7px; ">
<f:selectItem itemLabel="All Tests" itemValue="" />
<f:selectItems value="#{testBean.facilitatorEvents}" var="event" itemValue="#{event.id}" itemLabel="#{event.name}" />
<f:ajax update="facilitatorTests" />
</p:selectOneMenu>
<p:commandButton value="Add a New Test" style="margin: 20px;" oncomplete="PF('newTestDialog').show();" actionListener="#{testBean.createEmptyNewTest}" immediate="true" />
<p:dataTable var="test" value="#{testBean.testsForFacilitator}" rowIndexVar="index" id="facilitatorTests" widgetVar="facilitatorTests" selectionMode="single" selection="#{testBean.selectedTest}" rowKey="#{test.id}">
<p:ajax event="rowSelect" oncomplete="PF('facilitatorEditTestDialog').show(); " update="#form:facilitatorEditTestDialog" />
<p:column>#{index + 1}</p:column>
<p:column headerText="Test" sortBy="#{test.name}" width="40%"><h:outputText value="#{test.name}" /></p:column>
<p:column headerText="Tester" sortBy="#{test.tester.fullname}"><h:outputText value="#{test.tester.fullname}" /></p:column>
<p:column headerText="Manager" sortBy="#{test.manager.fullname}"><h:outputText value="#{test.manager.fullname}" /></p:column>
<p:column headerText="Event" sortBy="#{test.event.name}"><h:outputText value="#{test.event.name}" /></p:column>
<p:column headerText="Functional Area" sortBy="#{test.functionalArea.name}"><h:outputText value="#{test.functionalArea.name}" /></p:column>
<p:column headerText="Complete" width="150" sortBy="#{test.completionDate}"><h:outputText value="#{test.completionDate == null ? 'Not Completed' : test.completionDate}"><f:convertDateTime pattern="M/d/yyyy hh:mm a" /></h:outputText></p:column>
<p:column id="delete" style="text-align: center; vertical-align: middle; min-width: 54px; ">
<p:commandButton update="facilitatorTests" process="facilitatorTests" icon="ui-icon-close" actionListener="#{testBean.deleteTest(test.id)}"
title="If the test has not been completed, it will be deleted permanently. Otherwise it will be archived."/>
</p:column>
</p:dataTable>
<... a few dialogs with conditional rendering ...>
</h:form>
</div>
I have tried different targets for the selectOneMenu update attribute and it does not change the behavior so I believe it is correct.
Primefaces 6.1
Mojarra JSF API & IMPL 2.2.4
EL 3.0.0
Tomcat 7
Is this a JSF bug? Thanks for any help you can offer.
Found the solution. Thanks to #Kukeltje for staying with me through this even if he did downvote my question for not having enough info :)
It comes back to #BalusC's posts about not rendering the target of an ajax update. In this case I had several PrimeFaces TabView tabs containing <p:messages> tags with autoUpdate="true", and the tabs are shown/hidden depending on the role of the user. When I removed autoUpdate="true" from these messages tags the problem went away. Apparently every time I did an ajax post, even if I had partial submit limited to rendered subelements of the current visible tab, autoUpdate causes JSF to try to update the messages tags in the unrendered tabs and of course they cannot be found.
The way I found this was to put id attributes EVERYWHERE, on every element in my forms. Then the Javascript error pointed me to a named (id'd) element, rather than one with an automatically assigned ID that I could not trace, and when I saw "autoUpdate" the light bulb came on. Moral: put ids on EVERYTHING.
I hope this helps someone with the same symptom to look for autoUpdate everywhere.
And #Kukeltje you were right that my post had inadequate information - without the enclosing tab tags with their rendered attributes you could not have seen the problem. Since they were in another template that ui:includes the forms I did not think they were relevant. Wrongo!

JSF won't load everything at the same time

In my JSF application if I refresh the page everything get's rendered exceted the primeface graphicimages and jsf <f:ajax /> isn't working. If I wait 5 seconds the ajax calls are working again and graphicimages are getting loaded.
Another example is when I upload an image. The image get procced, uploaded and the site get's refreshed. After this the image is displayed, but ajax calls won't work after a few seconds after.
The app runs on a JBoss 7.1 with JSF 2.1
Is this a problem with slow hardware or something else. I would be happy with any hints because I don't really know where to look for a solution.
Example:
<p:selectOneRadio id="options" value="#{gameWriter.uploadCover}">
<f:selectItem itemLabel="ja" itemValue="true"/>
<f:selectItem itemLabel="nein" itemValue="false"/>
<f:ajax/>
</p:selectOneRadio>
When you define the f:ajax, try to give the UI components you want to execute and update. Also give the event. If you want process the whole form and update the whole page, you can use #form and #all in the f:ajax.
An example with #form and #all with f:ajax is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<f:ajax event="change" execute="#form" render="#all"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
An example with primefaces ajax command is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<p:ajax event="change" process="cmb" update="lbl"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
We can add more than one or for one UI Component if we want to execute the logic for more than one event.
Events for standard JSF UI component can be taken after removing the 'on' from the list of attributes of the UI component starting with 'on'. For example if JSF UI support onChange as an attribute you can use event="change".
For primefaces UI components, the possible events are listed under Primefaces documentation.
It is essential to correctly select the event in order for a successful ajax response.

Primefaces: Update (refresh) p:panel inside p:rowExpansion

I have the following configuration:
JSF: Apache MyFaces JSF-2.1 Core API (Version: 2.1.10)
PrimeFaces 3.4.2
Tomcat 7.0.35
I have a DataTable with rowExpansion and a panel with button in the rowExpansion. I would like to refresh only the panel inside the rowExpansion when the user clicks on the button.
<p:dataTable id="vmt" var="vmtemplate" value="#{myViewBean.myList}" rowKey="#{vmtemplate.id}">
<p:ajax event="rowToggle" listener="#{myViewBean.onRowToggle}" update=":growl" />
<p:column style="width:2%"><p:rowToggler /></p:column>
<p:column>...</p:column>
<p:rowExpansion>
<p:panel id="exp_panel" header="#{vmtemplate.name} Instances">
<h:form id="instancesForm">
<p:commandButton id="refreshRowExpPanel" title="Refresh" update=":growl" action="#{myViewBean.reloadData}"/>
</h:form>
</p:panel>
</p:rowExpansion>
</p:dataTable>
I think I have to set the update property of the refreshRowExpPanel button in order to refresh the exp_panel, but when I set it to update=":growl :expanel" I get an error:
Cannot find component with identifier ":expanel" referenced from
"mainForm:vmt:0:refreshRowExpPanel".
so the generated ID of the panel is "mainForm:vmt:0:refreshRowExpPanel", but when I specify this to the update (update=":mainForm:vmt:0:refreshRowExpPanel") I got the same error:
Cannot find component with identifier
":mainForm:vmt:0:refreshRowExpPanel" referenced from
"mainForm:vmt:0:refreshRowExpPanel".
with update=":mainForm" it works, but it refreshes the whole dataTable and my expanded row will be closed, so it's not fine.
Could you please suggest a solution how to refresh only my panel inside the rowExp, maybe from JS, or any other idea?
thx!
I recommend you to try using ID of the panel without colon on the beginning, so:
update="mainForm:vmt:0:refreshRowExpPanel"
Also you may like to read this post about making references.
I've just realized, that I had a form outside my dataTable:
<h:form id="outerForm">
<p:dataTable id="vmt" var="vmtemplate" value="#{myViewBean.myList}" rowKey="#{vmtemplate.id}">
pansion>
...
</p:dataTable>
</form>
by removing the outer form, and changing the update value to "#form" solved the problem

How to submit JSF PrimeFaces form with selectBooleanCheckbox without refreshing the page?

I'm using JSF with PrimeFaces to make an application as an assignment for college. I'm struggling to get something working. I'm using PrimeFaces and I have a tabview which contains 5 tabs. In one of those tabs I have a dataTable which has several rows and columns. This all works fine, but the problem is that I want to submit the form without rerendering the (entire page). The thing is, every column in the dataTable has a selectBooleanCheckbox, and when that checkbox is selected, a button should disappear. If it's unselected the button should appear. This works fine with onchange="this.form.submit()" or onclick="this.form.submit()" but it refreshes the entire application, and it causes the first tab to be selected, rather than the one I was at. So I'm looking for a solution to be able to submit and re-render some stuff without refreshing the entire program. This is my code:
<body>
<h:form id="customerForm">
<p:dataTable id="customerlist" var="c" value="#{customerBean.customerList}">
<p:column>
<f:facet name="header">Select</f:facet>
<center>
<p:selectBooleanCheckbox value="#{c.selected}" onchange="this.form.submit()"/>
</center>
</p:column>
</p:dataTable>
<h:commandButton id="testtest" value="test" rendered="#{customerBean.numberSelected() == 0}"/>
</h:form>
</body>
I removed most of the columns for the sake of simplicity. What is the solution to this? I've tried using ajax, but that didn't work
<p:selectBooleanCheckbox value="#{c.selected}">
<f:ajax event="click" execute="#form" render="#none"/>
</p:selectBooleanCheckbox>
Do you really need to submit the whole form? If it's enough that the view is being rerenderd try just to update the form. For that you can use the primefaces ajax event.
<p:selectBooleanCheckbox value="#{c.selected}">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
If this does not work, please tell us what "..ajax, didn't work" exactly mean. Is there any POST Request submitted? Is any Action/Setter called?

How to show ajaxstatus for dynamic Primefaces components

I have noticed that pretty much all PF components that have 'dynamic' attribute set to 'true' will only show up after a short delay (which is understandable), and also will not trigger ajax start/stop event.
This is my (perfectly working) Ajax status component, actual dialog contents omitted for brevity:
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" onerror="errorDialog.show();"/>
This is a dynamically loaded dialog. It needs to get data from backing beans:
<p:dialog modal="true" widgetVar="confDialog" position="center" id="confD" dynamic="true">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Date"></h:outputText>
</p:column>
<p:column>
<h:outputText value="#{myBean.currentDate}">
<f:convertDateTime locale="#{myBean.currentLanguage}" type="both" dateStyle="full" timeStyle="full" timeZone="#{myBean.currentTimeZone}"></f:convertDateTime>
</h:outputText>
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton value="Close" type="button" onclick="confDialog.hide();">
</p:commandButton>
</p:dialog>
A commandbutton that does something and displays dynamically loaded confirmation dialog:
<p:commandButton value="Do it" type="submit" ajax="true" process="#form"
action="#{bean.processForm}"
oncomplete="if(!args.validationFailed){confDialog.show();}"
update="confD #form"/>
Ajax status dialog is displayed while the commandbutton submits the data to backing bean and gets data back. Then ajax status dialog disappears, there is a delay of 1-2 seconds, and confirmation dialog is shown.
The same happens with dynamically loaded tabs (in PF tabView component).
Why isn't my ajax status dialog displayed during dynamic component load? How can I show it?
EDIT:
thanks to #partlov I figured out a solution without overriding PF function, by adding JQ ajax start/stop handler to the dynamically loaded dialog:
jQuery(document).ready(function() {
confDialog.getJQ().ajaxStart(function(){statusDialog.show()});
confDialog.getJQ().ajaxStop(function(){statusDialog.hide()});
});
As written in Primefaces documentation <p:ajaxStatus> just intercepts global AJAX requests, and this request is not global. There is no easy way to do this what you want. As time of loading of dialog is short I really don't see point for this. Only solution, as I think, is to overload Primefaces dialog JavaScript methods.
Primefaces calls loadContents() method when dialog content is loaded so you can override this method for this. I don't advice you to do that, because this is undocumented and can be changed in future versions of Primefaces:
jQuery(document).ready(function() {
var oldLoadContents = PrimeFaces.widget.Dialog.loadContents;
PrimeFaces.widget.Dialog.loadContents = function() {
statusDialog.show();
oldLoadContents();
}
});
This should show your dialog on dynamic loading. You can use onShow attribute of p:dialog to close your dialog:
onShow="statusDialog.hide()"

Resources