Primefaces switches between multiple dialogs -
Primefaces switches between multiple dialogs -
i`m using primefaces 4.0. have page 3 dialog components (dialog 1, dialog 2, dialog 3) , 3 button components (button 1, button 2, button 3), dialog 1 showed click button 1, dialog 2 showed click button 2, , dialog 3 showed click button 3. user can open these 3 dialogs in same time, means user can work these 3 dialogs been on show, this:
when user work in dialog, need alter values in backing bean , update components @ first, , when user show dialog click button, there no problem , can alter values when actionlistener of button user clicked fired, when user showed 3 dialogs, , changes active dialog click dialog this:
how can alter active dialog 'dialog 1' 'dialog 2'?
here xhtml code:
<p:commandlink onclick="dialog1.show()" update="outputtext" actionlistener="#{testbean.changeactivedialog('dialog 1')}">button 1</p:commandlink><br/> <p:commandlink onclick="dialog2.show()" update="outputtext" actionlistener="#{testbean.changeactivedialog('dialog 2')}">button 2</p:commandlink><br/> <p:commandlink onclick="dialog3.show()" update="outputtext" actionlistener="#{testbean.changeactivedialog('dialog 3')}">button 3</p:commandlink><br/> <br/><hr/><h:outputtext id="outputtext" value="active dialog: #{testbean.activedialog}"/> <p:dialog id="dialog1" header="dialog 1" resizable="true" dynamic="false" modal="false" draggable="true" widgetvar="dialog1" minimizable="true" maximizable="true"> dialog1 </p:dialog> <p:dialog id="dialog2" header="dialog 2" resizable="true" dynamic="false" modal="false" draggable="true" widgetvar="dialog2" minimizable="true" maximizable="true"> dialog2 </p:dialog> <p:dialog id="dialog3" header="dialog 3" resizable="true" dynamic="false" modal="false" draggable="true" widgetvar="dialog3" minimizable="true" maximizable="true"> dialog3 </p:dialog>
and view bean:
public class testbean extends basebean { private string activedialog; public void changeactivedialog(string dialog) { activedialog = dialog; } public string getactivedialog() { homecoming activedialog; } public void setactivedialog(string activedialog) { this.activedialog = activedialog; } }
i googled didn't find solution on problem. suggestion appreciated, in advance.
although opening multiple dialogs in same time not idea, can utilize javascript accomplish want.
the z-index changed when dialog clicked or dragged, making "active"/above other elements, in case can setup 2 main events hear on: click
, dragstop
send dialog id managedbean remotecommand
, here's example:
javascript
class="lang-javascript prettyprint-override"> $('.ui-dialog').on('click dragstop',function () { activedialog([{name: 'activedialog', value: $(this).attr('id')}]);//remotecommand });
xhtml
class="lang-xhtml prettyprint-override"><p:remotecommand name="activedialog" actionlistener="#{mainbean.activedialog}"/>
managedbean
class="lang-java prettyprint-override">public void activedialog() { facescontext facescontext = facescontext.getcurrentinstance(); map map = facescontext.getexternalcontext().getrequestparametermap(); string activedialog = (string) map.get("activedialog");//active dialog }
a little demo, , working illustration on github.
note: should maintain actionlistener on first time dialog opened.
primefaces dialog
Comments
Post a Comment