I am developing a project with Primefaces 5.1 and JSF 2.2.
In my project, I used dialog component to show some details to the user's.
When I drag the dialog into the top of the browser screen when browser scroll is down, its getting hide behind the browser screen after that can not close the dialog box.
Here, I added a sample code.
Please, help me to control the behind screen hiding.
Sample Code:
<h:body>
<h:form>
<p:panel header="Test" style="height:1500px;">
<p:commandButton value="Click" oncomplete="PF('dialogBoxId').show();"/>
</p:panel>
</h:form>
<p:dialog header="Alert" id="dialogBoxId" widgetVar="dialogBoxId"/>
</h:body>
Related
I have a JSF page. The framework is PrimeFaces.
The layers build up like topbar, sidebar, main-layout.
The sidebar and top bar contain a menu. Both menus are in a <form>:
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The main layout also contains buttons form in another form tThe button contains a confirmDialog):
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I use ajax=true, just by clicking on the button in the main layout, confirmDialog does not appear.
If I use ajax = false, confirmationDialog will appear, but the page will break down for a short time. First, the page will be displayed without css formatting, and later the css will be validated.
Why can this be? What's the difference between the seven calls? In one case, why does this render the rendering in the other case why the confirmDialogs do not come up?
Update:
I've read the link, but I still do not understand why it works.
I may have written the problem incorrectly.
There is a JSF page: list.xhtml. It is a commandLink
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The backing bean:
public String modify(){
return "edit.xhtml";
}
The edit.xhtml has the button with confirmDialog:
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I call edit.html with list.xhtm with ajax = true then confirmDialog works but the page is rendering slowly.
If I call ajax = false then rendering is fast but confirmationDialog does not work.
I do not understand because it is another page, so not just part of it is updated but the entire page
Solved
There was a bug in PrimeFaces.
https://github.com/primefaces/primefaces/commit/9f86efba16ead70f9db1194744d291a7f64acefb
I've corrected the bug in source code version 6.2 and has been working well since then.
I am working an primefaces application, I am using
Primefaces 5.x version, Jsf 2.x
which has tabview
in one of the tabs I have command button, by clicking on it pdf export should happen.
For the first time click on button page is getting reloaded, from the second time on words request is going to bean page and downloading is working correctly.
this is my code snippet for command button :
<h:form id="mainForm">
<p:tabView id="myId" activeIndex="#{bean.currentTabIndex}" dynamic="true" cache="false">
<p:tab title="vehicle" id="vehId" styleClass="panelBack">
<h:form id="exportForm">
// some code
<p:commandButton value="export" process="#this" actionListener="# {bean.export()}" ajax="false" id="exportButton" />
</h:form>
</h:form>
If I make dynamic = false, it's working. I mean after clicking export button request is going to bean class, export is working.
What would be the problem? Can somebody help me?
Thank you
Yes your problem is most likely nested that is not allowed in JSF.
I have upgraded my primefaces application from primefaces version 3.3 to 6.0 (latest). Most of the components and pages are working fine except the pages where p:datatable is shown inside p:dialog. It stretches the dialog to the full width of the browser. If I resize the browser all the columns stacked on each other. What is the solution for this issue?
Set the width attribute of the primefaces dialog to a specific value like below:
<p:dialog id="myDlg" widgetVar="myDialog" modal="true" width="1000" resizable="false" appendTo="#(body)" header="Header" closeOnEscape="true">
//your table here
</p:dialog>
If in the dialog you also have a form the you can put the entries of the form on a gridPanel.
The newest version of PrimeFaces has a "responsive" dialog attribute. So your dialog code should be something like this:
<p:dialog> id = "someDialog" widgetVar = "someDialog" modal = "true" responsive = "true">
//dialog code
</p:dialog>
It was put into version 6.0 https://github.com/primefaces/primefaces/issues/327
I'm using PrimeFaces 4.
I don't want to use p:ajaxStatus because I only want to show loading for a few components.
So I have a p:blockUI component that I usually show during ajax events by doing this:
onstart="loading.show();" oncomplete="loading.hide();"
But for p:wizard component I don't know how can I do that when the user change tabs (clicking next/back buttons or clicking in the tab title). I tried the following inside the wizard:
<p:wizard id="wizard" flowListener="#{myBean.onFlowProcess}" style="display: inline-block;" backLabel="Prev" nextLabel="Next" showNavBar="true" widgetVar="wizardWV">
<p:ajax event="tabChange" onstart="loading.show();" oncomplete="loading.hide();" />
<p:tab id="tab1" title="My tab 1">
<p:panel>
<h:outputLabel value="test" />
</p:panel>
</p:tab>
<p:tab id="tab2" title="My tab 2">
<p:panel>
<h:outputLabel value="test2" />
</p:panel>
</p:tab>
</p:wizard>
Then I got the error:
<p:ajax> Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
Is there any way I could achieve this?
Thanks
That's is because the wizard isn't a client behavior container.
The standard flow of a wizard is the tabs are just for display purposes in the heading. You should be using the Next/Back triggers for the wizard flow.
Refer to : http://www.primefaces.org/showcase/ui/panel/wizard.xhtml
Has the basic features/flow, but some more links
http://www.primefaces.org/docs/vdl/3.5/primefaces-p/wizard.html
If you're trying to make your tabs clickable then that's a different story, you'll need to setup your flow listener, have them all select the same method/action as the next - but pass a param to the backing bean and manually determine the flow. You could setup a remote call in PF with an onclick attached to access your intent of the waiting on load.
I would look at use case scenarios, maybe Wizard is the wrong component you're looking for?
Looking at the code provided, you're tabs currently are not clickable, and I cannot see your back/next action buttons.
I am getting "Cannot find component with identifier "contentForm:tabView:form:addressDialogPanel" referenced from "contentForm:tabView:form:addressBookTable" " error. How can I update my panelGrid inside the widget?
<h:form id="form">
<p:dataTable id="addressBookTable">
<p:ajax event="rowSelect" listener="#{addressBookController.onRowSelect}"
update="contentForm:tabView:form:addressDialogPanel" oncomplete="addressDialog.show()" />
</p:dataTable>
<p:dialog id="addressDialogId" widgetVar="addressDialog">
<h:panelGrid id="addressDialogPanel" columns="2" cellpadding="4">
</h:panelGrid>
</p:dialog>
</h:form>
The main problem is that you are giving the wrong client ID of component's. Also p:tabView is a component it is not a form. When you define a h:form, it generates a standart HTML form element. And when you submit the page JSF uses POST to submit your data into backing bean. So nesting them is going to occur lot's of issues that you don't expect. You should seperate forms into sections like sideForm or searchForm or etc.
You should detect the correct client ID of your component when you try to update it. You can do this with your browser's developer settings(press f12 for chrome). Then select component with the magnifier button and give that ID into update property. Just like here:
You should read to learn basics of JSF for example from here