Discussion :

[chindit]

Salut tout le monde

J'ai fait un formulaire avec deux champs mot de passe.
Je souhaite afficher une alerte si ils ne correspondent pas ou si ils sont trop courts.
Donc, j'intercepte la soumission et lance mes tests.
En cas d'échec, j'affiche une boîte d'erreur jQuery-UI.
Et je voudrais bien qu'au bout de 5 secondes, cette boîte disparaisse.

Voici mon code:

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
id-form').click(function(event){
                var alerte = '<div class="ui-widget"><div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"><p><span class="ui-icon ui-icon-alert" style="float: left; margin-right…"$
                var form = $(this).parent().attr('action');
                var pass1 = $(this).parent().find('input[name="pass1"]').val();
                var pass2 = $(this).parent().find('input[name="pass2"]').val();
                if(pass1.length < 8){
                        var currentMsg = alerte.replace('{MSG}', 'Votre mot de passe est trop court');
                        $(this).parent().prepend(currentMsg);
                        runEffect($(this).parent().find('ui-widget'));
                        event.preventDefault();
                }
                if(pass1 != pass2){
                        var currentMsg = alerte.replace('{MSG}', 'Vos mots de passe ne coincident pas');
                        $(this).parent().prepend(currentMsg);
                        event.preventDefault();
                }
        });

EDIT: Oui, je bossais avec nano donc le bout de la ligne est coupé avec un «$», mais vous inquiètez pas, le code de la boîte est correct et elle s'affiche parfaitement
Et la fonction «runEffect()»

Code :

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

1
2
3
4
5
6
7
function runEffect(){
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $('.ui-widget').hide(selectedEffect, options, 500)
     }, 5000);
}

Et ce code marche… sauf que, logiquement… toutes les alertes disparaissent en même temps.

Prenons un cas concret: vous remplissez les premier champ avec «azerty» et le second avec «uiop» et vous cliquez sur «Valider» toutes les 2 secondes.
À chaque fois que vous cliquez, un message d'erreur apparaît.
Sauf que, comme je l'ai dit, tous les messages d'erreurs disparaissent en même temps.
Et ce que je voudrais bien, c'est que la première alerte disparaîsse au bout de 5 sec, la seconde au bout de 5 sec, la troisième au bout de 5 sec, etc. Or, pour l'instant, toutes les alertes disparaissent en même temps.

Vous voyez comment indiquer à «runEffect()» quel alerte masquer?
Parce que je ne vois pas trop comment introduire des ID dans un système dynamique.

Merci d'avance à tous

[Darkaurora]

Tu sélectionnes (du moins je suppose) toutes les alertes qui ont la classe "ui-widget" et tu leur appliques une méthode "hide" pour l'ensemble des éléments récupérer par ton sélecteur.

Il te faut trouver un moyen pour passer à ta fonction runEffect un argument qui sera l'élément "ui-wiget" unique pour l'erreur soulevé:

Code :

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

1
2
3
4
5
6
7
function runEffect($uiWidget){
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $uiWidget.hide(selectedEffect, options, 500)
     }, 5000);
}

De plus (et même si je ne vois pas tout ton code) l'initialisation de ton alerte est correcte cependant l'ajout dans le DOM peut te réserver des surprises. Je te conseil ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
var $uiWidget = $('<div></div>').addClass('ui-widget') // => <div class="ui-widget"></div>
var alerte = '<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"><p><span class="ui-icon ui-icon-alert" style="float: left; margin-right…"$'
[...]
if(pass1.length < 8){
   var currentMsg = alerte.replace('{MSG}', 'Votre mot de passe est trop court');
   $uiWidget.empty().append(currentMsg); // => On remplis l'alerte avec un contenu après l'avoir vidé (au cas ou...)
   $(this).parent().prepend($uiWidget.clone()); // => On ajoute l'alerte en clonant l'élément (très important)
   runEffect($uiWidget); // => on passe l'élément jQuery à ta fonction pour faire fonctionner le code ci dessus.
   event.preventDefault();
}

Les parties commentés ci dessus doivent être répété a chaque fois que tu souhaites utiliser "runEffect". N'hésites pas à poser des questions si il y a des points que tu n'as pas compris.

[danielhagnoul]

Exemple :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    var jObjUiWidget = $( "<div/>", {
            "class" : "ui-widget",
            "on" : {
                "hide.alerte" : function( event, delay ){
                    setTimeout( function(){
                        $( event.target ).css( "display", "none" );
                    }, delay );
                }
            }
        }),
        jObjAlerte = $( "<div/>", {
            "class" : "ui-state-error ui-corner-all",
            "css" : {
                "padding" : "0.7em;"
            },
            "html" : '<p><span>{MSG}</span></p>'
        });
 
    function newAlerte( str, delay ) {
        var jObjClone = jObjUiWidget.clone( true, true );
 
        jObjClone.html( jObjAlerte.text().replace( '{MSG}', str ) );
 
        $( "body" ).prepend( jObjClone );
 
        jObjClone.trigger( "hide.alerte", [ delay ] );
    }
 
    var alertes = [
            "Message n° 1",
            "Message n° 2",
            "Message n° 3",
            "Message n° 4",
            "Message n° 5",
            "Message n° 6"
        ],
        delay = 4000;
 
    $.each( alertes, function( i, item ){
        newAlerte( item, delay += 1000 );
    });
 
});