Bloquer un onglet

**DevServlet** · 29/09/2009, 18h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Sniper37** · 30/09/2009, 08h51

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..

**DevServlet** · 30/09/2009, 09h32

Voila le fichier template de toutes nos pages :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Sniper37** · 30/09/2009, 09h39

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

**DevServlet** · 30/09/2009, 09h59

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.

**Sniper37** · 30/09/2009, 10h40

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.

**DevServlet** · 30/09/2009, 11h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**DevServlet** · 01/10/2009, 10h24

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.

Bloquer un onglet

JSF Java

Discussions similaires

Partager

Partager