Discussion :

[Mousshaker]

Bien le bonjour la communauté !

J'ai un petit souci avec .val() que j'utilise dans un test

En résumé, j'ai une grille (pour ceux qui n'auraient pas suivi mes pérégrinations dans l'autre topic, une grille de SUDOKU)
Mon but, c'est qu'un fois que l'utilisateur a tout remplis la grille, cela m'affiche en vert tous les résultats avec un message de félicitation.
mais si, alors que la dernière case est rempli, il reste une erreur, alors il me le dit.
Mais passons, car mon problème se situe au tout départ de ce test en effet 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
18
19
20
21
22
23
24
for(k=0;k<9;k++){
      if(erreur==true){// si la variable erreur = true
        alert("HOP HOP HOP ! Il vous reste une erreur \340 corriger");
        break;// sort de la boucle
      }
      else{
        for(m=0;m<9;m++){
          valID = k + '-' + m;
          //alert("valeur de la cellule " + valID + " est : " + $('#'+valID+'').val()+"*");
          if ($('#'+valID+'').val()==''){
            rempliok=false;
            break;
          }
          else{
            rempliok=true;
          }
        }
      } 
    }
 
    if((rempliok==true)&&(erreur==false)){// si la variable erreur = true (donc que tous les input sont remplis) et que rerreur=false (donc qu'aune erreur n'est déclarée)
      $(".grille").css("color","#8ee4ae"); // Une fois tout le tableau vérifié, si tu es arrivé jusque là sans erreur passe tout ce qui à la classe grille en "VERT"
      alert("Bravo ! Vous avez bien trich\351. Mais on admettra que vous avez pu aussi \352tre honn\352te et bon");
    }

Comme on peut le voir, je lui demande de me passer la variable "rempliok" en FALSE, s'il croise une cellule dont la valeur est vide ".val()==''
S'il n'en croise pas (et que donc le tableau est rempli, alors il passe ma variable "rempliok" en "true".

Or quoiqu'il advienne, il execute la dernière commande et me passe tout en vert (ce qui veut donc dire qu'il me transforme ma variable "rempliok" en "true" et que donc, il ignore les cellules vides
D'ailleurs, lorsque j'affiche l'alerte (en ligne 9), c'est assez claire, je vois bien qu'arrivé dans une cellule vide, il m'affiche "4-3 : " (donc aucune valeur) mais il continue pourtant à parcourir la grille, alors qu'il devrait sortir (ce que je lui demande avec "break;")

Ainsi, j'en déduis que la syntaxe est mauvaise.
j'ai essayé, .val()==false / .val()==null
Rien n'y fait.
il ne reconnait pas la nature "vide" de la cellule comme je le souhaiterais

Qu'est-ce que j'écris mal ?

[SpaceFrog]

la comparaison

Code :

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

val()==''

est correcte, ce qui me le semble moins ce sont tes selecteurs, voire tes id ...

Code :

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

 if ($('#'+valID+'')

le +'' est inutile...

par contre ta concaténation

Code :

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

k +'-'+ m

veut dire que tu as des id qui commencent par du numérique ?
Peut on voir le HTML associé ?

[Mousshaker]

Ah ca pourrait venir des ID...
pourtant dans mon test, il récupère bien les ID

En fait oui, je récupère mon attribut ID depuis mon PHP (qui se compose du numéro de ligne et du numéro de colonne), et je découpe cet id en deux variables jQuery, comme ceci :

Code :

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

1
2
3
4
5
var ident = $(this).attr('id');// on récupère l'attribut ID de la balise <input>
var splitresult = ident.split("-"); // Coupe l'attribut ID en cases (dans une tableau), dont le séparateur est "-" (si attr = 4-3, il coupera 4, "-" = séparateur)
var j = splitresult[0];//1ere case = j (soit n° de colonne)
var i = splitresult[1];//2nd case = i (soit n° de ligne)
valID = j + "-" + i;//on reprend l'ID décomposé et compatible jQuery dans une variable.

ceci étant reprit depuis mon fichier PHP ici :

Code php :

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

1
2
echo '<input type="text" name="cell '.$j.'-'.$i.'" id="'.$j.'-'.$i.'" maxlength="1" class="valuser grille"/>'
//cet ID va chercher les valeurs dans un tableau à double entrée $Grille[$j][$i], qui compose ma grille de sudoku

Après comme l'utilise à l'intérieur de boucle (pour vérifier les valeurs de la colonne de l'input concerné) j'ai transformer le i et le j en k et m
Ce dessus l'exemple du code pour la colonne, celui pour la ligne est sur même principe sauf que 'j' devient 'm' (car ma boucle est for(m=0;m>9;m++))

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
for(k=0;k<9;k++){//Boucle pour vérifier la colonne : Boucle jusqu'à 8 (ce qui fera boucler sur toute la hauteur du tableau qui est de 9 cases)
        if(erreur==true){// si la variable erreur = true
          alert("ATTENTION! Vous avez une erreur \340 corriger...");
          erreur=true;
        }
        else{
          valID = j + "-" + k;// On initialise valID : "J" étant le n°de colonne où on est, et qui doit rester fixe. Seul "i" (devenu K pour la boucle) doit changer
          //alert("valeur de la cellule " + valID + " : " + $('#'+valID+'').val());
          if(k!=i){// si tu te trouves partout ailleur qu'à la cellule où est l'input concerné par l'événement (car si i=K c'est qu'on est en train de vérifier la cellule de l'input)
            if($(this).val()== $('#'+valID).val()){// si la valeur entrée dans cette input = la valeur de la cellule avec l'id que tu es en train de parcourir
              alert("ATTENTION ! cette valeur existe d\351j\340 dans la colonne...");
              $(this).css("color","#ff6c6c");//texte en ROUGE
              erreur = true;// transforme la variable erreur en True (pour bloquer la seconde boucle, devenue inutile puisqu'il y a déjà une erreur de rencontrée)
              break;// sort de la boucle
            }
            else{ // sinon, si la valeur n'existe pas
              $(this).css("color","#a2cdf8");//texte en BLEU
              erreur=false
            }
          }
        }
      }

Ceci dit ce code fonctionne puisque c'est à partir de lui que, dans ma grille je vérifie si la valeur entrée par l'utilisateur existe déjà dans la ligne, dans la colonne et enfin dans le bloc.
Et la vérification fonctionne parfaitement.

[SpaceFrog]

Je ne vois pas d'id ... je vois un name ...

[Mousshaker]

regarde encore un peu, juste après le name...

[Bovino]

Code :

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

1
2
3
4
5
var ident = $(this).attr('id');// on récupère l'attribut ID de la balise <input>
var splitresult = ident.split("-"); // Coupe l'attribut ID en cases (dans une tableau), dont le séparateur est "-" (si attr = 4-3, il coupera 4, "-" = séparateur)
var j = splitresult[0];//1ere case = j (soit n° de colonne)
var i = splitresult[1];//2nd case = i (soit n° de ligne)
valID = j + "-" + i;//on reprend l'ID décomposé et compatible jQuery dans une variable.

Intéressante ta méthode pour retrouver l'identifiant d'un élément à partir de son identifiant.
Ceci dit, je préfère la méthode

Code :

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

1
2
var ident = $(this).attr('id');
valID = ident.replace(/./g, function(st){return st});

Le .g, il n'y a pas mieux !

Avec un peu de raffinement pour transtyper la chaine de caractères en chaine de caractères, ça donnerait ça :

Code :

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

1
2
var ident = $(this).attr('id');
valID = '' + ident.replace(/./g, function(st){return st}) + '';

[Mousshaker]

Oh disons que je ne savais pas comment faire, et que j'en suis arrivé à ça, mais je pensais bien qu'il y avait "plus propre" comme méthode ^^
D'ailleurs, la tienne est déjà pour ceux qui maitrise un peu. Je n'ai pas tout bien saisi
Je découvre le jquery depuis 15 jours, alors c'est encore un peu "brancalot" :p


Ceci étant dit, dans l'absolu, ca fonctionne.
Mon vrai problème c'est qu'ensuite je n'arrive pas à faire reconnaitre quand une cellule est vide (sans valeur entrée).
Même quand il croise un input non rempli, il considère qu'il y a quelque chose

peut être que par défaut .val() renvoie une valeur ? "0" ? "-1" ??

[Bovino]

D'ailleurs, la tienne est déjà pour ceux qui maitrise un peu.

La solution que je donne est surtout ironique : tu n'as pas besoin de la variable valID puisque son contenu est déjà récupéré dans ident !
Ta méthode ou la mienne ne servent à rien si ce n'est triturer une chaine pour retrouver la même qu'au départ...

Quant à ton problème, il me semble qu'il ne vienne pas de la comparaison de .val() mais plus du fait que tu ne valorises jamais la variable erreur.

[Mousshaker]

Ah l'ironie...
J'aime bien mais quand on parle de sujets que les deux maitrisent, c'est assez amusant ^^

Mais quand l'un des deux maitrise le sujet comme je maitrise le jquery, du coup ca perd tout son sens (la preuve j'avais pas saisi lol )
Si je viens ici exposer mes blocages, c'est que fatalement je fais des erreurs, des inepties ou que je fais mal les choses, sinon je viendrai donner des conseils, plutôt que d'en demander :p

Mais si en réponse, on se contente juste d'ironiser ma réponse sans me montrer le bon chemin, je ne risque pas d'avancer bien vite, et finir par me demander si j'ai bien saisi l'intérêt et le but principal de ce forum.

A vrai dire, c'est très gentil à toi de m'en informer, mais je sais que je fais mal et je sais que je ne sais pas (c'est le propre des débutants réalistes)
Mais ca n'est pas cet axiome que je viens chercher ^^

Mais on peut ouvrir un topic pour débattre du bien fondé des réponses ironiques des modérateurs hin, avec plaisir
Par contre, je suis certain qu'un modérateur de ta trempe réalisera que ca n'est pas ici le lieu pour ça.

Sinon, quelqu'un aurait une réponse, ? ou je change l'intitulé du topic en "Flood d'ironie bonsoir, à vous le clavier" ?

(voyez bien que j'ai de l'ironie )

PS: "erreur est initialisé plus haut, je n'ai pas mis tout le code sinon ca va devenir bordélique ^^"
Et à la rigueur peu importe, "erreur" n'intervient pas dans ce qui m'intéresse. à la rigueur ca serai "rempliok=false" qui est utile dans mon soucis
Or, même en l'initialisant avant la boucle, ca ne change rien
Car je rappelle que mon problème est décrit dans mon tout premier post avec le morceau de code concerné.
l'autre morceau de code n'a été mis que pour répondre à spacefrog qui avait besoin de détails.

[Mousshaker]

Bon reprenons plus simplement pour éviter qu'on s'éparpille sur des sujets hors propos.

j'ai fais plus simple en faisant une boucle toute simple :

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
 
for(k=0;k<9;k++){
        for(m=0;m<9;m++){
          valID = k + '-' + m;
          //alert("valeur de la cellule " + valID + " est : " + $('#'+valID+'').val());
          if ($(this).val()==''){
            rempliok=false;
            break;
          }
          else{
            rempliok=true;
          }
        }
      } 
    }

le but de cette boucle étant donc de parcourir, mes 8 colonnes, et les ! lignes de mes 8 colonnes.
dès qu'il rencontre une cellule vide, il est censé sortir après m'avoir passé ma variable "rempliok" en "false"

En commentaire, j'ai mis une alerte pour tester ce qu'il fait
Et effectivement, il me parcoure bien ma grille en entier...*Tout le temps
A chaque cellule il m'affiche l'id de la cellule où il est (ce qui me permet de savoir où on est) et la valeur de cette cellule
A chaque cellule il me met bien par exemple 0-0 : 1 / 0-1 : 7 / 0-2:4 / etc...
Et quand il arrive à une cellule input vide, il me met bien 4-3:
Ce qui est logique et montre bien qu'il ne trouve pas de valeur à afficher.

Or, alors que c'est là où il devrait quitter, il continue tout le tableau.
Voilà pourquoi j'étais persuadé que ca venait du .val()==''
Mais si la syntaxe est correcte alors c'est que c'est autre chose
Puisque vous pensiez que cela pouvait venir du #+valID, je l'ai remplacé pour voir, après tout, c'était bien possible
Et dans un sens (this) est plus logique puisque, ce que j'ai besoin de savoir, c'est si la valeur de CETTE cellule qu'on est en train de parcourir est vide ou non.
Mais, même combat ca me fait exactement la même chose

j'ai essayé avec isEmpty, mais je pense que j'utilise mal la fonction

[Bovino]

il est censé sortir après m'avoir passé ma variable "rempliok" en "false"

Il est censé sortir de la boucle intérieure, mais continuera l'itération sur la boucle extérieure.
Si tu veux sortir de la boucle extérieure depuis la boucle intérieure, tu peux utiliser un label :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
outer: for(k=0;k<9;k++){
    for(m=0;m<9;m++){
        valID = k + '-' + m;
        //alert("valeur de la cellule " + valID + " est : " + $('#'+valID+'').val());
        if ($(this).val()==''){
            rempliok=false;
            break outer;
        }
        else{
            rempliok=true;
        }
    }
}

[Mousshaker]

Déjà, voilà une excellente remarque !
Il fallait aussi commencer par le faire aussi sortir de la boucle extérieure, ca devrait éviter les répétition inutile

Merci pour ce "break outer", je ne connaissais pas

Toutefois, le soucis persiste.
lorsqu'il arrive à un cellule censée etre vide, il ne change pas de colonne, mais poursuit bien dans la cellule suivant et dans la boucle intérieure.

D'un autre côté, je pense que le soucis vient bien du "value" de mon php
Lorsque ma grille se construit, soit il m'affiche la valeur sélectionnée parmi un tableau, soit il m'affiche un input vide pour l'user le remplisse
Lorsqu'il affiche une valeur selectionnée, voici mon code :

Code php :

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

echo  '<input type="hidden" id="'.$j.'-'.$i.'" value="'.$Grille[$j][$i].'">'.$Grille[$j][$i].'</input>' ;

Lorsqu'il m'affiche un input censé être vide, voici mon code :

Code php :

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

echo '<input type="text" name="cell '.$j.'-'.$i.'" id="'.$j.'-'.$i.'" maxlength="1" class="valuser grille"/>'

Et effectivement quand on regarde bien, il n'y a pas de value="" indiqué, contrairement à l'autre ligne
Donc forcément lorsqu'il arrive à cette cellule, il cherche une "value" qu'il ne peut pas trouver.

j'ai donc tenté en ajoutant un value=""
Mais ca ne change rien à l'affaire

[Bovino]

Code :

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

if ($(this).val()=='')

Dans le contexte de ta boucle, je ne vois pas à quoi peut correspondre $(this)...

[Mousshaker]

Et bien, euh, dans mon idée, il correspond à la cellule que l'on est en train de parcourir et donc de tester...
Mais je dois me planter dans la syntaxe alors ...

[Mousshaker]

Bon à la suite de ta remarque j'ai remis mon selecteur initial (#valID) et effectivement, ca fonctionne mieux
Quand il arrive à une case vide, il sort ENFIn bien de ma boucle
et la grille fini par se mettre en vert une fois toutes les valeurs remplies

Bon maintenant j'ai un autre souçis, c'est que si une erreur est déclarée et qu'elle n'est pas corrigée dessuite par l'user (et qu'il continue à remplir la grille), ca m'affiche quand même tout en vert à la fin.

Donc je vais regarder à ça, là le problème doit venir de mes initialisation de variables d'erreur

Merciiii

Tu as trouvé le "ic" :p

[Mousshaker]

Bon j'en profite pour mettre mon bout de code, au cas où d'autres auraient le même soucis, et que ca pourrait les aider.
Donc pour commencer, mes tests s'effectuent dès lors qu'on quitte un input.

[Ma façon de couper mon ID en deux variables ayant été jugée (certainement à juste titre) idiote et pompeuse, sans qu'on ne se soit pour autant donné la peine de nous montrer une méthode plus "propre", j'ai laissé la mienne.
Le but de cette scission était pourtant utile, in fine, puisqu'il permet de décomposer l'ID et de jouer avec les coordonnées de celui-ci de façon indépendante dans les boucles de vérification (ce que je ne vois pas comment on peut faire si on on se contente de garder .att() comme on me l'aurait suggéré... A défaut de savoir, voici donc le début)]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var erreur=false;// établissons une valeur par défaut permettant d'autoriser ou stopper les vérifications d'erreurs
 
 $("input").change(function(){// quand on quitte la cellule
    $(this).css("background-color","#6f6f6f");// Passe la couleur de fond de cellule de cette couleur (gris) afin d'etre en adéquation avec le BG de la grille
      var ident = $(this).attr('id');// on récupère l'attribut ID de la balise <input> qui se trouve dans un fichier PHP
      var splitresult = ident.split("-"); // Coupe l'attribut ID en cases (dans une tableau), dont le séparateur est "-" (si attr = 4-3, il coupera 4, "-" = séparateur)
      var j = splitresult[0];//1ere case = j (soit n° de colonne)
      var i = splitresult[1];//2nd case = i (soit n° de ligne)
      valID = j + "-" + i;//on reprend l'ID décomposé et compatible jQuery dans une variable. L'id source se trouvant dans mon PHP étant (id="'.$j.'-'.$i.'")
      var rempliok=true;// établissons une variable pour la vérification entière de la grille (si elle est vide ou totalement remplie)

Ensuite nous trouvons nos boucles de vérification permettant de vérifier la colonne, puis la ligne, puis enfin tout le bloc de l'input concerné par le test
Vous pouvez trouver le code ici

Une fois ces tests effectués, le programme vérifie enfin si la grille est totalement remplie.
Si ca n'est pas le cas, rien ne se passe l'user continue de la remplir
Si c'est le cas, il nous affiche un message de félicitations et passe la grille en VERT

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
outer: for(k=0;k<9;k++){
      if(erreur==true){// si la variable erreur = true
        //alert("HOP HOP HOP ! Il vous reste une erreur \340 corriger");
        break;// sort de la boucle
      }
      else{
        for(m=0;m<9;m++){
          valID = k + '-' + m;
          if ($('#'+valID+'').val()==""){
            rempliok=false;
            break outer;
          }
          /*else{
            rempliok=true;
          }*/
        }
      } 
    }
 
    if((rempliok==true)&&(erreur==false)){// si la variable erreur = true (donc que tous les input sont remplis) et que rerreur=false (donc qu'aune erreur n'est déclarée)
      $(".grille").css("color","#8ee4ae"); // Une fois tout le tableau vérifié, si tu es arrivé jusque là sans erreur passe tout ce qui à la classe grille en "VERT"
      alert("Bravo ! Vous avez bien trich\351. Mais on admettra que vous avez pu aussi \352tre honn\352te et bon");
    }

Mon problème de départ était que pour

Code :

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

 if ($('#'+valID+'').val()==""){

J'avais marqué $(this) au lieu de $(valID)
Donc forcément ca ne pouvait pas aller.
Ensuite, je n'avais pas mis le "break outer", ce qui signifie que le programme sortait de la boucle intérieure (la boucle "m") mais pas de la boucle extérieure (la boucle "k")


Dès lors, le test fonctionnait et dès qu'il rencontrait une cellule vide, il quittait le test.
Mais j'avais un soucis lorsqu'un membre remplissait mal la grille, que ca lui affichait une erreur, et qu'il ne la corrigeait pas dessuite.
En ce cas, il lui suffisait de remplir la grille est dès que le,programme ne trouvait plus de cellule vide, il m'affichait la grille en vert (puisque c'est ce que je lui avais demandé), oubliant de prendre en compte les erreurs signalées (enfin c'est moi qui avait oublié de lui signaler de le faire ^^)

Du coup tout s'est résolu lorsque j'ai sorti l'initialisation de la variable "erreur", de l'input. Car sinon, il me la réinitialisait à chaque début de tour (et donc de test), que l'erreur ait été ou non corrigée par l'user ^^
Tout comme il m'a aussi fallut déplacer l'initialisation de ma variable "rempliok" (qui permet de savoir si la grille est entièrement remplie ou non), pour la mettre au tout départ du test de l'input, au même endroit que l'initialisation des autres variable de l'ID, alors que je l'avais mise juste avant la boucle permettant de tester si la grille était remplie.

Et là, la "magie" a opéré !