Fileupload in popupPanel?!?

[sebastian_goetz]

Hi there,

I tried to use a fileupload component inside a popupPanel with no success. My fileupload listener method in the backing bean gets never called. If I move the fileupload component out of the popupPanel into the default visible page area, it works smooth. Since I am not very familiar with richfaces I may have missed something I guess. But what??

Here are the major parts of the code:

<ui:define name="content">
                <h:form>
                    <rich:toolbar style="width:100%;">
                        <rich:toolbarGroup>
                            <h:commandButton value="#{messageSource['lbl_doNew']}" action="#{projectCardParameterBean.doNew}"/>
                            <h:commandButton value="#{messageSource['lbl_doEdit']}" action="#{projectCardParameterBean.doEdit}"
                                rendered="#{not empty projectCardParameterBean.projectCardParameter and not projectCardParameterBean.projectCardParameter.transient}"/>
                            <h:commandButton value="#{messageSource['lbl_doImport']}">
                                <rich:componentControl target="popup" operation="show" />
                            </h:commandButton>
                            <rich:popupPanel id="popup" modal="true" style="text-align:center;"
                                onmaskclick="#{rich:component('popup')}.hide()" width="500" height="180" minHeight="180">
                                <f:facet name="header">
                                    <h:outputText value="#{messageSource['lbl_selectImportFile']}" />
                                </f:facet>
                                <f:facet name="controls">
                                    <h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">#{messageSource['lbl_doClose']}</h:outputLink>
                                </f:facet>
                                <h:panelGrid columns="1" style="width:100%; height:120px;">
                                    <rich:fileUpload id="ParameterUpload"
                                        addLabel="#{messageSource['lbl_doSelect']}"
                                        clearAllLabel="#{messageSource['lbl_doClearAll']}"
                                        clearLabel="#{messageSource['lbl_doClear']}"
                                        deleteLabel="#{messageSource['lbl_doDelete']}"
                                        doneLabel="#{messageSource['lbl_done']}"
                                        serverErrorLabel="#{messageSource['lbl_serverError']}"
                                        sizeExceededLabel="#{messageSource['lbl_sizeExceeded']}"
                                        uploadLabel="#{messageSource['lbl_doStart']}"
                                        fileUploadListener="#{projectCardParameterBean.processFileUpload}"
                                        acceptedTypes="xml"
                                        style="width:100%; height:90px;">
                                        <a4j:ajax event="uploadcomplete" execute="@none" render="import" />
                                    </rich:fileUpload>
                                    
                                    <rich:message for="ParameterUpload" id="ParameterUploadMsg" showDetail="true" ajaxRendered="true"/>
                                    
                                    <h:commandButton id="import" value="#{messageSource['lbl_doImport']}"
                                        onclick="#{rich:component('popup')}.hide();"
                                        action="#{projectCardParameterBean.doImport}"
                                        rendered="#{not empty projectCardParameterBean.importFile}"/>
                                </h:panelGrid>
                            </rich:popupPanel>
                        </rich:toolbarGroup>
                        <rich:toolbarGroup style="width:100%">
                            <outputText value=""/>
                        </rich:toolbarGroup>
                        <rich:toolbarGroup location="right">
                            <rich:autocomplete id="ajaxSearch" mode="cachedAjax" minChars="1"
                                autocompleteMethod="#{projectCardParameterBean.autocomplete}" autofill="true"
                                var="pcp" fetchValue="#{pcp.name}" immediate="true"
                                layout="grid" value="#{projectCardParameterBean.searchPhrase}" onkeypress="return event.keyCode != 13;"
                                onselectitem="#{rich:element('ajaxSearchButton')}.focus();">
                                <h:outputText value="#{pcp.name} #{prm:enclose(pcp.projectType, '(', ')')}" />
                                <rich:tooltip mode="client" followMouse="false" showDelay="700" layout="block">
                                    <h:outputText value="#{messageSource['tip_ajaxSearch']}"/>
                                </rich:tooltip>
                            </rich:autocomplete>
                            <h:commandButton id="ajaxSearchButton" value="#{messageSource['lbl_doShow']}" action="#{projectCardParameterBean.doSearch}"/>
                        </rich:toolbarGroup>
                    </rich:toolbar>

...

Regards,

Sebastian

[pvito]

Hi, Sebastian

try set properties domElementAttachment="form" in rich:popupPanel

[sebastian_goetz]

Hi Vitaliy,

thank you very much. That is it.

But I would like to understand what this attribute does if you don't mind.

Thanks again,

Sebastian

[pvito]

It is Taken from : http://docs.jboss.org/richfaces/latest_4_0_X/Component_Reference/en-US/html/chap-Component_Reference-Panels.html#sect-Component_Reference-Panels-richpopupPanel

The <rich:popupPanel> component is usually rendered in front of any other objects on the page. This is achieved by attaching the component to the <body> element of the page, and setting a very high "z-index" (the stack order of the object). This approach is taken because relatively-positioned elements could still overlap the pop-up panel if they exist at higher levels of the DOM hierarchy, even if their z-index is less than the <rich:popupPanel> component.

To avoid form limitation of the pop-up panel on pages where no such elements exist, the <rich:popupPanel> component can be reattached to its original DOM element by setting domElementAttachment to either parent or form.

Regards,

Vitaliy

[healeyb]

Just to add a little to Vitaliy's explanation, the main thing is trying to position the dialog relative to the

viewport (typically centrally), but a div is only positioned relative to the browser window if it has an

absolute position and is not nested inside any tag that has absolute, relative or fixed position.

Otherwise it is positioned relative to the containing tag. So a dialog gets moved in the DOM tree to be

a direct descendant of the <body> tag. So if you have something like this:

<body>

   <form>

      <div id="mydialog">

          <input type="submit" .../>

       </div>

   </form>

<body>

It gets refactored to this:

<body>

   <div id="mydialog">

         <input type="submit" .../>

   </div>

    <form>

   </form>

<body>

You see the problem, the commandButton is no longer inside the form and won't work.

Regards,

Brendan.

[mcmurdosound]

you could add a form into your popupPanel. This would then be moved, too.