p:dialog inconsistent behavior

[arnieAustin]

I have a UI design where on a page there is a p:tabView. Since the TV doesn't need to be in a form (which would cause other problems as the complexity of the UI grows), I use a p:ajax event="tabChange" to change the backing bean active tab index and repaint the TV. All is well.

The third p:tab page shows a p:dataTable of records. The UI to add/edit/view the record detail is via a p:dialog and this is where the weirdness enters.

Above the p:dataTable is a p:commandButton for "Adding" a record:

Code: Select all

<p:commandButton id="cmdAdd"
	value="#{messages.getString('application.label.cmdAdd')}"
	actionListener="#{infoRequestCommentList.addListener}"
	oncomplete="PF('infoRequestCommentEditModal').show()"
	process="@this" update="infoRequestCommentEditPanel" >
	<f:param name="cid"
		value="#{javax.enterprise.context.conversation.id}" />
</p:commandButton>

The dialog appears and operates as expected. When clicking on the "save" button in the p:dialog, the record is added, the p:dialog closes, and the p:dataTable repaints to show just the record the user just added.

The last column of the p:dataTable is a p:column called Action. Within each row of this column, there is a p:splitButton with a default command of Edit and a secondary of View.

No matter the sequence of events, clicking the button results in the backing bean logic firing (the rowData is extracted, the id used in a CDI event firing to make the edit bean update its data view, etc. However, when the p:dialog finally appears, IT IS COMPLETELY EMPTY OF ALL CONTENT! Not that the fields are empty, no. There ARE NO FIELDS, LABELS, OR BUTTONS just the appropriate title (Add/Edit/View X) appears.

My current p:dialog is defined as such:

Code: Select all

<p:outputPanel id="infoRequestCommentEditPanel">

	<p:dialog id="infoRequestCommentEditModalId"
		widgetVar="infoRequestCommentEditModal" 
		resizable="false" modal="true" closable="true" height="700"
		width="1000" closeOnEscape="true" appendTo="@(body)"
		onshow="PF('subject').focus();">

		<f:facet name="header">
			<h:panelGroup>
				<h:outputText
					value="#{messages.getString('infoRequestCommentEdit.label.add')}"
					rendered="#{infoRequestCommentDTOEdit.baseActionPageModeEnum eq 'ADD'}" />
				<h:outputText
					value="#{messages.getString('infoRequestCommentEdit.label.edit')}"
					rendered="#{infoRequestCommentDTOEdit.baseActionPageModeEnum eq 'EDIT'}" />
				<h:outputText
					value="#{messages.getString('infoRequestCommentEdit.label.view')}"
					rendered="#{infoRequestCommentDTOEdit.baseActionPageModeEnum eq 'VIEW'}" />
			</h:panelGroup>
		</f:facet>

		<h:form id="infoRequestCommentEditForm">
		...

Digging into the page source the p:outputPanel is there, but not the actual h:form! The p:dialog object is there, the header facet is there, but the h:form and all its contents - MISSING! What is going on?!

Not shown above, I had dyamic="true" set on the p:dialog. I removed that altogether and now the UI is being RENDERED, but the update is not happening. I can click on a row (say for id #2) and it appears with the Edit header and data in the fields, but only with the previous row's values. How do I know this? I REFRESH the entire page, the TV repaints, I click on the Comments tab, click any row in the dataTable and voi la: I see the row data I had clicked on previously.

I do not understand what is going on.


While I'm on the subject of dialogs, I use append="@(body)" to avoid both complicated update= names as well as any other conflicts if I want to use the p:dialog on other pages (via ui:include).

In fact, I have a small set of such dialogs (showTextModal, showImageModal, etc), each with their own "controller" backing bean that can be injected into a page's main controller bean, which is then pre-populated on demand, so that when the .show() is called, the UI appears as expected.

What is the best way to modularize such modal dialogs? I want them to be usable where ever needed, so some I include on every page at the bottom of my page template.

I have tried various order combinations of p:outputPanel / p:dialog / h:form and I think that is best (?) because when I update the panel I want the entire p:dialog re-rendered, not just the "body" of it. Is this a good best practice?

[Melloware]

I do what you are doing all the time. one thing to try that we always do and seems to work is in stead of your "infoRequestCommentEditPanel" that you update why not wrap the whole dialog in a FORM and update that from the button.

Code: Select all

<h:form id="infoRequestCommentEditForm">
    <p:dialog id="infoRequestCommentEditModalId" ...
</h:form>

[kukeltje]

Because there is an appendTo="@(body)" that requires a form inside it if you want actions to be executed or a form to be filled out

[Melloware]

Ahh that makes sense.

[arnieAustin]

Glad to hear that I'm on the right track regarding the structure of my XHTML files.

Now, what about the bizarre behavior I'm seeing?

[arnieAustin]

I've finally gotten back to this and UGH... (insert favourite explitive here) yet AGAIN my life has been RUINED by JavaScript and HTML and DOMs!

So I have either an p:editor or p:textEditor in a p:dialog. When I click the ADD button it appears, works as expected, returns the text clob to the backing bean and all is well - it is saved to the database as HTML text:

Code: Select all

<p>test 1</p>

and yet when I click the EDIT button, everything in the backing bean works fine, but the AJAX update of the DOM fails and the UI is thereafter broken. I said, I said, BRO-KEN, son, you getting me?

I've altered my "read" logic and replaced the HTML text above with simply the string "byte me" and sure as death, the UI appears JUST FINE and works as expected.

I tried using an Apache Commons StringEscapeUtils to escape the text - still doesn't appear.

So neither p:editor or p:textEditor can be used in a modal dialog after the fact to edit text - is that what I'm understanding?

Or does SOMEONE have a work around for this bug, which is no doubt related to:

https://github.com/primefaces/primefaces/issues/2802

and

viewtopic.php?t=49927

[Melloware]

Well the issue you stated above would only affect TextEditor since that uses QuillJS. But you said it also happens with p:editor which does not use QuillJS.

I would suggest creating a small reproducible sample using PrimeFaces Test so we can see and debug the issue: https://github.com/primefaces/primefaces-test

[arnieAustin]

And where would I put this app?

[Melloware]

Create an issue here: https://github.com/primefaces/primefaces/issues

And you can attach your ZIP file of your runnable sample.