Onclick : Appeler 2 fonctions / faire 2 appels

Version imprimable

Bonjour à tous !

Me voici avec un nouveau problème pour mon projet de Memory.

Voici ma balise <td> dans ma page fontion.php

Code HTML :

Code:

<td bgcolor ="#6095E4" width="50" height="50" onClick="Javascript:window.document.location.href='partie.php?colonne=<?php echo $i;?>&ligne=<?php echo $j;?>';swap(this)"><?php

Je sais que dans mon onClick je ne peux pas faire 2 appelles... Mais c'est pour vous faire une idée de ce que j'aimerais faire.

Le première appelle me permet de renvoyé l'utilisateur à la page partie.php avec 2 paramètre (lignes et colonnes) afin de faire des comparaison d'images.

Le deuxième appelle me renvoi au script ci-dessous (qui se trouve dans partie.php) me permettant de retourner mes images en cliquant sur ma cellule :

Code Javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function swap(_cell){ // récupère le premier fils image de la cellule. var _firstChildImg = _cell.getElementsByTagName("img")[0]; // si elle est cachée on la montre if (_firstChildImg.style.visibility=="hidden"){ _firstChildImg.style.visibility="visible"; // et la je fais mon traitement qui va bien... }else{ // sinon, l'image est déjà cliqué, alert ("Cette images est déjà retournée"); } }
Donc mon est d'exécuter les 2 appelles en cliquant sur les cellules de mon tableau html... Auriez-vous une idée pour se faire ?

Merci d'avance.

16/05/2011, 11h26
SpaceFrog

on peut tout à fait faire appel a deux fonctions dans un onclick en séparant les appels par un ;

ton souci est que tu commence par faire une redirection, un changement de page. Dès que tu quittes la page le script n'existe plus.
16/05/2011, 11h34
Varkan

Ce qui veut dire que ces 2 appelles ne sont pas "compatible" ?

Car si je met le swap() en premier, ça marche encore moins bien.

hum... je pourrais aussi appeler la fonction swap() d'une autre manière ?

Voici mon test qui me permet de mettre 2 cliques (via le onClick de mon premier post) dans une variable et de les comparer.

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
 
 if(isset($_GET['ligne']))
{     
    $j = $_GET['ligne'];
    $i = $_GET['colonne'];
    if(isset($_SESSION["img1"]))
    {
        if(isset($_SESSION["img2"]))
        {
            echo $_SESSION["img1"];
            echo $_SESSION["img2"];
        }
        else
        {
 
            $_SESSION["img2"] = $_SESSION["tblnum"][$j][$i];
 
            if($_SESSION["img2"] == $_SESSION["img1"]) // Comparer les numéros des images
            {
                echo "trouvé";
                // laisser les images face visible
                unset($_SESSION["img1"]);
                unset($_SESSION["img2"]);
            }
            else
            {
                echo "recommence";
                // mettre les images face cachée
                unset($_SESSION["img1"]);
                unset($_SESSION["img2"]);
            }
        }
    }
    else
    {
        $_SESSION["img1"] = $_SESSION["tblnum"][$j][$i];
    }
}
else
{
    echo "il n'y a rien encore";
}

Ce test marche très bien, je click sur ma cellule, le onclick s'enclenche, mon premier click se met dans la sessions img1 et le 2ème click dans img2.

Bref me vient une idée, mais est-ce possible ?

Quand je fait mon première click et que j'arrive à la ligne :

$_SESSION["img1"] = $_SESSION["tblnum"][$j][$i];

est-ce qu'il y a moyen de faire un genre de

$_SESSION["tblnum"][$j][$i].style.visibility="visible"

ce qui voudrait dire de mettre visible l'image caché en 1.1 (par exemple) ?

16/05/2011, 13h43
SpaceFrog

Code:

$_SESSION["tblnum"][$j][$i].style.visibility="visible"

c'est quoi ça ??????
8O8O8O8O

tu ne serais pas en train d'essayer de faire interpréter du php coté client ???
16/05/2011, 13h56
Varkan

Oui non mais je sais que c'est pas faisable comme ça, mais c'était pour montrer un exemple.
16/05/2011, 14h08
NoSmoking

pourquoi ne pas gérer cela coté client
- initialisation de la page en PHP, mise en place des images ou du sprite
- sur le onload du document récupération des informations sur les cellules
- sur le click des cellules gestion visibilité et/ou test de comparaison suivant les datas recueillies.
16/05/2011, 14h11
Varkan

Comment récupérer les coordonnées en cliquant sur une cellules avec un onload ?

Edit :

il n'y aura plus de redirection si je met juste ma fonction pour caché/montrer les images en onclick ?
16/05/2011, 14h20
NoSmoking

sur le onload du document
- récupération de ta table avec la méthode document.getElementById('nom_de_la_table');
- parcours de toutes les lignes/cellules avec les collections rows et cells de l'objet table
- récupération des datas dans une boucle...
16/05/2011, 14h38
Varkan

J'avais déjà fait un genre comme ça, mais après je suis complètement perdu.. je préfère faire le moins de javascript possible et un maximum de php (vu que mon projet est en php mysql).

Après je n'ai pas le temps d'apprendre le JS et si l'expert me pose des questions... je préfère être serein devant l'expert avec un code simple et facile à comprendre.

Maintenant j'ai pensé à un truc.. mais je ne sais pas si c'est possible.

Dans mon test que je fais en php avec mes isset, je pourrais très bien appeler ma fonction swap non ?

Citation:

Dans mon test que je fais en php avec mes isset, je pourrais très bien appeler ma fonction swap non ?

NON chacun son boulot...

Citation:

Après je n'ai pas le temps d'apprendre le JS et si l'expert me pose des questions... je préfère être serein devant l'expert avec un code simple et facile à comprendre.

il suffit souvent de bien savoir et comprendre ce que l'on veux faire pour le faire.

Je pense quand même que pour la création de ta page cela passe effectivement par la lecture de la base et la mise en forme coté serveur, PHP, mais que le reste doit ce passer coté client, javascript, sans faire de perpétuel aller-retour client serveur, cela me paraît plus cohérent.

pour le fun un petit exemple rapide, perfectible, qui permet de démystifier le problème

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Essai sur table]</title>
<style type="text/css">
.rouge {
  font-weight : bold;
  color : red;
  background-color : #f0e0e0;
}
.normal {
  font-weight : normal;
  color : blue;
}
table {
  border-collapse : separate;
}
td {
  width : 30px;
  height : 30px;
  text-align : center;
  border : 1px solid #e0e0e0;
  cursor : pointer;
}
</style>
<script type="text/javascript">
var Ref = '';
function initTable( id){
  var tCells, oCell, oTable = document.getElementById( id);
  var i, k, nbCell, nbRow = oTable.rows.length;
  // parcours des lignes de la table
  for( i = 0; i < nbRow; i++) {
    // recup collection des cellules
    tCells = oTable.rows[i].cells;
    nbCell = tCells.length;
    // parcours des cellules de la ligne
    for( k = 0; k < nbCell; k++){
      oCell = tCells[k];
      // change la classe
      oCell.className = 'normal';
      // affecte la fonction
      oCell.onclick = function(){
        // test sur la classe
        if( this.className === 'normal'){
          if( !Ref){
            // init recherche
            Ref = this.innerHTML;
            this.className = 'rouge';
          }
          else{
            // test si OK
            if( Ref === this.innerHTML){
              this.className = 'rouge';
              alert(' BINGO');
            }
            else{
              alert(' PERDU');
            }
          }
        }
        else{
          alert( 'please click a other cell!');
        }
      };
    }
  }
}
// init table sur load
window.onload = function(){
  initTable('la_table')
}
</script>
</head>
<body>
<table id="la_table">
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>4</td><td>3</td><td>2</td><td>1</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>4</td><td>3</td><td>2</td><td>1</td></tr>
</table>
</body></html>

17/05/2011, 08h51
Varkan

J'ai essayé d'utiliser ton code pour mon projet, mais je n'y arrive pas...

la seule partie que tu as à générer coté serveur et ce fonction de ta base de données est
Code:

1 2 3 4 <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>4</td><td>3</td><td>2</td><td>1</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>4</td><td>3</td><td>2</td><td>1</td></tr>
et sous la forme mise ci dessus, le tout encapsulé dans une TABLE avec comme ID '"la_table"