Update en Ajax

Introduction

Dans un tutoriel, j'avais mis une méthode en PHP pour permettre l'Update d'un champ d'une table MySQL avec une icône.
Mais le problème, c'est qu'il y a un reload de la page, afin d'afficher la nouvelle icône par rapport à la nouvelle valeur mise à jour.

Depuis peu, j'ai adopté une nouvelle méthode qui se fait en Ajax, ce qui fait qu'il n'y a plus de reload de la page, ni de mon tableau DataTables dans lequel les données sont insérées, ce qui auparavant, reloader non seulement la page, mais aussi la fonction de Callback lié au tableau DataTables pour réafficher les données en un seul bloc.

Le script Ajax

Dans la page, j'ai utilisé cette fonction, la fonction s'appelle (updateToggle), cette fonction sera appellée par un input de type image.
Dans cette fonction les valeurs (oui et non) sont utilisées, ces valeurs correspondent aux valeurs du champ de la table MySQL.
La variable (vars) fait référence au paramètre id de la table, et visible est le nom de l'input de type image.

            function getXMLHTTPRequest() {
            var req = false;
            try {
            /* for Firefox */
            req = new XMLHttpRequest();
            } catch (err) {
            try {
            /* for some versions of IE */
            req = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (err) {
            try {
            /* for some other versions of IE */
            req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (err) {
            req = false;
            }
            }
            }
            return req;
            }
            function updateToggle(obj,id){//debut updateToggole
            obj.style.backgroundColor = '#f00';
            
            var updReq = getXMLHTTPRequest();
            var url = 'Active.php';
            var vars = 'id_tuto='+id+'&visible='+obj.value;
            updReq.open('POST', url, true);
            updReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            updReq.onreadystatechange = function() {//debut onreadystatechange.
            if(updReq.readyState == 4 && updReq.status == 200) {//debut 1er if
                
                if(updReq.responseText == 'N'){
                    obj.style.backgroundColor = '#cc8800';
                }else{//debut 1er else
                    if(obj.value == 'oui'){
                        obj.value = 'non';
                    }else{
                        obj.value = 'oui';
                         }
            obj.src = updReq.responseText;
                    }//fin 1er else
                }//fin 1er if
              }//fin onreadystatechange
            updReq.send(vars);
            }//fin updateToggole
        

 

Le code HTML

Le code Html des deux inputs de type image est enfermé dans une condition, l'attribut onclick appelle la fonction (updateToggle) avec comme paramètre (this) et l'id correspondant à la ligne du tableau que l'on souhaite mettre à jour, on lui donne une image (off = vert), un nom (visible) et la value (oui).
Puis dans le (else) on procéde de la même façon, en changeant le nom de l'image (on = rouge) et la value à non.

          <?php
          $id = $row_RsListetuto['id_tuto'];
          $active = $row_RsListetuto['visible'];
          if($active == 'oui'){
          ?>
          <input type="image" onclick="updateToggle(this,'<?php echo $id;?>');" src="../images/off.png" border="0" name="visible" value="oui"/>
          <?php
          }else{
          ?>
          <input type="image" onclick="updateToggle(this,'<?php echo $id;?>');" src="../images/on.png" border="0" name="visible" value="non"/>
          <?php
          }
          ?>
	   

 

Code de la page (Active.php)

Le code de cette page, fait référence à deux variable de type POST qui correspondent à l'id et au nom du de l'input de type image.
Le reste coule de source, enfin du moins je pense.

            <?php
            header('Content-Type: text/html; charset=ISO-8859-1');
            $machine="localhost"; 
            $utilisateur="root";
            $mot_passe="";
            $nom_base="";
            $con=mysql_connect($machine,$utilisateur,$mot_passe) or die ('Erreur : '.mysql_error() ); 
            mysql_select_db($nom_base); 
            
            $id = $_POST['id_tuto'];
            $visible = $_POST['visible'];
        
            if(isset($id) && isset($visible)){//1er if
            
            $Q = "UPDATE ma_table SET visible='".mysql_real_escape_string($visible)."' WHERE id_tuto='".mysql_real_escape_string($id)."'"; 
                    
                    if(mysql_query($Q)){//2eme if
                        if($visible == 'oui'){
                            echo '../images/off.png';
                         }else{
                            echo'../images/on.png';
                              }
                    }// fin 2eme if
                    else{
                        echo 'N';
                         }
            }// fin 1er if
            else{
                echo 'N';
                 }
          ?>
       

 

Conclusion

Cette méthode, je l'ai mis en oeuvre dans mon espace d'admin, ainsi lorsque l'on clique sur l'icône, celle-ci change de couleur, afin de montrer que le champ de la table MySQL a été mis à jour.
Reste à vous procurer deux images, une verte et une rouge.
Maintenant il ne vous reste plus qu'à adapter ce script à vos propres développement, et lors de vos essais, regarder dans la console Firebug, afin de voir ce qu'il se passe.
Ainsi, avec cette méthode, je n'ai plus de reload ni de la page, ni du tableau DataTable qui me faisait auparavant un rappel de la fonction de Callback pour le réaffichage des données en bloc.

 

Bon dev