Primefaces open a p:dialog using Javascript - primefaces

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.

Related

Place finish button at the end

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.

Program does not respond to a modal window

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.

Primefaces dialog not shown at "oncomplete" after update on MenuItem

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();"

Update form from dialog

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.

Datatable as master, dialog as details

I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.