10 Replies Latest reply on Feb 25, 2015 11:03 AM by Pierrick Jossinet

    suggestionbox in a modalpanel does not render properly

    Richard Hoffman Newbie

      I'm using FF3 and IE7, and RF 3.2.2.GA, and I've got a suggestion box in a modal panel.

      In FF3, when the component "suggests" stuff, the suggestions appear in two places:
      (1) where they belong, although it is only text with no border and is not selectable
      (2) in the top left corner of my screen, it looks right, but it is still not selectable

      In IE7, only (1) above happens.

      Javascript errors happen in both browsers:
      IE: Unspecified Error
      FF2: A is null

      This was broken a few releases ago, and was working correctly in 3.2.2.BETA3, so I'm rolling back to that until this works again.

      My suggestion box code is as follows (keep in mind this is inside a modalpanel):

      <h:form id="transportationAssetAddEditForm">
      .
      .
      .
      <h:panelGrid columns="2" width="550px" columnClasses="setLeft,setRight">
       <a4j:commandLink value="New Transportation Asset" action="#{transportationAssetManager.startAdd}" reRender="transportationAssetAddEditForm"
       style="font-size: 10pt;" onclick="blur();" oncomplete="doTheShim();">
       </a4j:commandLink>
       <a4j:region>
       <h:inputText value="#{transportationAssetManager.suggestionBoxField}" id="transportationAssetSearchField" />
       <!-- suggestion box for Search feature -->
       <rich:suggestionbox id="suggestionBoxId" for="transportationAssetSearchField" tokens=",[" rules="all"
       suggestionAction="#{transportationAssetManager.autocomplete}" var="result" fetchValue="#{result.assetName}" first="0"
       minChars="1" shadowOpacity="4" border="1" width="150" height="200" zindex="3000" frequency="0" shadowDepth="4"
       cellpadding="2" cellspacing="2" oncomplete="doTheShim();">
       <h:column>
       <h:outputText value="#{result.assetName}" />
       </h:column>
       <a4j:support event="onselect" action="#{transportationAssetManager.startEdit(result.assetName)}"
       reRender="transportationAssetAddEditForm" oncomplete="doTheShim();"/>
       </rich:suggestionbox>
       <h:outputLabel for="transportationAssetSearchField" value="Search Assets" style="margin-left: 4px;" />
       </a4j:region>
      </h:panelGrid>
      .
      .
      .
      </h:form>
      


        • 1. Re: suggestionbox in a modalpanel does not render properly
          Ilya Shaikovsky Master

          sorry but can't reproduce inside demosite envireonment after adding modal panel to suggestion box example.

          Maybe your own custom styles brokes the suggestion box? could you please share your sample in war?

          • 2. Re: suggestionbox in a modalpanel does not render properly
            Jordan Parker Newbie

            I see this same issue with 3.2.2.GA and FF3 / IE7 with a suggestionBox inside a modalPanel.

            • 3. Re: suggestionbox in a modalpanel does not render properly
              Richard Hoffman Newbie

              I've been testing this...

              Suggestionbox works in this case:
              (all in one file)
              <modalpanel tag>
              <contents of modalpanel>
              </modalpanel tag>

              Suggestionbox doesn't work in this case:
              (modalpanel in one file, contents included from another file)
              <modalpanel tag>
              <a4j:include tag to contents of modalpanel>
              </modalpanel tag>

              Any ideas?

              • 4. Re: suggestionbox in a modalpanel does not render properly
                Richard Hoffman Newbie

                Changing the a4j:include tag to a ui:include tag "fixes" the problem...

                It looks like a4j:include puts the suggestionbox div at the root of my DOM tree instead of where the included file is, and ui:include puts it where it belongs.

                I'd like to be able to use the a4j:include tag, though...any ideas?

                • 5. Re: suggestionbox in a modalpanel does not render properly
                  Jordan Parker Newbie

                  My issue seems to be a related; I use a4j:include and the suggestion box.

                  I'm using a modal panel in a ui:composition that is included in another page with a4j:include. That modal panel contains the h:inputText and rich:suggestionBox components.

                  I see the same problem, but the issue is resolved when I replace a4j:include with ui:include. However, this is a problem for my navigation since I use the partial page navigation feature of a4j:include.

                  • 6. Re: suggestionbox in a modalpanel does not render properly
                    Jordan Parker Newbie

                    Ok, I seem to have resolved the issue by adding ajaxRendered="false" attribute to my a4j:include and specifying the ID of the a4j:include tag in the reRender attribute of my partial page navigation. Now I have the partial page navigation and the modal panel / suggestion box display correctly.

                    So for example:

                    <a4j:include id="template" viewId="/test.xhtml" layout="block" ajaxRendered="false" />

                    and
                    <a4j:commandButton action="#{bean.action}" id="next" reRender="template" image="images/arrow.gif" />


                    Just curious, but what in RichFaces has changed that caused this functionality to change?

                    • 7. Re: suggestionbox in a modalpanel does not render properly
                      Ilya Shaikovsky Master

                      Yes, guys ajaxRendered="false" and reRender defined for other command controls is the only way.

                      Explanation is simple and this is not a bug from the beggining. Imagine the request from suggestion box. When responce comes - suggestion draws its popup, BUT in the same time - include (which is designed for wizards creation and ajaxRendered by default) - updates itself again. So popup redrawn again but in this time without positioning data and etc..

                      So suggestion should update only itself and other components if need. And only other command components should update whole include.

                      • 8. Re: suggestionbox in a modalpanel does not render properly
                        Jeff Jo Newbie

                        What worked for me was surrounding the <rich:suggestionbox/> tag with a <a4j:region/>

                        • 9. Re: suggestionbox in a modalpanel does not render properly
                          elsarfhem Newbie

                          i know this is an old post but there's someone using this version of the framework... so I would specify that this configuration worked for me

                           

                          <a4j:form id="editPanelCompetenzeForm">
                                                      <a4j:region renderRegionOnly="true">
                                                          <h:panelGroup layout="block" style="position:relative;">
                                                              <h:inputText id="descrCompetenza" value="#{competenzeController.selectedCompetenza.descrizione}" maxlength="60" styleClass="header" />
                                                              <rich:suggestionbox for="descrCompetenza" suggestionAction="#{competenzeController.competenzeAutocomplete}" var="v" fetchValue="#{v}" ajaxSingle="true" >
                                                                  <h:column>
                                                                      <h:outputText value="#{v}" />
                                                                  </h:column>
                                                              </rich:suggestionbox>
                                                          </h:panelGroup> 
                                                      </a4j:region>
                                      </a4j:form>
                          

                           

                          in this case the key is renderRegionOnly="true" attribute

                          • 10. Re: suggestionbox in a modalpanel does not render properly
                            Pierrick Jossinet Newbie

                            Thanks you guys, you save my day

                            The last answer work perfectly in my case