Bloquer un onglet

Version imprimable

Bloquer un onglet

Bonsoir,
J'ai une page avec plusieurs onglets, chaque onglet est un formulaire. je veux bloquer un utilisateur sur un onglet tant qu'il n'a pas validé le formulaire, en javascript je parviens à detecter qu'une modif s'est faite sur un formulaire, j'affiche bien la popup de confirmation (oui/non) mais quand l'utilisateur confirme,il passe pas à l'onglet suivant mais recharche ma page en cours, voila un bout de code js censé afficher la popup:
Code:

1 2 3 4 5 6 7 8 9 10 11 ... var valDetecteur=document.getElementById(currentFormName+sepIdentifiant+idDetecteur).value; alert('valDetecteur='+valDetecteur) if (valDetecteur!=null && valDetecteur!="") { Richfaces.showModalPanel(currentFormName+sepIdentifiant+idPanelSaisieNonSauvee); return false; } else return true;
Voila le contenu de mon modalPanel affiché:
Code:

1 2 3 4 5 6 7 8 9 10 <h:outputText value="#{std.lb_erreur_onglet}"/> <rich:toolBar id="toolBarSaisieNonSauveeId"> <h:commandLink onclick="Richfaces.hideModalPanel('idPanelSaisieNonSauvee');"> <muc:boutonEpide paramBtnText="#{std.lb_confirmer}"/> </h:commandLink> <h:commandLink onclick="Richfaces.hideModalPanel('idPanelSaisieNonSauvee');return false;"> <muc:boutonEpide paramBtnText="#{std.lb_retour}"/> </h:commandLink> </rich:toolBar>
Une idée?

30/09/2009, 08h51
Sniper37

Ce n'est pas des onglets, je vois qu'une toolBar; tu veux dire quoi par onglets?
et je ne vois pas non plus de validation..

Voila le fichier template de toutes nos pages :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:muc="http://www.epide.fr/muComponents">
 
 
         <f:view>
         <script language="JavaScript" src="${facesContext.externalContext.requestContextPath}/js/commun.js"></script>
           <muc:menuTabs paramIdTab="idAccueil" paramTab="tab2" selecTab="#{commun.dataBean.defaultEcran}" 
           				 paramOnChange="return peutChangerDeTab();" paramContent="middle" paramSwitchType="server">            
             <ui:define name="menuContent"> 
 
        		 <rich:tab id="EtatCivil" label="#{acc.onglet_etat_civil}" name="EtatCivil" onlabelclick="alert(this.id)">
 					 <ui:include src="/pages/pre-admission/accueil/admission.xhtml" />
        	     </rich:tab>
 
       			 <rich:tab id="situFam" label="#{acc.onglet_situ_familiale}" name="situFam" onlabelclick="alert(this.id)">
       		      	 <ui:include src="/pages/pre-admission/accueil/situationPersoFamiliale.xhtml" />
		  		 </rich:tab> 
       			  <rich:tab id="docsFournis" label="#{acc.onglet_docu_fournis}" name="docsFournis" onlabelclick="alert(this.id)">
       			  	<ui:include src="/pages/pre-admission/accueil/documentsFournis.xhtml" />
       			 </rich:tab>
 
       			 <rich:tab label="#{acc.onglet_orig_candid}" name="origiCandi">	
       				<ui:include src="/pages/pre-admission/accueil/origineOrganismeSuivi.xhtml" /> 	
       			 </rich:tab>
       			  <rich:tab label="#{acc.onglet_form_pre_acq}" name="formPreAcq">	
       			  	 <ui:include src="/pages/pre-admission/accueil/formationsPreAcquises.xhtml" />	       			
       			 </rich:tab>
       			 <rich:tab label="#{acc.onglet_dom_bancaire}" name="domBanc">
       				  <ui:include src="/pages/pre-admission/accueil/domBancaire.xhtml" />	       			
       			 </rich:tab>
       			 <rich:tab label="#{acc.onglet_mobilite}" name="mobilite" id="mobilite">	
       			 	  <ui:include src="/pages/pre-admission/accueil/mobilite.xhtml" />	       			
       			 </rich:tab>  
       			  <rich:tab label="#{acc.onglet_fiche_circuit}" name="ficheCir">
       			   <ui:include src="/pages/pre-admission/accueil/ficheCircuit.xhtml"/>	       			
       			 </rich:tab>
 
       			 <rich:tab label="Edtion Individuelle" name="edition">
       			  <ui:include src="/pages/pre-admission/accueil/edition.xhtml"/>	       			
       			 </rich:tab>   			 
 
             </ui:define>               
 
 
            </muc:menuTabs> 
 
		 </f:view>
 
</html>

Comme tu pourras le voir un onglet c'est en fait un rich:tab.
Le toolBar c'est juste pour aligner les boutons.
Etant dans un formulaire (c'est à dire dans un onglet), je veux bloquer le passage à l'onglet suivant quand l'utilisateur a saisi et n'a pas validé.
je voulais avec la fonction js peutChangerTab dont le bout de code est ci dessous bloquer ce passage.
Une idée?

30/09/2009, 09h39
Sniper37

Il suffit de changer le switchType à ajax ou server, ce qui bloquerais le changement d'onglet si il y' a une erreur de validation
30/09/2009, 09h59
DevServlet

Il est déjà à server, c'est pas des erreurs de validations techniques, je veux bloquer l'utilisateur à passer à un autre onglet s'il n'a pas validé l'onglet en cours ayant effectué une saisie sans sauvegarde.
En fait voila le scénario qui avait été demandé par rapport à la gestion des onglets:
-Lors de la creation d'un utilisateur, l'onglet d'entrée doit être la seule accessible tant l'utilisateur en cours de creation n'a pas été validé, ça ca marche bien car j'affiche une popup d'erreur contenant un bouton retour qui ferme simplement la popup et comme ca on reste sur le même.ca c'est parfait ca marche avec la fonction onchangeTab d'un rich:tab, quand tu lui renvois false, tu restes sur le même onglet.
-Maintenant lors de la modification, lorsqu'on a modifié un champ du formulaire sans validation et quand on veut passer à l'onglet suivant, je detecte et j'affiche une popup cette fois ci avec 2 boutons (oui/non), le non , on reste sur le même onglet et on ferme la popup, c'est le oui qui ne marche pas, il recharge ma page, au lieu de me changer l'onglet.
Dsl d'être si long, j'espère me faire comprendre.
30/09/2009, 10h40
Sniper37

tu peux utiliser l'attribut selectedTab,

lorsque tu clique sur une action et tu veux changer de tab, tu peux juste modifier la valeur de selectedTab,
un booléen peux t'aider à ne pas afficher ou ne pas activer les tabs, le booléen tu peux changer sa valeur avec un a4j:actionparam dans le page ou dans l'action en java.
30/09/2009, 11h16
DevServlet

Code:

lorsque tu clique sur une action et tu veux changer de tab, tu peux juste modifier la valeur de selectedTab,

C'est la solution sur laquelle je suis parti déjà, elle necessite un rechargement du template pour que le changement soit effectif.

Code:

un booléen peux t'aider à ne pas afficher ou ne pas activer les tabs

, j'avais déjà essayé, le client ne veut voir ni les onglets désactivés ou cachés, exigence cosmétique.

Code:

un a4j:actionparam dans le page ou dans l'action en java.

J'ai jamais essayé ça.

J'implémente donc la premiere solution et je reviens vers vous.
Merci d'avance
01/10/2009, 10h24
DevServlet

C'est bon ca marche maintenant.
Si ca peut aider quelqu'un d'autre, voila ce que je fais.
-Lors d'un clic sur l'onglet où on veut se rendre, avec l'evement onlabelclick, je recupère le nom de l'onglet sur lequel je veux me rendre, si l'utilisateur confirme vouloir s'y rendre je fais un appel serveur au cours duquel je change la valeur du selectTab et je reaffiche la page.
Voila voila.
Merci pour vos reponses.