Ajax et ajout de checkbox ?

Version imprimable

16/06/2008, 15h50
Borowsky

Ajax et ajout de checkbox ?

Bonjour, je ne connais pas trop la technologie AJAX et je voudrais avoir quelques renseignements :

Est-il possible de faire une requete SQL en fontion de critères entrés sur une page HTML et d'afficher sur la meme page (sans réactualisation) les résultats de ma requete et des checkbox correspondant a chaque résultats (chaque ligne de ma table trouvée grace a la requete) ??

Et surtout comment en Javascript on peut ajouter des checkbox a une page HTML ?

Merci d'avance ! :P

Salut.

C'est tout a fait possible en ajax de faire cela.

Pour ajouter une checkbox a ta page web il suffit de faire
Code:

1 2 3 var id = 'l id de ton select'; var element = getElementById( id ); element.innerHtml = '...' // ton code html , par exemple ta checkbox ..
Pour assurer la compatibilité avec tout les navigateurs (ou du moins le maximum) je te conseil de passer par un framework.

avec Mootools sa donnerais :
Code:

1 2 3 4 var id = 'l id de ton select'; var element = $( id ); var comboBox = new Element('comboBox', {value: '1', text: 'ton texte'}); element.adopt(comboBox);
exemple complet :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <script src="mootools12.js" type="text/javascript"></script> <script type="text/javascript"> window.addEvent('domready', function() { var id = 'mySelect'; var element = $( id ); var comboBox = new Element('option', {value: '1', text: 'ton texte'}); element.adopt(comboBox); }); </script> </head> <body> <select name="" id="mySelect"></select> </body> </html>
Tu rajoute une boucle et le tour est joué :mouarf:
On aurait pu aussi créer une combo box de maniere dynamique tout aussi facilement ;)

16/06/2008, 17h02
Borowsky
Merci pour ta réponse, si tu me dis que c'est possible il va falloir que je me penche la dessus alors car je n'ai jamais vraiment programmé en AJAX.

Juste une autre petite question, tres conne surement mais bon je la pose quand meme :D

Quand tu mets
Code:

1 2 3 var id = 'l id de ton select'; var element = getElementById( id ); element.innerHtml = '...' // ton code html , par exemple ta checkbox ..
C'est quoi un select ? car moi je connais que le "select" qui sert a faire des listes en HTML, c'est le meme ?:mrgreen:
16/06/2008, 17h14
E.Bzz
Bonjour,

Citation:

Envoyé par Borowsky

C'est quoi un select ? car moi je connais que le "select" qui sert a faire des listes en HTML, c'est le meme ?:mrgreen:

IP-Fix me corrigera quand il se reconnectera si je dis une bêtise sur son code :

Tu peux remplacer "id du select" par "id du conteneur".
En effet dans l'exemple donné, tu pointes sur la balise select pour en modifier le contenu (.innerHTML), en l'occurrence les options.
Si tu dois appliquer le script à des checkbox, tu gardes exactement la même logique, sauf que tu ne vas pas récupérer le résultat dans un select, mais dans un autre type de conteneur (un <div> ou un <p>, par ex.).

Dans ce cas :
Code:

1 2 3 var id = 'l id de ton div'; var element = getElementById( id ); element.innerHtml = '...' // ton code html , par exemple ta checkbox ..
A+
16/06/2008, 19h20
IP-Fix

oui c'est le même select mais si tu veux tu peux aussi le faire dans une balise div si tu veux comme le suggère E.Bzz :)
17/06/2008, 09h02
Borowsky

Merci !

Cependant je viens d'essayer et Firebug m'indique une erreur sur le "$" de la ligne

Code:

var element = $(id);

"$ is not defined"... comme si "$" devait etre une variable...

D'ailleurs je ne comprend pas non plus la présence de ce "$".

Je vous l'avais dit je suis tout nouveau dans l'AJAX et le Javascript :D
17/06/2008, 09h47
E.Bzz

Citation:

Envoyé par Borowsky

"$ is not defined"... comme si "$" devait etre une variable...

La fonction $() est implémentée par la librairie d'IP-Fix.

Tu peux la remplacer par

Code:

var element = document.getElementById(id);

;)

A+
17/06/2008, 14h14
Borowsky

Ah ok je comprend mieux.

Je vais continuer à poser des questions sur ce que je veux faire ici au lieu de créer un nouveau post :D

j'ai un fichier XML qui contient mes résultats de la requete exécutée en fonction des critères entré par l'utilisateur.
J'ai ensuite réussi a afficher ca sur ma page HTML grace à vos indications (création de checkbox).

Cependant un point me chiffone :D Comment puis-je savoir si mes checkbox sont coché ou non. Car avant, quand je n'utilisais pas d'AJAX, je récupérais mes cases cochées, mais la, comme les checkbox "ne sont pas dans le code source de la page" et qu'elle y sont insérer après le chargement de la page, le code PHP ne les reconnait pu...
En gros, je ne sais pas quelles cases sont cochées au moment de la validation du formulaire...

Je sais pas si je suis très clair.. :D
17/06/2008, 14h27
E.Bzz

Citation:

Envoyé par Borowsky

Je sais pas si je suis très clair.. :D

Heuuu ... :?

Non :aie:

Par contre, sur le principe, même si le sujet est le même, la question est vraiment différente.

Aussi, mieux vaut créer un nouveau post (dans lequel tu pourra repréciser tout ça, et eventuellement ajouter un lien vers cette discussion-ci) ;)

A+
17/06/2008, 14h28
IP-Fix
si le formulaires envois un POST alors les valeurs des comboBox sont envoyé, oublie pas de leur attribuer un name et un id lors de leur création en ajax et evidemment il faut qu'elle soit dans la balise <form> de ton formulaire.

Tu peux te convaincre qu'elles sont receptionné par le php avec :
Code:

1 2 3 <?php print "<pre>".print_r($_POST, true)."</pre>"; ?>
PS : Pour une meilleur lisibilité du forum n'hesite pas a créer un topic ;)
17/06/2008, 14h47
Borowsky

Ca répond vite sur ce forum ! :lol:

Autant pour moi, pour la dernière question c'est juste que j'avais oublié l'attribut "value" :aie:

En tout cas, ça a l'air de fonctionné sur Firefox, par contre sur IE ... :(

Mais ça c'est une autre histoire, ou un autre post... :D