[AJAX] Exécuter une requête SQL des la checkbox cochée

Version imprimable

30/05/2007, 17h58
dje064

[AJAX] Exécuter une requête SQL des la checkbox cochée

Salut à tous,

J'ai un petit problème, je chercherais à exécuter une requete de modification dès qu'une checkbox est coché tout en restant sur la même page.

Ca me permettrer d'archiver des produits dans une partie administration de boutique que je suis en train de développez.

Si quelqu'un connaitrait une solution simple et complète me permettant de gérer cela il serait d'une grande aide.
30/05/2007, 18h26
Nasky

Bonjour et bienvenue sur Developpez ;)

Renseigne-toi sur l'objet XMLHttpRequest qui va te permettre cela : http://siddh.developpez.com/articles/ajax/

Principe :
- détecter l'évènement "checkbox cochée" (onClick)
- lancer la requête vers une page php (grâce à l'objet XMLHttpRequest) qui effectuera les insertions/modifications SQL. A cette étape, tu ne changeras pas de page.
- récupérer le retour du serveur si nécessaire

En cas de problème d'implémentation, n'hésites pas à venir demander ;)

Nas'
30/05/2007, 20h04
dje064

ok, merci Nasky, je vais voir ca, si j'ai un problème je mettrais mon code sur le forum pour voir ce qui ne va pas:yaisse2:

Re, j'ai suivi tes conseils et j'ai trouvé la solution donc je t'en suis reconnaissant.
Je met le code à disposition pour ceux qui chercheraient une solution comme je l'ai cherché moi :

Fichier Hmlt (test.html):

Code:

1
2
3
4
5
6
7
8
9
 
<html>
        <head
                <script type="text/javascript" src="test.js"></script>
        </head>
        <body>
                <input type="checkbox" name="check" onclick="go()"/>
        </body>
</html>

Script Php (test.php) :

Code:

1
2
3
4
5
6
7
 
<?php
        //Rentrer les paramètres de connection à la base de données
 
        //On efectue ensuite la requête (celle que vous souhaitez !!)
        mysql_query("UPDATE article SET archive='1' WHERE id_article='1'") or die ("La requete de mise à jour a échoué");                    
?>

Script Ajax (test.js) :

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
 
function getXhr()
{
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject)
	{ // Internet Explorer 
		try 
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) 
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else 
	{ // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go()
{
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			xhr.responseText;
		}
	}
	xhr.open("GET","test.php",true);
	xhr.send(null);
}

Voila donc si on regarde bien ca fait 3 fichiers et des que vous cochez la checkbox dans le fichier test.html ca fait la mise à jour.

Pour ceux qui connaissent dîtes moi si je n'ai pas fait d'erreur ou s'il y a des améliorations à apporter !!

Merci tout le monde....:yaisse2:

31/05/2007, 10h42
furth

J'aurai une question par rapport à ce post, si on veut envoyer l'id d'une table dans ma page test.php afin de faire la modification, partique quand on a plusieurs checkbox à modifier, on s'y prend comment?
31/05/2007, 10h49
Nasky

Code:

xhr.open("GET","test.php?id=" + id ,true);

;)
Sinon, dje064, ça me parait correct, à part que tu n'utilises pas la réponse du serveur donc inutile de vérifier que la requête est terminée mais sinon... :)

Nas'
31/05/2007, 10h54
furth

Yep Nasky, merci pour ta réponse...

juste pour savoir comment tu remplie le id

Code:

xhr.open("GET","test.php?id=" + id ,true);

Tu peux le passer en paramètre de ta fonction à appeler en cas de click.
Code:

1 2 3 4 5 6 7 <input ..... onClick="go(5);" /> function go(id) { // .... xhr.open("GET","test.php?id=" + id ,true); //... }
Nas'

31/05/2007, 11h25
furth

Oki, merci, je vais essayer ca et je vous tiens au courant:lol: