1. 技术文章
  2. Primefaces dialog is rendering twice

Primefaces dialog is rendering twice

由 不想你离开。 提交于 2019-12-05 13:28:42

In my case I cannot user oncompleteI) method to hide the dialog because it has to be closed to some business logic.

I my case I have use primefaces tabs on UI. Every time I navigate the tabs and then click on button on which dialog appears then my dialogs number are increasing proportionality So I have used simple jquery script to remove all the duplication dialog from the UI e UI.

function removeDuplicateDialogs(dialogId) {

    \\ generally all our components have : character we have to 
    \\ replace ':' with '\\:'(applying escape character)
    dialogId = dialogId.replace(/\:/g, '\\:');

    var dialogs = jQuery("div[id=" + dialogId + "]");
    var numOfDialogs = dialogs.length;
    numOfDialogs = numOfDialogs - 1;
    for (var i = 0; i < numOfDialogs; i++) {
        jQuery(dialogs[i]).remove();
    }
}

I've posted the same question in primefaces forum (like Tommy Chan told), and someone answered this:

You are probably placing your dialog in the form you are updating which is a nono. Never update the dialog only the stuff in the dialog

I've tried to do this until I saw all my dialogs have "rendered" attribute coming from server (just see the first xml), I have a lot of dialogs in this application and some of them have relation with others (on server), these last are on the same form.

I did something different, I only created this javascript code:

function removerDialogo(id) {
   setTimeout(function() {
       removerDialogoAposIntervalo(id);
   }, 100);  
}

function removerDialogoAposIntervalo(id) { 
   id = id.replace(':', '\\:');
   jQuery('div.ui-dialog')
       .find('#' + id)
       .parent().eq(1)
       .remove(); 
}

and called this on dialog "onShow" attribute:

<p:dialog widgetVar="#{idPopup}" id="#{idPopup}" modal="#{popup.modal}"
    draggable="#{popup.modal}" rendered="#{popup.visivel}"
    visible="#{popup.visivel}" closeOnEscape="false" closable="false"
    header="#{titulo}" resizable="false" styleClass="autoWidthDialog"
    showEffect="fade" hideEffect="fade" onShow="removerDialogo(this.id)">

I don't like to do things like this, but I can't find a better way to solve this... If someone give me a better solution, I will be grateful

As i said on the primefaces forum, you are updating your forms with the dialog in it... you need to place your dialogs out of your form and update them seperatly. If you need to use a form in your dialog then place it in you dialog: 

   <p:dialog><p:form> </p:form> </p:dialog>

I had the same problem with a dialog, the solution was place in the update of the commandButton that show the dialog component the specific id of the Dialog Component not the form id, the solution looks like this:

    <p:dialog id="dialogId">
        <p:commandButton value="OK" style="float:right"
             update="@form dialogId"
             action="#{controladorPopup.submit}"
             process="@form"/>
    </p:dialog>

I would check that your widgetVar="#{idPopup}" id="#{idPopup}" is the same before you submit and after you submit the form. Maybe it has changed and primefaces thinks it doesn't exist anymore and creates a new one.

Add the oncomplete attribute to your submit button and let it hide the dialog:

<p:commandButton value="OK" style="float:right"
                 update="@form formAlerta"
                 action="#{controladorPopup.submit}"
                 process="@form"
                 oncomplete="#{idPopup}.hide();"/>

putting the forms inside dialog isnt the best way to solve it, if you access your application with IExplorer, dialogs wont work with this approach

This is an awful bug with no official answer...

I'm using a dialog to render a Google map. The way I handle the bug (using JQuery) is by counting the number of ".map" elements in the DOM on primefaces:dialog.onShow... I then select the :last .map instance rendered (or in your case, whatever content class you're working with), and .remove() the dialog which contains it:

Markup (approx):

<pri:dialog onShow="popupOpen();" etc...>
    <div id="map" class"map"></div>
</pri:dialog>

JavaScript:

function onShowDialog(){
    if($(".map").length > 1){
        $cull = $(".map:last");
        $cull.closest(".ui-dialog").remove();
    }
}

If you're a sadist you could, quite comfortably, make that a one liner... I see this as a Primefaces bug. The close button should outright destroy the dialog.

标签
jsf
jsf-2
dialog
primefaces
modal-dialog
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!