[résolu] Bouton à 2 états (type On/Off)

Re-salut, ça faisait un petit temps que j'avais pas eu besoin de vous, mais là j'ai décidé de faire de l'AJAX au lieu d'un système en PHP... à part que le javascript et moi, bah ça fait au moins 10 (et pas en binaire)

Voilà le concept simple :
- sur une page, j'ai une série d' "objets" (on va nommer ça comme ça) issus de ma base de données portant chacun un id unique.
- ils peuvent avoir 2 états, noté dans la base de donnée : http://www.yuimen.com/images/visible-1.png (correspond à 1 dans la bdd); http://www.yuimen.com/images/visible-0.png (correspond à 0 dans la bdd).
- en php, ça aurait été un lien image avec 2 arguments en get (id et état). J'aurais modifié dans la table état actuel dans l'autre (1 en 0 et réciproquement) puis charger à nouveau la page.
- en ajax, j'aimerais que quand le joueur clique sur l'image :
1) l'image change (passe de visible en invisible et réciproquement)
2) que la base de donnée se mette à jour (passage de 1 à 0 ou de 0 à 1)


A l'heure actuelle je travaille sur l'étape 1. Ca marche très bien, mais une seule fois par image. Hors, je voudrais permettre à la personne de modifier son choix sans recharger la page.

Place au code :

L'affichage de l'image.

if($visible==1)
    {
      $affichage.="<img id=".$idSkill." onclick='chgVisibilite(".$idSkill.",".$idPj.",0)' src='images/visible.png' title='Skill visible, cliquer pour rendre invisible en combat' alt='skill visible' />";
    }
    else
    {
      $affichage.="<img id=".$idSkill." onclick='chgVisibilite(".$idSkill.",".$idPj.",1)' src='images/invisible.png' title='Skill visible, cliquer pour rendre invisible en combat' alt='skill visible' />";
    }

Ma fonction

function chgVisibilite(idSkill,idPj,changement)
{
  if(changement==1)//passage à visible
  {
    document.getElementById(idSkill).src = 'images/visible.png';
    document.getElementById(idSkill).onclick = 'chgVisibilite(idSkill,idPj,0)';
  }
  else
  {
    document.getElementById(idSkill).src = 'images/invisible.png';
    document.getElementById(idSkill).onclick = 'chgVisibilite(idSkill,idPj,1)';
  }
}

Le changement de la source de l'image passe donc très bien; mais pas moyen de modifier le "onclick"

Voilà le message de la console javascript d'opéra :

a écrit :
Event thread: click
Uncaught exception: ReferenceError: Undefined variable: idSkill
Error thrown at unknown location in <anonymous function>(event):

Modifié par Lothindil (27 May 2011 - 15:49)

J'ai trouvé comment faire la première partie. J'ai changé un peu le concept de ma fonction ainsi que mes images.

Mes images ont donc d'abord changé de nom : visible-0.png à la place de invisible.png et visible-1.png à la place de visible.png

Ensuite j'ai modifié ma fonction ainsi :

function chgVisibilite(idSkill,idPj)
{
  var changement;
  var changement=document.getElementById(idSkill).src.indexOf(1)
  if(changement==-1)//passage à visible
  {
    document.getElementById(idSkill).src = 'images/visible-1.png';
  }
  else
  {
    document.getElementById(idSkill).src = 'images/visible-0.png';
  }
}

En gros, je lui ai demandé de savoir si y avait un "1" dans l'image. Si c'est pas le cas, c'est qu'il faut passer à visible, si c'est le cas c'est qu'il faut passer à invisible

Bon, je vais publier la version finale qui marche. Elle permet de gérer plusieurs boutons on/off différents, sur la même page ou sur des pages différentes avec un changement de skin de l'image et modification 0/1 dans des tables différentes.
Mon système réagit sur le nom des images avec 2 types de "clés" : un string (ici visible et prio) et une position (1 - 0). Si plusieurs versions d'un même bouton sont prévus, ça vaut le coup d'adapter ça avec (On - Off) au lieu de (1 - 0)

La table Mysql (myTable) impactée :
ID : c'est un int, lié au compte de la personne
objet : c'est un int, c'est l'objet qui est impacté
actif : c'est un tinyint. 0 inactif; 1 actif (ici c'est une question de rendre un objet visible ou non dans un autre fichier)

Dans le fichier PHP qui va appeler la fonction : ($visible est issus directement de "actif" de la table)

<?php
if($visible==1)
{
    $affichage.="<img id=".$var1." onclick='chgOnOff(".$var1.",".$idCompte.")' src='images/visible-1.png' title='Objet visible, cliquer pour rendre invisible' alt='Objet visible' />";
}
else
{
    $affichage.="<img id=".$var1." onclick='chgOnOff(".$var1.",".$idCompte.")' src='images/visible-0.png' title='Objet invisible, cliquer pour rendre visible' alt='Objet invisible' />";
}
//plus loin dans la partie d'affichage
?> <script type='text/javascript' src='javascript/utile.js'></script> 
//toujours plus loin
<?php echo $affichage;?>

Dans le fichier javascript (javascript/utile.js ici) :

function chgOnOff(id,idPj)
{
  var xmlHttp=null;
  var changement;
  var changement=document.getElementById(id).src.indexOf(1);
  if(document.getElementById(id).src.indexOf('visible')!=-1)//si ça touche la visibilité des objets
  { 
    if(changement==-1)//passage à visible
    {
      document.getElementById(id).src = 'images/visible-1.png';
      document.getElementById(id).title = 'Objet visible, cliquer pour rendre invisible';
      document.getElementById(id).alt = 'Objet visible';
      var chgt='1';
      var UrlType='1';
    }
    else
    {
      document.getElementById(id).src = 'images/visible-0.png';
      document.getElementById(id).title = 'Objet invisible, cliquer pour rendre visible';
      document.getElementById(id).alt = 'Objet invisible';
      var chgt='0';
      var UrlType='1';
    }
  }
  else if(document.getElementById(id).src.indexOf('prio')!=1)//si ça touche la priorité d'un objet
  {
    if(changement==-1)//passage à objet prioritaire
    {
      document.getElementById(id).src = 'images/prio-1.png';
      document.getElementById(id).title = 'Objet prioritaire, cliquer pour rendre non-prioritaire';
      document.getElementById(id).alt = 'Objet prioritaire';
      var chgt='1';
      var UrlType='2';
    }
    else
    {
      document.getElementById(id).src = 'images/prio-0.png';
      document.getElementById(id).title = 'Objet non-prioritaire, cliquer pour rendre prioritaire';
      document.getElementById(id).alt = 'Objet non-prioritaire';
      var chgt='0';
      var UrlType='2';
    }
  }                     
  xmlHttp=new XMLHttpRequest();
  var url="change.php?z=" + chgt + "&y="+id+"&type="+UrlType;
  xmlHttp.open("GET",url,false);
  xmlHttp.send(null); 
}

Bon, doit y avoir moyen de faire plus propre encore, mais c'est mon tout premier JS ^^

Et dans le PHP qui va agir sur la table (change.php)

<?php //la variable $idCompte est issus de la session
connect_serveur(); //ma fonction perso pour l'ouverture du serveur
connect_db(); //et celle pour l'ouverture de ma db
//étape 1 : vérifier que y ait pas de code ou autre dans le GET
$type=$_GET['type'];if(preg_match('/[0-9]/',$type)){$type=intval($type);}else{die('Pas bien...');} //le type. 1=visibilité de l'objet
$chgt=$_GET['z'];if(preg_match('/[0-9]/',$chgt)){$chgt=intval($chgt);}else{die('Pas bien...');}  //le sens du changement.
$objet=$_GET['y'];if(preg_match('/[0-9]/',$objet)){$objet=intval($objet);}else{die('Pas bien...');}  //l'objet touché par le changement

if($type==1) //visibilité de l'objet
{
  $ressource=mysql_query("select objet from myTable1 where ID=".$idCompte." AND objet=".$objet."");
  if(mysql_num_rows($ressource)==1)
  {
    $sql=mysql_query("update myTable1 set actif=".$chgt." where ID=".$idCompte." AND objet=".$objet."");
  }
}
elseif($type==2) //dans le cas de priorité
{
  $ressource=mysql_query("select objet from myTable2 where ID=".$idCompte." AND objet=".$objet."");
  if(mysql_num_rows($ressource)==1)
  {
    $sql=mysql_query("update myTable2 set actif=".$chgt." where ID=".$idCompte." AND objet=".$objet."");
  }
}
close_mysql(); ?>

Voilà, si ça peut aider des gens tombant dessus
Modifié par Lothindil (27 May 2011 - 11:45)