2 Replies Latest reply on Nov 3, 2010 5:20 AM by Leo van den berg

    questions for modalPanel

    Tina Ng Newbie

      Hello,
      Sorry to raise many questions related to modalPanel. But as I have many screen dealing with pop-up so ...


      In my main screen of proceeding the command, we have an inputText immatriculation (to search for materiel). We can search this field by clicking on the research icon next to this inputText, and it opens the modalPanel who also has inputText field immatriculation (declared inside pop-up), and other fields (allow to create a new materiel).


      My problem is that:


      1. Inside my modalPanel (when modalPanel is opened by clicking on the search icon), I cannot retrieve the value of inputText immatriculation.


      2. Inside my modalPanel, when I click on the commandLink to do create action, my pop-up is closed at the end of this action (but i dont want the pop-up closes)


      Here is the code of my main screen




      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
           xmlns:s="http://jboss.com/products/seam/taglib"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:c="http://java.sun.com/jstl/core"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:a4j="http://richfaces.org/a4j"
           xmlns:rich="http://richfaces.org/rich"
           template="../../layout/template.xhtml">
      
           <ui:define name="contenu">
           <ui:include src="/pages/admin/materielRechercher.xhtml" >
           </ui:include>
      
              <a4j:form id="commandeForm">
      
                <rich:modalPanel id="waitingPanel">
                     #{messages['general.pleaseWait']}
                </rich:modalPanel>
                <a4j:status onstart="Richfaces.showModalPanel('waitingPanel')"
                     onstop="Richfaces.hideModalPanel('waitingPanel')" />
      
                <a4j:region id="_blank" />
                <a4j:status id="_none" for="_blank" />
      
                <hardis:erreurBox id="errorBoxRegion"/>
      
                      <h:inputText id="immatriculation" maxlength="15" size="15" value="#{commandeToCreate.immatriculation}">
                <h:outputLabel for="immatriculation">#{messages['cmd.immatriculation']}<font     class="referenceEDC">(5)</font>
                <font class="red">*</font> : </h:outputLabel>
                <a4j:support ajaxSingle="true" event="onchange" action="#{gestionCommandes.searchImmatriculation()}"/>
                </h:inputText>
                <rich:jQuery selector="#immatriculation" query="focus()" />
                <h:graphicImage id="rechercherId" value="/img/icones/rechercher.png" styleClass="pointer" style="padding-left:5px; padding-right:5px;" title="#{messages['general.chercher']}" />
                <rich:componentControl for="materielRechercherModal" attachTo="rechercherId" operation="show" event="onclick"/>
      
                 </a4j:form>
      
           </ui:define>
      </ui:composition>
      



      Here is the code of the modalPanel


      <html ...>
      
      <ui:component>
          <a4j:form id="materielForm">
           <hardis:modal id="materielRechercherModal" width="600" height="600" title="#{messages['materiel.rechercher']}">
      
                 <h:inputText id="immatriculation" value="#{immatriculation}">
                    <a4j:support ajaxSingle="true" event="onchange" />
              </h:inputText>
              <a4j:commandButton ajaxSingle="true" image="/img/icones/rechercher.png" style="padding-left:5px;" title="#{messages['general.chercher']}" action="#{gestionMateriel.rechercher(true)}" reRender="cbGca, cbParc, typeMateriel, codeMateriau, nbCuve, nbEssieux, volumeUtile, nbTH, typeVidange, nature, etat, observation"/>
                          
      
           <h:outputLabel value="#{messages['cmd.mat.type.materiel']}">
              <font class="red">*</font> :
           </h:outputLabel>
           <h:selectOneMenu id="typeMateriel" value="#{abstractMateriel.typeMateriel}" disabled="#{isGca}">
                <s:selectItems value="#{gestionMateriel.allTypeMateriel}"
                     var="curTypeMateriel"
                     noSelectionLabel="#{messages['general.pleaseSelect']}"
                     label="#{curTypeMateriel.libelleSupport.translatedLibelle}" />
                <s:convertEntity/>
           </h:selectOneMenu>
      
              ...
              <h:panelGrid columns="3" width="55%">
           <h:commandLink id="idHidelink" onclick="Richfaces.hideModalPanel('materielRechercherModal')">
                <hardis:button title="#{messages['fermer']}" class="right"/>
                <rich:componentControl for="idHidelink" attachTo="idHidelink" operation="hide" event="onclick"/>
           </h:commandLink>
           <h:commandLink >
                <hardis:button title="#{messages['supprimer']}" class="right"/>
           </h:commandLink>
           <h:commandLink action="#{gestionMateriel.enregistrer}" >
                <hardis:button title="#{messages['enregistrer']}" class="right"/>
                          </h:commandLink>
           </h:panelGrid>
      </hardis:modal>
      </html>
      



      Thanks for your helps.

        • 1. Re: questions for modalPanel
          Tina Ng Newbie

          For your information:
          Before changing to modalPanel, I implemented it as a normal screen and I can get value of inputText immatriculation.

          • 2. Re: questions for modalPanel
            Leo van den berg Master

            Hi,


            maybe helpful, and a bit different approach, but I've found that sometimes modalpanel creates additional problems. What I do now is testing everything on a separate page and including this page through a primefaces  LIGHTBOX componenet. This is basically a iFrame which content is the other page. Besides a (skinnable!!) really great view it solves a number of modalpanel problems.


            Just give it a try.


            Leo