Discussion :

[loic20h28]

Bonjour tout le monde,

Je suis entrain de réaliser un site web et j'utilise donc jquery UI.
Sur mon site j'ai des onglets jquery ui (tabs) et lorsqu'un utilisateur click sur un onglet alors qu'il est en cours sur un autre onglet, je souhaiterais afficher une boîte de dialog lui demandant s'il souhaite continuer alors qu'il risque de perdre ses données....
Exemple :
1) Je suis sur l'onglet "Test1" et j'ai commencé à le remplir
2) On me demande d'aller sur l'onglet "Test2" pour X raison.
3) Dans ce cas, je souhaiterais qu'une boîte de dialog s'affiche avec comme message par exemple "Souhaitez vous continuer ?" (Les boutons de cette boîte de dialog soit "Oui"->On affiche donc l'onglet "Test2" soit "Non"->On reste sur l'onglet "Test1".)

Mais je voit pas trop comment faire.
Voici mon html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="tabs">
<ul>
<li><a href="test1.html">Test1</a></li>
<li><a href="test2.html">Test2</a></li>
</ul>
</div>
 
<div id="dialog_info_onglet" title="Souhaitez-vous continuer ?">
	Souhaitez-vous continuer ?
</div>

Voici mon code JS :

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
 
jQuery(document).ready(function(){
$('div.tabs').tabs({
beforeActivate: function( event, ui ) {
			$('#dialog_info_onglet').dialog({
				buttons: {
					"Oui": function() {
						$(this).dialog("close");
					},
					"Non": function() {
						$(this).dialog("close");
					}
				}
			});
		}
})
});

Mon souci c'est que la boîte de dialog s'ouvre alors que le nouvelle onglet est déjà ouvert.
Est-il possible d'ouvrir la boîte de dialog et en fonction du bouton ("oui" ou "non") ouvrir le nouvel onglet("Test2" par exemple) ou rester sur l'ancien onglet("Test1" par exemple) ? Si oui, qu'elqu'un pourrait m'expliquer comment faire car je voit pas du tout ?

Merci par avance.
Loïc.

[danielhagnoul]

Code :

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

1
2
3
4
5
6
7
8
9
$( "#tabs" ).tabs({
    "beforeActivate" : function( event, ui ){
 
        // c'est impossible avec un UI Dialog, même modal
        // il faut bloquer le code avec un antique confirm()
 
        return confirm( "Souhaitez-vous continuer ?" );
    }
});