Primefaces Autocomplete in dialogs

[Jan Bub, modifié il y a 11 années.]

Hi,

I have som problems with my the Primefaces Autocomplete component if I use it inside a dialog. Using it directly in an page works find, but if I use it inside a dialog I cant type any longer after he got the first time the suggestions. The Input ist blocked. I do not no if this is a special Liferay problem or a standard error. Do anybody know about that problem?

[Jan Bub, modifié il y a 11 années.]

Ok, I saw that there is a primefaces update. It seems that there is a bug in primefaces 3.3. Now with the version 3.3.1 everything works fine.

[Pravin Gate, modifié il y a 11 années.]

I am also facing same problem, when I use primefaces autocomplete component inside dialog box.

I have also added latest 3.3.1 jar in my project lib.

But still it doesn't worked.

why?

[Jan Bub, modifié il y a 11 années.]

Hm. I'm using Liferay 6.1.0 CE, Primefaces 3.3.1 and the trunk version of liferay faces.

[Pravin Gate, modifié il y a 11 années.]

I 'm also using Liferay 6.1.0 CE, Primefaces 3.3.1 .

[Neil Griffin, modifié il y a 11 années.]

@Pravin: Maybe you could paste the XHTML markup that you're using for the dialog.

@Jan: When you get a chance, could you compare Pravin's markup with yours, since yours is working?

Thanks, Neil

[Pravin Gate, modifié il y a 11 années.]

Hi Neil, This is my xhtml

<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



	</h:head>
	<h:body>
		<p:messages id="msgs" />
		<p:growl id="growl" showDetail="true" />
		<h:form>

		<p:panel id="p">
		<p:commandbutton value="Open Dialog Box" onclick="dialog.show()" update="fm" immediate="true" />
		</p:panel>
		<p:dialog id="myDialog" widgetvar="dialog" modal="true" width="300">
		<center>
<h:panelgrid id="d" columns="2">

<h:outputlabel value="Name: " for="name" />		
<p:autocomplete value="#{autoCompleteBean.selectedPlayer1}" id="basicPojo" completemethod="#{autoCompleteBean.completePlayer}" var="p" itemlabel="#{p.name}" itemvalue="#{p}" converter="player" forceselection="true">  
  
                <f:facet name="itemtip">  
                    <h:panelgrid id="a" columns="2" cellpadding="5">  
                        <f:facet name="header">  
                            <p:graphicimage value="/images/barca/#{p.photo}" width="40" height="50" />  
                        </f:facet>  
  
                        <h:outputtext value="Name: " />  
                        <h:outputtext id="modelNo" value="#{p.name}" />  
  
                        <h:outputtext value="Number " />  
                        <h:outputtext id="year" value="#{p.number}" />  
  
                        <h:outputtext value="Position " />  
                        <h:outputtext value="#{p.position}" />  
                    </h:panelgrid>  
                </f:facet>  
  
            </p:autocomplete>  

			<p:commandbutton value="Ok " style="margin:3px;display: table-cell;vertical-align: middle;" action="#{autoCompleteBean.saveData}" update="a,p :growl" />
			
		</h:panelgrid></center>
		</p:dialog></h:form>
			</h:body>
</f:view>

[Neil Griffin, modifié il y a 11 années.]

@Pravin: Thanks for the paste.

@Jan: Is this similar to what you're doing?

[Pravin Gate, modifié il y a 11 années.]

Neil , Have you got any solution for this?

[Neil Griffin, modifié il y a 11 années.]

Currently waiting to hear back from Jan.

[Jan Bub, modifié il y a 11 années.]

Forgive me for the long time you have to wait.

<!--?xml version="1.0" encoding="UTF-8"?-->
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui" xmlns:aui-cc="http://portletfaces.org/alloyfaces/aui-cc" 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:bridge="http://liferay.com/faces/bridge" xmlns:p="http://primefaces.org/ui" xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:liferay-security="http://liferay.com/faces/security">

	<h:head />
	<h:body>
		<h:form id="formStart" prependid="false">
		
			<p:growl id="messages" />  

			<!-- Datentabelle/Buchliste -->
			<p:datatable id="booksTable" var="book" value="#{ebookManagementOverviewController.books}" emptymessage="Keine Büher gefunden">

				<!-- Spalte Buchtitel -->
				<p:column id="bookTitle" headertext="Buchtitel" sortby="#{book.bookTitle}" filterby="#{book.bookTitle}" filtermatchmode="contains">
					<p:commandlink update=":formDetailDialog:bookDetail" oncomplete="showBookDialog.show()" title="View Book Detail" value="#{book.bookTitle}">
						<f:setpropertyactionlistener value="#{book}" target="#{ebookManagementOverviewController.currentBook}" />
					</p:commandlink>
				</p:column>
				<!-- Spalte Buchautoren -->
				<p:column id="bookAuthors" headertext="Autoren" filterby="#{book.authors}" filtermatchmode="contains">
					<ul>
						<ui:repeat value="#{book.authors}" var="author">
							<li>#{author.lastName}, #{author.firstName}</li>
						</ui:repeat>
					</ul>
				</p:column>
				<!-- Spalte Buchverleger -->
				<p:column id="bookPublisher" headertext="Verleger" sortby="#{book.publisherName}" filterby="#{book.publisherName}" filtermatchmode="contains">
					
					<h:outputtext value="#{book.publisherName}" />
				</p:column>
				<!-- Spalte Buchbewertung -->
				<p:column id="bookRating" headertext="Bewertung" sortby="#{book.avarageRating.toString()}">
					<p:rating value="#{book.avarageRating}" readonly="true" />
				</p:column>
				<!-- Spalte mit Button -->
				<p:column id="bookEdit" rendered="#{ebookManagementOverviewController.permissionChecker.signedIn}">
					<p:commandbutton id="downloadButton" icon="ui-icon-disk" actionlistener="#{ebookManagementOverviewController.downloadBook(book)}" title="Download" ajax="false" rendered="#{ebookManagementOverviewController.permissionChecker.hasPermission(liferay.themeDisplay.scopeGroupId, book.class.simpleName, 
								  book.bookId, DOWNLOAD)}">
					</p:commandbutton>
					<p:commandbutton id="editDialogButton" icon="ui-icon-pencil" title="Edit" oncomplete="editbookDialog.show()" update=":formEditDialog:editBookPanel" rendered="#{ebookManagementOverviewController.permissionChecker.hasPermission(liferay.themeDisplay.scopeGroupId, book.class.simpleName, 
								  book.bookId, UPDATE)}">
						<f:setpropertyactionlistener value="#{book}" target="#{ebookManagementOverviewController.currentBook}" />
					</p:commandbutton>
					<p:commandbutton id="deleteDialogButton" icon="ui-icon-trash" title="Delete" oncomplete="deleteBookDialog.show()" rendered="#{ebookManagementOverviewController.permissionChecker.hasPermission(liferay.themeDisplay.scopeGroupId, book.class.simpleName, 
									book.bookId, DELETE)}">
						<f:setpropertyactionlistener value="#{book}" target="#{ebookManagementOverviewController.currentBook}" />
					</p:commandbutton>
					
					<liferay-security:permissionsurl modelresource="Book" modelresourcedescription="Book" resourceprimkey="#{book.bookId}">
						<h:outputtext value="TEST"></h:outputtext>
						
					</liferay-security:permissionsurl>
				</p:column>
			</p:datatable>

			<p></p>

			<!-- Button Buch hochladen -->
			<p:commandbutton id="_upload" value="Buch hochladen" action="uploadView.xhtml" ajax="false" styleclass="cmd-button" rendered="#{liferay.userHasPortletPermission['ADD_BOOK']}">
			</p:commandbutton>
			</h:form>

		...


			<!-- Popup Dialog zum Editieren eines -->
			<h:form id="formEditDialog" prependid="false">
			<p:dialog header="Edit Book" widgetvar="editbookDialog" modal="true"> 
			<p:panel id="editBookPanel">
				<p:growl id="editMessages" />
					<aui:fieldset>

						<aui:field label="Buchtitel:">
							<p:inputtext id="bookTitle" required="true" requiredMessage="Buchtitel ist erforderlich" size="55" value="#{ebookManagementOverviewController.currentBook.bookTitle}" />
							<p:message for="bookTitle" showSummary="" />
						</aui:field>
						<aui:field label="Author(en):">
							<p:autocomplete value="#{ebookManagementOverviewController.currentBookAuthors}" var="author" itemLabel="#{author.lastName}, #{author.firstName}" itemValue="#{author}" id="bookAuthors" multiple="true" completeMethod="#{inputHelperController.completeAuthor}" converter="authorConverter" forceSelection="false" size="35" />
							<p:message for="bookAuthors" />
						</aui:field>
						<aui:field label="ISBN:">
							<p:inputtext id="bookISBN" size="55" value="#{ebookManagementOverviewController.currentBook.isbn}">
								<f:validator validatorId="isbnValidator" size="55" />
							</p:inputtext>
							<p:message for="bookISBN" showSummary="" />
						</aui:field>
						<aui:field label="Datum:">
							<p:calendar pattern="dd.MM.yyyy" id="bookDate" value="#{ebookManagementOverviewController.currentBook.date}" lang="de" showButtonPanel="true" navigator="true" size="55" />
							<p:message for="bookDate" />
						</aui:field>
						<aui:field label="Verleger:">
							<p:autocomplete value="#{ebookManagementOverviewController.currentBookPublisher}" id="bookPublisher" var="publisher" itemLabel="#{publisher.publisherName}" itemValue="#{publisher}" converter="publisherConverter" completeMethod="#{inputHelperController.completePublisher}" forceSelection="false" size="55" />
						</aui:field>


						<aui:field label="Kurzbeschreibung:">
							<p:inputtextarea id="bookDescription" rows="5" cols="30" counter="counter" maxlength="255" counterTemplate="{0} characters remaining." autoResize="false" value="#{ebookManagementOverviewController.currentBook.description}" />
							<br>
							<h:outputtext id="counter" lang="de" />
						</aui:field>
						<aui:field label="Tag(s):">
							<p:autocomplete value="#{ebookManagementOverviewController.assetTagNames}" id="bookTags" multiple="true" completeMethod="#{inputHelperController.completeTag}" forceSelection="false" effect="" />
							<p:message for="bookTags" />
						</aui:field>
						<aui:field label="Kategorie(n):">
							<p:tree value="#{ebookManagementOverviewController.root}" var="node" id="tree" selectionmode="checkbox" selection="#{ebookManagementOverviewController.currentBookSelectedNodes}">
								<p:treenode id="treeNode">
									<h:outputtext value="#{node.name}" id="lblNode" />
								</p:treenode>
							</p:tree>

						</aui:field>
						<aui:field label="Ihre Bewertung">
							<p:rating value="#{ebookManagementOverviewController.currentBookUserRating}"></p:rating>
						</aui:field>

					</aui:fieldset>
					<p:commandbutton value="Speichern" update=":formEditDialog:editBookPanel,:formStart" actionListener="#{ebookManagementOverviewController.saveBook}" />
			</p:panel>
			
			</p:dialog>
			</h:form>

	</h:body>
</f:view>

[Neil Griffin, modifié il y a 11 années.]

@Jan: Thanks!

@Pravin:

In your Facelet view, I see this hierarchy:

<h:form>
  <p:panel>...</p:panel>
  <p:dialog>
    <h:panelgrid>
      <p:autocomplete>
        <f:facet>
          <h:panelgrid>...</h:panelgrid>
        </f:facet>
      </p:autocomplete>
    <!-- MISSING CLOSING h:panelGrid -->
  <!-- MISSING CLOSING p:dialog -->
</h:panelgrid></p:dialog></h:form>

In Jan's Facelet view, I see this:

<h:form>
  <p:dialog>
    <p:panel>
      <aui:fieldset>
        <aui:field>
          <p:autocomplete />
        </aui:field>
      </aui:fieldset>
    </p:panel>
  </p:dialog>
</h:form>

First, you can try fixing the missing closing tags. But if that doesn't work, then I would try making your XHTML look more like Jan's to see if that works. Specifically, I would try temporarily removing the f:facet to see if that fixes the problem. Jan's usage of aui:fieldSet and aui:field are nice, but should not be necessary for your testing.