[AJAX] Bon de commande

Version imprimable

16/03/2007, 11h43
frog43

[AJAX] Bon de commande

Bonjour à tous,

je vous présente la situation :
Je cherche à faire un bon de commande en ligne. J'ai donc un tableau, dans la première colonne se trouve un select qui permet à l'utilisateur de choisir la référence du produit. Dans la deuxième colonne doit s'afficher le nom du produit en fonction de la référence choisie dans le select.

J'ai poster sur le forum php et on m'a norienté vers l'AJAX, donc je me suis documenté à ce sujet mais je reste un novice en la matière ...

Pour le moment j'en suis à ce stade :
- un onChange sur le select qui appel ma fonction javascript.
- ma fonction JS change le nom du produit grâce à getElementByID et innerHTML

le souci est donc qu'il me reste à remplacer le nom par ce qui est dans la base de donnée en fonction de la valeur du select.

J'espere que vous arriverez à mon comprendre mon problême ...

Cordialement,
Frog.
17/03/2007, 03h58
efficks

C'est pas vraiment un problème!
Tu veux savoir comment faire de l'AJAX, alors lit les tutoriaux :
http://javascript.developpez.com/cours/#ajax

Oui, une xmlhttprequest vers un fichier qui intérroge ta db et renvoie le résultat est très simple à metre en oeuvre.

Le tuto cité précedement l'illustre très bien.
Et ce petit exemple :
- création de la fonction de la fonction de gestion des requetes ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function createRequestObject(){
	var req = false;
 
	if(window.XMLHttpRequest){
		req = new XMLHttpRequest();
 
		if(req.overrideMimeType){ req.overrideMimeType('text/xml'); }
	} 
	else if(window.ActiveXObject){
		try{ req = new ActiveXObject("Msxml2.XMLHTTP"); }
		catch(e){
			try{ req = new ActiveXObject("Microsoft.XMLHTTP"); }
			catch(e){}
		}
	}
 
	if(!req){
		document.getElementById('progress_info').innerHTML = "Erreur : Votre navigateur ne supporte pas AJAX";
		return false;
	}
	else{ return req; }	
}

Envoie des données au fichier php via XMLHttpRequest :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function compteur(id){
		var req = createRequestObject();       //On lance une requete xmlhttprequest
		// Gestion des resultats de la requete
			req.onreadystatechange = function() {             // On défini ce qu'on va faire quand on aura la réponse
			if(req.readyState == 4 && req.status == 200)   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	         {
				affiche = req.responseText;                // On se sert de innerHTML pour rajouter les options a la liste
	            document.getElementById('erreur').innerHTML= affiche;
	         }
			}
		var URL='inc_admin/compteur.php'
		req.open("POST",URL,true); // Envoie de la requete en POST
		req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// ne pas oublier ça pour le post
		req.send("id="+id);	// envoie des variables = $_POST['clique']=lien
		}

Et le fichier php qui recoit la requete et envoie les éventuels résultats :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
        header('Content-Type: text/html; charset=ISO-8859-15');
        require('bdparams.php');
        mysql_select_db($bdd,$db) or die('erreur de selection'.mysql_error());
        $id=addslashes($_POST['id']);
        $sql="SELECT telecharges FROM documents WHERE id=".$id.";";
        $req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
        while ($ligne=mysql_fetch_array($req))
        {
        $compt=$ligne['telecharges']+1;
        }
        $sql="UPDATE documents SET telecharges='$compt' WHERE id=".$id.";";
        $req=mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
echo 'compteur incremente';
?>

ceci n'est qu'un bout de code d'exemple (basé sur un compteur) et est bien entendu à sécurisé.

19/03/2007, 13h13
frog43

J'ai bien déjà lu les tuto, je crois que j'ai compris le principe ... Je n'arrive pas à l'appliquer à mon cas, je continue à apprendre ...

Merci pour l'exemple je comprend un peu mieux, j'essaye de faire quelque chose avec tout ceci.
19/03/2007, 21h18
gandalf76fr

qu'est ce qu'il ne colle pas dans ton cas ?

Je rappel que je suis débutant AJAX ...

J'ai voulu faire le même code que le tuto (celui avec les alert) mais rien ne marche ...

Voici mon code 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
 
function ajax(){
	//document.getElementById("titre_livre").innerHTML="youhou";
	var xhr=null;
 
    if (window.XMLHttpRequest) { 
       xhr = new XMLHttpRequest();
    	}
    	else if (window.ActiveXObject){
        	xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
    	//on définit l'appel de la fonction au retour serveur
    	xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    	//on appelle le fichier reponse.txt
    	xhr.open("GET", "reponse.php", true);
    	xhr.send(null);
	}
 
	function alert_ajax(xhr){
		var docXML= xhr.responseXML;
		var items = docXML.getElementsByTagName("donnee")
		//on fait juste une boucle sur chaque element "donnee" trouvé
		for (i=0;i<items.length;i++){
			alert (items.item(i).firstChild.data);
		}
	}

Le code php :

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
 
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
 
//paramètres persos
$host="localhost";//voir hébergeur
$user="root";//login : vide ou root en local
$pass="";//password ou vide en local
$bdd="vialaron"// nom BDD
//connexion
mysql_connect($host,$user,$pass)
or die("Impossible de se connecter");
mysql_select_db("$bdd")
or die(mysql_error());
 
//on lance la requette
$query="SELECT `titre` FROM livres";
$result=mysql_query($query);
//On boucle sur le resultat
while ($row = mysql_fetch_array($result))
{
	echo "<donnee>" . $row[0] . "</donnee>\n";
}
echo "</exemple>\n";
?>

et l'action en HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<select name='ref' size='1' onChange="javascript:ajax();">
							<option>--</option>
							<?
							//connexion
							mysql_connect($host,$user,$pass)
							or die("Impossible de se connecter");
							mysql_select_db("$bdd")
							or die(mysql_error());
							//récupération du nb de ref
							$query="SELECT `ref` FROM `livres`"; 
							$result=mysql_query($query);
							$nb_ref=mysql_num_rows($result);
							//affichage
							for($a=1; $a<=$nb_ref; $a++){
								echo"<option>$a</option>";
							}
							?>
						</select>

Si sa peut te servir pour m'aider ... Dans un premier temps je voulais juste faire apparaitre dans mes alertes le contenu de ma base à moi avant de faire plus ...

Cordialement ...
Frog

02/04/2007, 12h53
frog43

J'ai eu le temps de me repencher sur ce problême, je n'arrive pas à voir ou est l'erreur. Dans le code JS j'ai placait des alert pour voir jusqu'ou le script aller ... Il marche bien c'est juste que mes données ne sont pas récupérer je pense alors ... Je regarde du coté du php donc mais je ne trouve toujours pas ....

Personne pour m'aider .... :oops: :cry: