Problems with primefaces dialog parameters in liferay portlet

[Mario R, geändert vor 10 Jahren.]

Hello, I am using Liferay faces 3.2.4-ga5 With Liferay Portal 6.2 in combination with primefaces 4.0.
I created a portlet for a crud app that lists the elements and allows add and edit items in a primefaces dialog.
After adding an item i want to close the dialog, but if an validation error or business error occurs, the dialog should remain open and shows validation or error messages.
The problem is that oncomplete method of the command button pass null valueon validationFail parameter.
This is the dialog xhtml:

<!--?xml version="1.0" encoding="UTF-8" ?-->



    <ui:composition>

         <p:dialog id="SubtemaCreateDlg" widgetvar="SubtemaCreateDialog" modal="true" resizable="false" appendtobody="true" header="Crear Subtema" closeonescape="true">			
            <h:form id="SubtemaCreateForm">

                <h:panelgroup id="display">
					<h:panelgrid columns="2" cellpadding="5">
						<h:outputlabel for="tratado" value="#{i18n['etiqueta-tratado']}" style="font-weight:bold" />
						<p:selectonemenu id="tratado" value="#{subtemaBean.newRecord.tema.tratado}" valuechangelistener="#{subtemaBean.cargarTemaListener}" required="true">
							<f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
							<f:selectitems value="#{subtemaBean.tratados}" var="tratado" itemLabel="#{tratado.titulo}" itemValue="#{tratado}" />
							<f:converter binding="#{tratadoConverter}" />
							<f:ajax render="tema" />
						</p:selectonemenu>
						
						<h:outputlabel for="tema" value="#{i18n['etiqueta-tema']}" style="font-weight:bold" />
						<p:selectonemenu id="tema" value="#{subtemaBean.newRecord.tema}">
							<f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
							<f:selectitems value="#{subtemaBean.temas}" var="tema" itemLabel="#{tema.titulo}" itemValue="#{tema}" />
							<f:converter binding="#{temaConverter}" />
						</p:selectonemenu>
						
						<h:outputlabel for="titulo" value="#{i18n['etiqueta-titulo']}" style="font-weight:bold" />
						<p:inputtext id="titulo" value="#{subtemaBean.newRecord.titulo}"></p:inputtext>
						
						<h:outputlabel for="subtema" value="#{i18n['etiqueta-contenido']}" style="font-weight:bold" />
						<p:editor id="subtema" value="#{subtemaBean.newRecord.descripcion}" maxlength="4999" />
						
						<p:commandbutton actionListener="#{subtemaBean.save}" value="Guardar" update="display,:SubtemaFindForm:datalist" oncomplete="handleSubmit(xhr,status,args,SubtemaCreateDialog);" />
                    	<p:commandbutton value="Cancelar" onclick="SubtemaCreateDialog.hide()" />
					</h:panelgrid>
                </h:panelgroup>

            </h:form>

        </p:dialog>

    </ui:composition>

This is the jasvascript function

function handleSubmit(xhr, status, args, dialog) {
    var jqDialog = jQuery('#'+dialog.id);
    if(args.validationFailed) {
        jqDialog.effect('shake', { times:3 }, 100);
    } else {
    	dialog.hide();
    }
}

The args.validationFailed is undefined or null,

Anyone can helpme?

Thanks..

[Juan Gonzalez, geändert vor 10 Jahren.]

Hi Mario,

it's working fine for me, but without using any composite component.

Can you post some more snippets or a sample portlet?

[Mario R, geändert vor 10 Jahren.]

Hello, thanks for your reply!
This is the main page:

<!--?xml version="1.0"?-->
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:aui="http://liferay.com/faces/aui">
	<h:head />
	<h:body>
	  <p:messages id="messages" showDetail="false" autoUpdate="false" closable="true" />
	  <ui:include src="/views/SubtemaFind.xhtml"></ui:include>
	  <ui:include src="/views/SubtemaCreate.xhtml"></ui:include>
	  <ui:include src="/views/SubtemaEdit.xhtml"></ui:include>
	</h:body>
</f:view>

This is the list function

<!--?xml version="1.0" encoding="UTF-8" ?-->


    <ui:composition>
            <h:form id="SubtemaFindForm">
                <h:panelgroup id="display">
					<h:panelgrid columns="2" cellpadding="5">
						<h:outputlabel for="tratado" value="#{i18n['etiqueta-tratado']}" style="font-weight:bold" />
						<p:selectonemenu id="tratado" value="#{subtemaBean.newRecord.tema.tratado}" valuechangelistener="#{subtemaBean.cargarTemaListener}">
							<f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
							<f:selectitems value="#{subtemaBean.tratados}" var="tratado" itemLabel="#{tratado.titulo}" itemValue="#{tratado}" />
							<f:converter binding="#{tratadoConverter}" />
							<f:ajax render="tema" />
							<f:ajax render="datalist" />
						</p:selectonemenu>
						
						<h:outputlabel for="tema" value="#{i18n['etiqueta-tema']}" style="font-weight:bold" />
						<p:selectonemenu id="tema" value="#{subtemaBean.newRecord.tema}" valuechangelistener="#{subtemaBean.cargarSubtemaListener}">
							<f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
							<f:selectitems value="#{subtemaBean.temas}" var="tema" itemLabel="#{tema.titulo}" itemValue="#{tema}" />
							<f:converter binding="#{temaConverter}" />
							<f:ajax render="datalist" />
						</p:selectonemenu>
						
					</h:panelgrid>
					
						<p:datatable id="datalist" value="#{subtemaBean.items}" var="item" rowkey="#{item.idSubtema}" paginator="true" rows="10" rowsperpagetemplate="10,20,30,40,50" selectionmode="single" selection="#{subtemaBean.currentRecord}">

                <p:ajax event="rowSelect" update=":SubtemaFindForm:createButton :SubtemaFindForm:editButton :SubtemaFindForm:deleteButton" />
                <p:ajax event="rowUnselect" update=":SubtemaFindForm:createButton :SubtemaFindForm:editButton :SubtemaFindForm:deleteButton" />
				
				<p:column sortby="#{item.tema.tratado.titulo}" filterby="#{item.tema.tratado.titulo}">
                    <f:facet name="header">
                        <h:outputtext value="#{i18n['etiqueta-tratado']}" />
                    </f:facet>
                    <h:outputtext value="#{item.tema.tratado.titulo}" />
                </p:column>
				
				<p:column sortby="#{item.tema.titulo}" filterby="#{item.tema.titulo}">
                    <f:facet name="header">
                        <h:outputtext value="#{i18n['etiqueta-tema']}" />
                    </f:facet>
                    <h:outputtext value="#{item.tema.titulo}" />
                </p:column>

                <p:column sortby="#{item.titulo}" filterby="#{item.titulo}">
                    <f:facet name="header">
                        <h:outputtext value="#{i18n['etiqueta-titulo']}" />
                    </f:facet>
                    <h:outputtext value="#{item.titulo}" />
                </p:column>

            </p:datatable>
				<p:commandbutton id="createButton" icon="ui-icon-plus" value="#{i18n['etiqueta-nuevo']}" actionListener="#{subtemaBean.initCreate}" update=":SubtemaCreateForm" oncomplete="SubtemaCreateDialog.show()" />
	            <p:commandbutton id="editButton" icon="ui-icon-pencil" value="#{i18n['etiqueta-editar']}" update=":SubtemaEditForm" oncomplete="SubtemaEditDialog.show()" />
	            <p:commandbutton id="deleteButton" icon="ui-icon-trash" value="#{i18n['etiqueta-eliminar']}" actionListener="#{subtemaBean.delete}" update="datalist" />						
              </h:panelgroup>
            </h:form>
    </ui:composition>

These files are the complete implementation of my portlet. I don't check if the portlet run succesfully in a single page withouth composition. I'll try later maybe the composition is the problem.

Thanks...

[Juan Gonzalez, geändert vor 10 Jahren.]

Sorry Mario,

but I can't see the javascript function.

[Mario R, geändert vor 10 Jahren.]

Hello, the javascript functions its show in the previus message, also shows the dialog page SubtemaCreate.xhtml. I include in this message:
The button that execute de javascript function:

<p:commandbutton actionListener="#{subtemaBean.save}" value="Guardar" update="display,:SubtemaFindForm:datalist" oncomplete="handleSubmit(xhr,status,args,SubtemaCreateDialog);" />

The javascriptfunction (Its called by the page, but args.validationFailed parameter is null. I'm using an alert only for debug purpose..):

function handleSubmit(xhr, status, args, dialog) {
	alert(args.validationFailed);
    var jqDialog = jQuery('#'+dialog.id);
    if(args.validationFailed) {
        jqDialog.effect('shake', { times:3 }, 100);
    } else {
    	dialog.hide();
    }
}

The complete SubtemaCreate page :

<!--?xml version="1.0" encoding="UTF-8" ?-->
 
 

    <ui:composition>

         <p:dialog id="SubtemaCreateDlg" widgetvar="SubtemaCreateDialog" modal="true" resizable="false" appendtobody="true" header="Crear Subtema" closeonescape="true">            
            <h:form id="SubtemaCreateForm">

                <h:panelgroup id="display">
                    <h:panelgrid columns="2" cellpadding="5">
                        <h:outputlabel for="tratado" value="#{i18n['etiqueta-tratado']}" style="font-weight:bold" />
                        <p:selectonemenu id="tratado" value="#{subtemaBean.newRecord.tema.tratado}" valuechangelistener="#{subtemaBean.cargarTemaListener}" required="true">
                            <f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
                            <f:selectitems value="#{subtemaBean.tratados}" var="tratado" itemLabel="#{tratado.titulo}" itemValue="#{tratado}" />
                            <f:converter binding="#{tratadoConverter}" />
                            <f:ajax render="tema" />
                        </p:selectonemenu>
                        
                        <h:outputlabel for="tema" value="#{i18n['etiqueta-tema']}" style="font-weight:bold" />
                        <p:selectonemenu id="tema" value="#{subtemaBean.newRecord.tema}">
                            <f:selectitem itemLabel="#{i18n['etiqueta-seleccione']}" itemValue="" />
                            <f:selectitems value="#{subtemaBean.temas}" var="tema" itemLabel="#{tema.titulo}" itemValue="#{tema}" />
                            <f:converter binding="#{temaConverter}" />
                        </p:selectonemenu>
                        
                        <h:outputlabel for="titulo" value="#{i18n['etiqueta-titulo']}" style="font-weight:bold" />
                        <p:inputtext id="titulo" value="#{subtemaBean.newRecord.titulo}"></p:inputtext>
                        
                        <h:outputlabel for="subtema" value="#{i18n['etiqueta-contenido']}" style="font-weight:bold" />
                        <p:editor id="subtema" value="#{subtemaBean.newRecord.descripcion}" maxlength="4999" />
                        
                        <p:commandbutton actionListener="#{subtemaBean.save}" value="Guardar" update="display,:SubtemaFindForm:datalist" oncomplete="handleSubmit(xhr,status,args,SubtemaCreateDialog);" />
                        <p:commandbutton value="Cancelar" onclick="SubtemaCreateDialog.hide()" />
                    </h:panelgrid>
                </h:panelgroup>

            </h:form>

        </p:dialog>

    </ui:composition>

Thanks!

[Juan Gonzalez, geändert vor 10 Jahren.]

I need complete source to see the whole picture.

Where are you adding the javascript function? Any javascript error in browser console?

[Mario R, geändert vor 10 Jahren.]

Hello, thanks for your reply!
Actually, I found the real problem.
The problem is on jquery javascript function. The reference to the dialog is throwing this error: Syntax error, unrecognized expression: unsupported pseudo : PersonCreateDlg

The primefaces args are fine.

But I don´t know how to reference a component by id withouth throw the syntax error (javascript error).

Actually i using a work around function that use a css pseudo class instead of the dialog identifier.

Attached my complete demo source code for reference.

Thanks a lot!!

[Juan Gonzalez, geändert vor 10 Jahren.]

Hi Mario,

although this is not a problem from Liferay Faces, I got it working using this function:

function handleSubmit(xhr, status, args, dialog) {
		var jqDialog = dialog.jq;
		if (args.validationFailed) {					
			jqDialog.effect('shake', { times:3 }, 100);										
		} else {					
			dialog.hide();
		}
}

[Mario R, geändert vor 10 Jahren.]

Thak you so much!
Its works for me!

[Juan Gonzalez, geändert vor 10 Jahren.]

Glad it worked!

Thanks for using Liferay Faces.