Ajax et ajout de checkbox ?

**Borowsky** · 16/06/2008, 15h50

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 !

**IP-Fix** · 16/06/2008, 16h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

On aurait pu aussi créer une combo box de maniere dynamique tout aussi facilement

**Borowsky** · 16/06/2008, 17h02

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

Quand tu mets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**E.Bzz** · 16/06/2008, 17h14

Bonjour,

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 ?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var id = 'l id de ton div';
var element = getElementById( id );
element.innerHtml = '...' // ton code html , par exemple ta checkbox ..

A+

**IP-Fix** · 16/06/2008, 19h20

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

**Borowsky** · 17/06/2008, 09h02

Merci !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 17/06/2008, 09h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

var element = document.getElementById(id);

A+

**Borowsky** · 17/06/2008, 14h14

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

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

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..

**E.Bzz** · 17/06/2008, 14h27

Envoyé par Borowsky

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

Heuuu ...

Non

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+

**IP-Fix** · 17/06/2008, 14h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Borowsky** · 17/06/2008, 14h47

Ca répond vite sur ce forum !

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

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...

Ajax et ajout de checkbox ? [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager