Afficher riche: popupPanel sur le clic de riche: onglet

Question

Une page contient le panneau d'onglets de visage riche et ayant 4 onglets. Dans l'un des onglets, j'ai une zone de texte et un bouton de sauvegarde. Sans enregistrer les données Si je passe à un autre onglet, il devrait afficher la fenêtre indiquant les données non enregistrées et empêcher la navigation.

J'ai essayé d'appeler un popup en utilisant différents attributs de chargement de script java de rich: tabPanel mais ne servant pas le but.

Voici le code

<rich:tabPanel onclick="#{rich:component('confirmation')}.show();return false" switchType="ajax" id="wizardTab" itemChangeListener="#{bean.tabChange}" activeItem="#{bean.activeTab}"> 
    <rich:tab id="tab1" 
       // tab1 

    </rich:tab> 
    <rich:tab id="tab2" 


    </rich:tab> 
    <rich:tab id="tab3" 


    </rich:tab> 

    <rich:tab id="tab4" 
         <h:inputText id="test" 
            styleClass="span2" maxlength="25" 
            value="#{bean.rowForChange.code}"> 
            <f:ajax event="blur" execute="@this"/> 
         </h:inputText> 
         <h:commandButton value="Update" styleClass="button" 
                style="width:160px" 
                action="#{bean.updtae}"> 
             <a4j:ajax execute="paramValue" 
                render="table simeditPnl" /> 
         </h:commandButton> 

    </rich:tab> 

</rich:tabPanel> 

    <rich:popupPanel render="#{jCRDataRefreshManagement.updateStatus}" id="confirmation" modal="false" autosized="true" resizeable="false"> 
      <f:facet name="header">Confirmation</f:facet> 
     <h:panelGrid> 
      <h:panelGrid columns="2"> 
      <h:graphicImage value="/alert.png" /> 
     <h:outputText value="You have unsaved changes. Are you sure?" style="FONT-SIZE: large;" /> 
      </h:panelGrid> 
      <h:panelGroup> 
      <input type="button" value="OK" 
      onclick="#{rich:component('confirmation')}.hide();submit();return false" /> 
     <input type="button" value="Cancel" 
      onclick="#{rich:component('confirmation')}.hide();return false" /> 
      </h:panelGroup> 
     </h:panelGrid> 
    </rich:popupPanel> 

Si les données non enregistrées sur la zone de texte sur l'onglet 4 et essayé de cliquer sur un autre onglet, il doit rester dans l'onglet 4 et afficher la poupup de confirmation comme ci-dessus.

Avec cette implémentation, mon popup s'ouvre chaque fois que je clique sur l'onglet.

S'il vous plaît signaler l'erreur que je fais ou donner la suggestion pour le scénario ci-dessus. Toute aide apprêtée

Answer 1

Au lieu de cliquer, utilisez onbeforeitemchange et renvoyez false si vous ne voulez pas que les onglets changent.

Si vous voulez retarder l'utilisation de commutation quelque chose comme ceci:

saveTabs = function(event) { 
    oldItem = event.rf.data.oldItem, 
    newItem = event.rf.data.newItem; 
} 

<rich:tabPanel id="tabPanel" onbeforeitemchange="saveTabs(event); return false;" > 

Et quand vous décidez de changer l'utilisation:

RichFaces.component("form:tabPanel").__itemsSwitcher().exec(oldItem, newItem);