Geek Answers Handbook

Punch Dialog Box Runs Twice

I created the ui: component to use as a popup, so I can create many popups using the standard of this template. The component is just a pop-up window with two buttons (cancel and send) and content that can be redefined, for example, you can see here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui"> <ui:component> <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"> <h:panelGroup style="width:100%"> <p:focus /> <ui:insert name="conteudo">Nenhum conteúdo definido!</ui:insert> <h:panelGrid id="#{idPopup}PainelMensagens" style="width:100%"> <p:messages /> </h:panelGrid> <ui:insert name="barraDeBotoes"> <h:panelGroup layout="block" style="width:100%"> <p:commandButton value="CANCELAR" immediate="true" update="@form" style="float:right" action="#{controladorPopup.fechar}" onclick="#{idPopup}.hide();" /> <p:commandButton value="OK" style="float:right" update="@form formAlerta" action="#{controladorPopup.submit}" process="@form" /> </h:panelGroup> </ui:insert> </h:panelGroup> </p:dialog> </ui:component> </html>

The problem occurs when I try to submit a form without filling in the required fields. The correct behavior simply shows a pop-up window with messages, but the dialog is displayed twice, one with messages and one without messages. You can see this behavior here:

twice rendering

this is one use of this template:

 <ui:composition template="../templates/popupSubmit.xhtml"> <ui:param name="titulo" value="Buscar pessoa" /> <ui:param name="popup" value="#{modeloPopupBuscaPessoa}" /> <ui:param name="controladorPopup" value="#{controladorPopupBuscaPessoa}" /> <ui:define name="conteudo"> <h:panelGroup> <h:panelGrid columns="2"> <h:outputLabel value="Tipo de cadastro:" style="float:none" /> <h:selectOneMenu value="#{controladorSugestaoPessoa.tipoCadastro}" immediate="true"> <f:selectItems value="#{carregadorTipoCadastro.itens}" /> <f:ajax event="change" immediate="true" /> </h:selectOneMenu> </h:panelGrid> <h:outputText value="Buscar por:" /> <h:selectOneRadio value="#{controladorSugestaoPessoa.tipoBusca}" immediate="true"> <f:selectItems value="#{carregadorTipoBuscaPessoa.itens}" /> <f:ajax event="change" immediate="true" /> </h:selectOneRadio> <p:autoComplete value="#{modeloPopupBuscaPessoa.itemSelecionado}" forceSelection="true" maxResults="10" queryDelay="500" completeMethod="#{controladorSugestaoPessoa.atualizarSugestoes}" var="pessoa" itemLabel="#{pessoa.label}" itemValue="#{pessoa}" converter="#{conversorSelectItem}" /> </h:panelGroup> </ui:define> </ui:composition>

And these are some of them:

 <h:form id="cadastroPessoa"> <ui:include src="resources/components/popups/modulo_cadastro/popupNovoCadastroPessoa.xhtml"> <ui:param name="idPopup" value="popupNovoCadastroPessoa" /> </ui:include> <ui:include src="resources/components/popups/modulo_cadastro/popupCadastroPessoa.xhtml"> <ui:param name="idPopup" value="popupEdicaoCadastroPessoa" /> </ui:include> <ui:include src="resources/components/popups/modulo_cadastro/popupBuscaPessoa.xhtml"> <ui:param name="idPopup" value="popupBuscaCadastroPessoa" /> </ui:include> </h:form> <h:form id="cadastroProduto"> <ui:include src="resources/components/popups/modulo_cadastro/popupCadastroProduto.xhtml"> <ui:param name="idPopup" value="popupNovoCadastroProduto" /> </ui:include> </h:form>

Can someone tell me why this is happening?

+4
source share
8 answers

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

In my case, I use primefaces tabs in the user interface. Each time I move the tabs and then click the button on which the dialog appears, my dialog number increases proportionality. Therefore, I used a simple jquery script to remove the entire duplication dialog from the e UI user interface.

 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(); } }
+4
source

I posted the same question in the perforis forum (as Tommy Chan said), and someone answered this:

You are probably posting your dialog in the form you are updating, which is nono. Never refresh the dialog box with just that material in the dialog box.

I tried to do this until I saw that all my dialogs have the "rendered" attribute coming from the server (just look at the first xml), I have many dialogs in this application, and some of them are related to others (on the server) , the latter are in one form.

I did something else, 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 in the onShow dialog box:

 <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 doing such things, but I can’t find a better way to solve this problem ... If someone gives me a better solution, I will be grateful

+3
source

As I said on the forum with sections, you update your forms using the dialog box ... you need to put your dialogs from your form and update them separately. If you need to use the form in your dialog box, put it in your dialog:

  <p:dialog><p:form> </p:form> </p:dialog>
+1
source

I had the same problem with the dialog box, the solution was to update the CommandButton command, which shows the dialog component the specific identifier of the Dialog component, and not the form identifier, 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>
+1
source

I would check that your widgetVar = "# {idPopup}" id = "# {idPopup}" is the same before submitting and after submitting the form. Maybe it has changed, and price-makers think that it no longer exists and creates a new one.

0
source

Add the oncomplete attribute to the submit button and open the dialog box:

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

placing forms inside a dialog is not the best way to solve it; if you access your application using IExplorer, dialogs will not work with this approach

0
source

This is a terrible mistake without an official answer ...

I use a dialog to display a Google map. The way I handle the error (using jQuery) is to count the number of ".map" elements in the DOM on the networks: dialog.onShow ... Then I select: last.map instance rendered (or in your case, whatever the content class is you are working with) and the .remove () dialog box containing it:

Markup (approximately):

 <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 are a sadist, you could very well do this with one liner ... I see this as a Primefaces error. The close button should completely destroy the dialog.

0
source

More articles:


All Articles