I open a modal window when I click a button:
<p:commandLink styleClass="mr" title="#{msg.edit_book}" rendered="#{sec:areAllGranted('ROLE_ADMIN')}" onclick="dlgEditBook.show();">
<p class="edit">#{msg.edit}</p>
<f:setPropertyActionListener value="#{b}" target="#{bookDAOImpl.selectedBook}" />
</p:commandLink>
A modal window is opened, but the program does not respond to any place there:
<p:dialog id="editDialog" modal="true" widgetVar="dlgEditBook" dynamic="true" resizable="false" header="#{msg.edit_book}" closable="false">
<h:form id="formEditBook">
<p:panelGrid columns="2" columnClasses="col1, col2" styleClass="edit_book_table" >
<p:panel id="imagePanel">
<p:graphicImage value="#{imageController.defaultImage}" width="110" height="150" id="bookImage"/>
</p:panel>
</p:panelGrid>
</h:form>
</p:dialog>
imageController.defaultImage doesn't work, checked the debugger, it will not be carrying out.
Related
I want to implement Primefaces wizard with finish button at the bottom. Example code:
<h:form>
<p:growl id="growl" sticky="true" showDetail="true"/>
<p:wizard flowListener="#{newSensor.onFlowProcess}">
<p:tab id="personal" title="General">
<p:panel header="Sensor Details">
<p:messages />
<h:panelGrid columns="2" columnClasses="label, value">
......
<h:outputText value="Enabled " />
<h:selectBooleanCheckbox value="#{newSensor.sensor.enabled}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid">
<h:panelGrid columns="2" columnClasses="label, value">
......
<h:outputText value="Age: " />
<h:outputText value="#{newSensor.sensor.enabled}" styleClass="outputLabel"/>
</h:panelGrid>
</h:panelGrid>
<p:commandButton value="Submit" actionListener="#{newSensor.save}" update="growl" process="#this"/>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
Want to get this visual result:
How I can get this visual result?
I think it's best to implement your own UI for the navigation and just control when the Submit button will be displayed.
First hide the navigation bar as such:
<p:wizard showNavBar="false" widgetVar="wiz">
...
</p:wizard>
Then just create some codes for the NEXT,BACK,SUBMIT, ETC.
<p:outputPanel id="updateAsNeeded">
<h:outputLink value="#" onclick="PF('wiz').next();">Next</h:outputLink>
<h:outputLink value="#" onclick="PF('wiz').back();">Back</h:outputLink>
<p:commandButton value="Submit" rendered="#{bean.isEndReached}">Submit</p:commandButton>
</p:outputPanel>
Then you define a FlowListener to determine :
<p:wizard flowListener="#{bean.handleFlow}">
...
</p:wizard>
For your bean:
public String handleFlow(FlowEvent event) {
String currentStepId = event.getCurrentStep();
String stepToGo = event.getNextStep();
//check if stepToGo is on the last page
//endReached = true;
RequestContext.update("updateAsNeeded");
return event.getNextStep();
}
Hope this helps or guides you forward.
I need your help in solving the issue with the CommandButton in the dialog as I am calling a method called UpdatePrint() in the action and it is not called. The jsf page code is as follow:
<h:form id="Requests">
.
.
.
<p:commandButton update=":Requests:#{hr.dialogueName}" oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
.
.
<p:dialog header="cert1" widgetVar="cert1" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="HRCEEN" style="text-align:center;">
</p:outputPanel>
<p:commandButton value="Print" action="#{hrd.UpdatePrint}" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px">
<p:printer target="HRCEEN"/>
</p:commandButton>
</p:dialog>
.
.
<p:dialog header="cert2" widgetVar="cert2" modal="true" showEffect="fade" hideEffect="fade" resizable="true">
<p:outputPanel id="HRSSEN" style="text-align:center;">
</p:outputPanel>
<p:commandButton value="Print" action="#{hrd.UpdatePrint}" type="button" icon="ui-icon-print" style="display:block;margin-bottom: 20px">
<p:printer target="HRSSEN"/>
</p:commandButton>
</p:dialog>
</h:form>
I tried different ways, but I wasn't successful with them as it showed me that the section in the update is not found when I am referring in the update.
<p:commandButton update=":Requests:#{hr.dialogueName}" oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
The action method is not called because of the type="button" attribute - there is no submit to the server. Remove type, then the action will be triggered (the button will assume the default submit type).
I have this piece of code:
<h:body>
<h:form id="form1">
<p:menuButton value="#{msgs.settingsMenuButton}">
<p:menuitem value="#{msgs.accountsMenuItem}" url="#" update=":dlgEdit" oncomplete="_dlgEdit.show()"/>
</p:menuButton>
<p:commandButton value="Accounts" icon="ui-icon-gear"
update=":dlgEdit"
oncomplete="_dlgEdit.show()"/>
</h:form>
<p:dialog id="dlgEdit" widgetVar="_dlgEdit" modal="true" closable="true" header="Accounts">
<h:form id="frmEdit" >
<p:panelGrid id="pnlEdit" columns="2">
<p:outputLabel id="lblName" for="eName" value="Name"/>
<p:inputText id="eName" value="#{tasksBean.selectedLocation}"/>
</p:panelGrid>
</h:form>
</p:dialog>
</h:body>
The dialog is not displayed when the menuItem is selected but it works when the commandButton is pressed.
The behaviors for both are the same...
Can you support me please?
Thanks,
Andrei
Try:
oncomplete="PF('_dlgEdit').show();"
I have a dataTable within a form; in the dataTable I have a button which pops up a dialog if clicked; after editing(or not) I want to close the dialog and refresh the datatable.
I want to to this through the ajax event "close", so even if the clicks on cancel button, or closes the dialog by clicking escape or the "x" in the bar -> he should land in my closeDialog()-method and refresh the dataTable.
The only issue is that i don't know how to refresh the dataTable.
Here is my dataTable(in the header is my button which pops up the dialog):
<p:dataTable id="nzTable" widgetVar="nzTableW" emptyMessage="Keine Todos gefunden"
var="currentTableItem" value="#{nichtZugTableController.dataModel}" paginator="true" rows="15"
rowsPerPageTemplate="5,10,15,20, 25, 30, 1000" lazy="false" paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="( Treffer {totalRecords} ) ( Seite {currentPage} von {totalPages} )"
filteredValue="#{nichtZugTableController.filteredTodos}" filterDelay="500" filterEvent="keyup"
editable="true" sortBy="#{currentTableItem.angelegtAm}" sortOrder="descending"
rendered="#{loginBean.loggedIn and mitViewController.leiterViewActiv and leiterTreeController.nzTableActive}"
selection="#{nichtZugTableController.selectedNZTodos}" rowKey="#{currentTableItem.meldungId}"
resizableColumns="false" style="min-width:1200px !important; ">
<f:facet name="header">
<p:commandButton value="Zuordnen" id="nzAllTableOrdeZuButton" ajax="true" partialSubmit="true"
process="#this" label="ToDo einem Mitarbeiter zuordnen" oncomplete="zuordnenDialogW.show();"
disabled="#{not nichtZugTableController.hasSelectedNZTodos}"
action="#{nichtZugTableController.doToDoArrayToList()}" style="float: left;" />
<pe:tooltip for="nzAllTableOrdeZuButton" value="Ausgwählte ToDos einem Benutzer zuweisen"
myPosition="left center" atPosition="right center" showEffect="fadeIn" hideEffect="fadeOut"
showDelay="700" />
<h:outputText value="#{nichtZugTableController.tableHeaderName}"
style="color:#cf0008; font-size: 22px;" />
</f:facet>
...
</p:dataTable>
Here is my dialog:
<body>
<ui:composition>
<h:form id="zuordnenDialogForm">
<p:dialog id="zuordnenDialog" widgetVar="zuordnenDialogW" closeOnEscape="true" dynamic="true"
header="Zuordnung" appendToBody="false" draggable="true" modal="true" resizable="false">
<p:ajax event="close" listener="#{zuordnenDialogController.closeDialog()}" />
...
</p:dialog>
EDIT 1:
Here is a picture, maybe it helps
http://i.stack.imgur.com/pGjes.jpg
Did you try
<p:ajax event="close" listener="#{zuordnenDialogController.closeDialog()}" update=":nzTable"/>
update=":nzTable" with full path, may be: :form_main:nzTable
i want to comment, but i don't have enought reputation.
You can managed ajax event for each component inside dialog for example:
<p:dialog id="zuordnenDialog" widgetVar="zuordnenDialogW" closeOnEscape="true" dynamic="true"
header="Zuordnung" appendToBody="false" draggable="true" modal="true" resizable="false">
<p:selectOneMenu id="idp" value="#{...}" converter="clientesConverter" panelStyle="width:500px"
effect="fade" var="p" style="width:500px" filter="true" filterMatchMode="contains">
<f:selectItems value="#{comunMB.itemsClientes}"/>
<f:ajax execute="#this" listener="#{...}" render="table1 table2 table..." />
</p:selectOneMenu>
</p:dialog>
In this way change is showing in the table (or other component) while dialog is edited. Also you can use inplace component.
I'm trying to use JavaScript to open the primefaces dialog component when a page loads but I'm unable to get it to open. My "HERE!" alert gets fires off when the page loads but the component must not be found using the widgetvar property on the client side. Anyone know the proper reference in JavaScript?
Code:
<ui:composition template="#{layoutBean.registeredTemplate}">
<ui:define name="head">
<script type="text/javascript">
jQuery(document).ready(function(){
alert("HERE!");
scrapeImagesDlg.show();
});
</script>
</ui:define>
<ui:define name="content">
<p:dialog header="#{bundle['bookmarklet.dialog.HEADER']}"
widgetVar="scrapeImagesDlg"
modal="true"
styleClass="dialog dialog2"
draggable="false"
resizable="false"
showEffect="fade"
hideEffect="fade"
closeListener="#{bookmarklet.close}"
onCloseUpdate="imageGrid">
<div class="dialog dialog2">
<div class="dialog-top-reg"></div>
<div class="dialog-middle-reg">
<div class="close-button"><h:form>
<p:commandButton onclick="scrapeImagesDlg.hide()"/>
</h:form></div>
<h:form id="scrapeFrm">
<p:commandButton onclick="scapeImages()" value="scrape images"/>
<h:inputHidden id="scrapeURL" value="http://www.freefoto.com/preview/04-01-70?ffid=04-01-70"/>
<p:remoteCommand name="scapeImages"
process="#this,scrapeURL"
actionListener="#{bookmarklet.loadImages}"
update="imageGrid"/>
<p:outputPanel id="imageGrid">
<p:dataGrid var="img"
value="#{bookmarkletBean.imageURLs}"
rendered="#{bookmarkletBean.shouldRender}"
columns="1"
rows="1"
paginator="true"
effect="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
paginatorPosition="bottom">
<p:column>
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage value="#{img}" width="100" height="100"/>
</h:panelGrid>
</p:column>
</p:dataGrid>
</p:outputPanel>
</h:form>
</div>
<div class="dialog-bottom-reg"></div>
</div>
</p:dialog>
</ui:define>
</ui:composition>
<p:dialog visible="true" ...>
tells PrimeFaces to open the dialog automatically when page is loaded.