primefaces inplace query - jsf-2

I am using the p:inplace inside a dialog, when i click the dialog for the first time it displays the label (Detail) and on i clicking the label it displays the 2 inputText but if i open the dialog again it displays the 2 inputText without the label (step), how do i ensure that the label is displayed first.
<p:dialog widgetVar="Dialog" header="Update Patient Details" showEffect="clip" hideEffect="clip" modal="true" >
<h:panelGrid id="Details" columns="2">
<p:inplace id="selectableInplace" label="Detail" effectSpeed="fast" event="click">
<h:panelGrid id="innerDetails1" columns="2">
<h:outputLabel value="Name:" />
<p:inputText id="someName" />
<h:outputLabel value="Mobile:" />
<p:inputText id="someMobile" />
</h:panelGrid>
</p:inplace>
</h:panelGrid>
</p:dialog>

The p:inplace element never got any instruction to close.
If you want the p:inplace element to be closed when the dialog is opened you can call the hide() function when the p:dialog closes or when it shows.
I suggest doing this upon closing the dialog. Simply add a widgetVar to the p:inplace, and call it's hide() function in the onHide of the p:dialog.
Working example:
<p:commandButton onclick="Dialog.show()" value="Show" />
<p:dialog widgetVar="Dialog" header="Update Patient Details"
showEffect="clip" hideEffect="clip" modal="true"
onHide="inplace.hide();">
<h:panelGrid id="Details" columns="2">
<p:inplace id="selectableInplace" label="Detail" effectSpeed="fast"
event="click" widgetVar="inplace">
<h:panelGrid id="innerDetails1" columns="2">
<h:outputLabel value="Name:" />
<p:inputText id="someName" />
<h:outputLabel value="Mobile:" />
<p:inputText id="someMobile" />
</h:panelGrid>
</p:inplace>
</h:panelGrid>
</p:dialog>

Related

Overlaypanel inside picklist inside dialog not showing value

I have this button in a form
<p:commandButton process="#this" update=":solution" title="Modify"
actionListener="#{controller.addSolutionAction(registerCause)}"
icon="ui-icon-plus" />
It displays this dialog (it's outside the form)
<p:dialog header="Solutions widgetVar="dlgSolution" id="solution"
showEffect="fade" hideEffect="drop" closable="true" resizable="true" modal="true">
<h:form id="dialog">
<p:pickList id="solutions" var="sol" effect="drop"
itemValue="#{sol}" itemLabel="#{sol.code}" converter="solutionConverter" label="Solutions" >
<f:facet name="sourceCaption">No Seleccionadas</f:facet>
<f:facet name="targetCaption">Seleccionadas</f:facet>
<p:ajax event="transfer" update="#form"
listener="#{controller.handleSolutionChange}" />
<p:column>
<h:outputText id="codeID" value="#{sol.code}" />
</p:column>
<p:column>
<p:commandButton id="button" icon="ui-icon-search" type="button" update="buttonP"/>
<p:overlayPanel id="buttonP" for="button" hideEffect="fade">
<p:editor id="description" required="true"
label="Ver más" width="300" widgetVar="descriptionWidget"
value="#{sol.description}" disabled="true" controls="">
</p:editor>
</p:overlayPanel>
</p:column>
</p:pickList>
<p:outputPanel styleClass="divButton">
<p:growl id="growlMessagePreview" life="2000" />
<p:commandButton icon="ui-icon-close" title="Close" process="#form" update="#form" value="Close" oncomplete="dlgSolution.hide()" />
</p:outputPanel>
</h:form>
</p:dialog>
What I want to do is show the solution's description when I click the button, but it's always empty. I need it to be an editor because the text is formatted
(I tried using a text area but it's empty too), then I put a string but it's not shown. I also used dynamic = "true" in the overlaypanel, it showed the hard coded string but not the value I need.
I'm using Primefaces 3.5. Any suggestions will be welcome, if you need more details, let me know.

Updates not reflected back on form submission

I am using primefaces.
In the java side, I have a modelView. ModelView has a list of modules. Each module has a list of variables.
.
.
.
<h:form id="DynamicWebPageForm">
<p:growl id="msgs" showDetail="true" />
<h3>Dynamic Loading with Accordion Panel</h3>
<p:outputLabel for="selectModule" value="Select Module: " />
<p:selectOneMenu id="selectModule" value="#{modelView.selectModel}">
<p:ajax listener="#{modelView.onModelChange}" update="modulesAP" />
<f:selectItems value="#{modelView.modelselectItems}" />
</p:selectOneMenu>
<p:accordionPanel id="modulesAP" multiple="true" value="#{modelView.modules}" var="v1">
<p:tab id = "modulesTab" title="#{v1.name}: Rating - #{v1.rating}">
<p:dataTable styleClass="borderless" value="#{v1.moduleVariables}" var="c1">
<p:column>
<p:row>
<p:panelGrid columns="2" styleClass="borderlessPanelGrid">
<h:outputLabel styles="50%" value="#{c1.name}" />
<p:inputText styles="50%" value="#{c1.value}" />
</p:panelGrid>
</p:row>
</p:column>
</p:dataTable>
<p:commandButton value="Submit" update=":DynamicWebPageForm:msgs modulesTab modulesAP" actionListener="#{modelView.saveData}" process = ":DynamicWebPageForm" />
</p:tab>
</p:accordionPanel>
</h:form>
Any update in the inputText is not getting reflected back on form submission. What could be the issue?
Set cache="false" (and maybe dynamic="true") on your <p:accordionaPanel/>
The accordionPanel defaults to cache="true" (can't understand why), which would explain why you're seeing stale values

How to process primefaces dialog

I have a primefaces dialog and what I want to do is process inputtext before commandbutton action starts. Inside myController.sendToPostBox method, myController.rejectionReason string returns null. Here is my view code.When I remove process attribute, commandbutton doesn't works.
<h:form>
....
<p:dialog id="myPanel"
widgetVar="myPanelId"
resizable="true"
appendToBody="true"
draggable="true"
height="200"
width="300">
<p:panelGrid id="myPanelGridId" style="width: 250px;" styleClass="panelGridWithoutBorder">
<p:row>
<p:column colspan="2">
<p:inputTextarea style="width: 250px;" value="#{myController.rejectionReason}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) myPanel.hide();"
process="myPanelId"
action="#{myController.sendToPostBox()}"/>
</p:column>
<p:column>
<p:commandButton value="Close" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</h:form>
Just place the <h:form> inside the dialog (instead dialog inside the <h:form>)
Explanation:
When you use appendToBody="true" you dialog is being transferred outside of the form that wraps it to the body of the generated html , and since there is no form inside the dialog you can't really submit it.
Also take a look at this thread: Proper Construct for Primefaces Dialog
You need something like this:
<h:form id="formDialog">
<p:commandButton id="basic" value="Basic Dialog" onclick="PF('dlg1').show();" type="button" />
</h:form>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:form id="formUser">
<h:panelGrid id="grid" columns="2">
<h:outputLabel value="Username:" />
<p:inputText id="user" value="#{user.name}" />
<h:outputLabel value="Password:" />
<p:inputText id="password" value="#{user.password}" />
<h:commandButton value="Login" id="btn" process="#formUser" actionListener="#{user.login}" />
</h:panelGrid>
</h:form>
</p:dialog>
"login" in the actionListener tag is a method in the User(bean) class, that needs the #ManagedBean annotations.

Primefaces popup dialog not working

I have a jsf page having a popup button that opens a following dialog popup:
</h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
<h:form id="form23">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" />
</f:facet>
</h:panelGrid>
</h:form>
</h:form>
But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!
I tried that but still the same problem persists..below is my modified code..
<h:form id="create-ticket">
<p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login"
/>
</f:facet>
</h:panelGrid>
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton"> <!-- This is the section where we get the grey background -->
<h:panelGroup id="input_search_section" styleClass="">
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show();" type="button"
>
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advance
You need to restructure your code.
*Don't nest forms inside other forms.
*You dont have the end-tag of your p:dialog.
<h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
//Content ex inputtext
</p:dialog>
<p:commandButton value="Show Dialog" onclick="dlg.show();" type="button" />
</h:form>

Primefaces dialog + commandButton

I'm trying to use primefaces <p:dialog> combined with <p:commandButton>. In my .xhtml page I have a picklist and commandButton which is used to show a dialog. Dialog displays datatable with target values from picklist. Dialog has two buttons: cancel and submit. My problem is that submit button is not fired. What's strange, commandButton out of dialog works.
Here's my .xhtml:
<body>
<ui:composition template="./../resources/mainTemplate.xhtml">
<ui:define name="content">
<h:form>
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</p:dialog>
<p:pickList value="#{editSkills.skills}" var="skill" effect="none"
itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}"
showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"
addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" >
<f:facet name="sourceCaption">#{messages.skillsList}</f:facet>
<f:facet name="targetCaption">#{messages.yourSkills}</f:facet>
<p:ajax event="transfer" listener="#{editSkills.onTransfer}" />
<p:column style="width:100%;">
#{skill.umiejetnosc}
</p:column>
</p:pickList>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.afterSubmit}" update="dlg" oncomplete="dlg.show()" /> THIS BUTTON WORKS FINE
<p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/>
</h:form>
</ui:define>
</ui:composition>
</body>
I've marked working button and not working one.
What do I have to do to make it working?
You can try either of the following , I vote number one, it's a cleaner design IMO
Bring the <p:dialog/> outside of the general <h:form/> and put an <h:form/> inside it instead
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:form>
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</h:form>
</p:dialog>
Add appendToBody="false" to the <p:dialog/> to ensure the dialog is rendered within the html form in the DOM instead of being auto-relocated to end of HTML body. But this may cause inconsistent rendering in various browsers.
<p:commandButton value="Cancel" oncomplete="PF('yourDialogWidgedVarName').hide();" process="#this" />
Make sure to use ' when u call the widgetVar name. You can also use immediate="true" or process="#this".

Resources