Sujet Précédent Sujet Suivant

[php/AJAX] Listes déroulantes

Résolu/Fermé
loranl Messages postés 25 Date d'inscription jeudi 9 mars 2006 Statut Membre Dernière intervention 16 mars 2007 - 11 avril 2006 à 16:14
 reseau0010 - 30 janv. 2013 à 21:18
Bonjour,
J'ai un petit problème de listes déroulantes. J'ai beau cherché sur différents forums je ne trouve pas la réponse à ma question.
J'ai 2 listes déroulantes ('familles' et 'sous-familles') issues directement des tables de même nom de ma base Mysql.
Comme leur nom l'indique, les listes sous-familles et familles sont liées.

Je voudrais pouvoir sélectionner une famille, puis une sous-famille et de là, je voudrais faire apparaitre tous les articles de la sous-famille sélectionnée.

Bref, mes deux listes sont bien alimentées et si je sélectionne une 'famille', la liste 'sous_familles' se met à jour (j'ai vu cette technique sur un forum qui parlé d'AJAX).
De même, si je choisis une 'sous-famille', les 'articles' de celle-ci apparaissent à la suite.
Mais là où ça se gâte, c'est si je sélectionne une famille, les modifications sur la liste sous-familles n'ont plus d'incidence, pas d'apparition des articles.

J'ai un fichier selection.php où se trouve le code js ainsi que mes deux listes déroulantes et l'emplacement pour l'aperçu des articles.
Ma première liste, via la fonction sendData envoie la famille sélectionnée au fichier ajaxssf.php pour modifier la liste sous-famille.
La deuxième envoie, toujours par sendData, la sous-famille sélectionnée au fichier ajaxart.php pour afficher les
articles correspondants.
Les fichiers ajaxssf et ajaxart n'ont pas la même en-tête que le fichier principal, pas de JS, seulement un header('Content-type: text').

A mon avisde débutant, aussi humble soit-il, ma fonction sendData (tirée d'un tuto et adaptée à mon cas) de mon code js marche, puisque j'arrive à la faire fonctionner autant de fois que je veux,
si je change mon choix sur la même liste.
Je pense que mon problème vient du fichier ajaxssf.php (appelé lorsqu'on change la famille), où j'utilise toujours la même fonction (sendData), mais j'ai l'impression qu'elle n'est pas reconnue.

Je n'ai sans doute pas compris les subtilités de la méthode que j'ai utilisée, car apparament, je ne sais pas ce qu'il se passe exactement comme échange.

PS: je n'ai pas mis mon code, mais si ça peut vous être utile, je peux le poster.
si quelqu'un a lu ce post en entier, je l'en remercie, c'est déjà un grand mal.
si quelqu'un a compris, je l'en félicite.
si quelqu'un a une idée, je le solicite.
si quelqu'un a des questions, n'hésite pas.

Merci d'avance. Loran.
A voir également:

24 réponses

  • 1
  • 2
Réponse 1 / 24
Alain42
28 août 2007 à 17:28
Je suis revenu de mon rendez vous, j'ai eu un peu de temps alors je t'ai fait tes scripts pour ce dont tu as besoin:

3 fichiers toujours

config.php: 

<?php
$host="localhost";
$Login="xxxxxxx";
$Pass="yyyyyyyy";
$DB="gest_process"; // le nom de ta base
?>


page1.php: 

<html>
<head>
<!--  Script de listes deroulantes liees  avec appel  par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
	var http_request = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
		// lancement de la requete
		http_request.open('POST', url, true);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		obj=document.getElementById(id_niveau);
		data="val_sel="+obj.value;
        http_request.send(data);
}

function traitementReponse(http_request,id_ecrire) {
	var affich="";
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
					// cas avec reponse de PHP en mode texte:
			//chargement des elements reçus dans la liste
			var affich_list=http_request.responseText;
				obj = document.getElementById(id_ecrire); 
                obj.innerHTML = affich_list;
		} 
		else {
                alert('Un problème est survenu avec la requête.');
        }
    }
}
</script>
</head>
<?php
include ("config.php");
// Connexion a la base de donnees  
	/*$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	$QuestionBase = "SELECT DISTINCT $champ_niv FROM $Table  ORDER BY $champ_niv ASC " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
	$nombre_enr=mysql_num_rows($result_recherche);
	*/
?>
<body>
<form name="test1" method="post" action="liste_liees.php"  >
	<div id="id_list1">Liste1:<br>
		<select name="niv1" id="id_niv1" onChange="makeRequest('rep_PhpAjax.php','id_niv1','id_niv2')">
			<option>-- Choisissez --</option>
			<option value="impact">impact</option> 
			<option value="processus">processus</option> 
			<option value="instancedecision">instance decision</option> 
		</select> 
		<br><br>
	</div>
	
	
	<div id="id_niv2">
	<!-- ici sera charge la reponse mode texte de PHP à la request AJAX -->
	</div>
</form>
</body>
</html>


repPhpAjax.php: 

<?php
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
include ("config.php");
	//recup de la valeur postee par Ajax (nom de la table)
	$table=$_POST['val_sel'];
	if($table=="Choisissez") {exit;}
	//generation des noms des champs en fonction de la table (si ils s'appelaient tous pareils il serait inutile de faire ça)
	switch ($table){
		case "impact":
		$id="id_impact";
		$nom="LibelleImpact";		
		break;
		case "instancedecision":
		$id="Id_Instance_Decision";
		$nom="Nom";		
		break;
		case "processus":
		$id="Id_Processus";
		$nom="NomProcessus";		
		break;
	}
	
// Connexion a la base de donnees  
	$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	$QuestionBase = "SELECT * FROM $table " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
// construction de la réponse PHP à Ajax
$aff="<table BORDER=\"6\" CELLPADDING=\"6\" CELLSPACING=\"10\" Width=\"60%\">";
$aff.="<tr><th Width=\"60%\">Nom</th><th colspan=\"2\"Width=\"40%\">Actif</th></tr>";// ligne des titres du tableau
	while ($row=mysql_fetch_assoc($result_recherche)){	
	//cocher le bouton radio en focntion de l'etat Actif  oui/non lu dans la base
	if($row['Actif']=="oui"){$check_oui="checked"; $check_non="";}else{$check_oui=""; $check_non="checked";}
	// generation des lignes de la reponse
		$aff.="<tr><td><input type=\"text\" name=\"$row[$id]\" value=\"$row[$nom]\"></td>";
		$aff.="<td><input type=\"radio\" name=\"radio_oui_$row[$id]\" $check_oui >oui</td>";
		$aff.="<td><input type=\"radio\" name=\"radio_non_$row[$id]\" $check_non >non</td></tr>";
	}
	$aff.="</table>";
// envoi reponse Php a Ajax qui va afficher tout ça dans la page
	echo $aff;
?>
5
Réponse 2 / 24
Alain42
28 août 2007 à 14:32
Je n'ai pas trop le temps alors je te donne les codes exemple que j'ai pour deux listes : inspires toi en et adaptes en analysant le principe, tu verras ce n'est pas tjs facile à debugger mais une fois que ça marche Ajax c'est de la "balle"! si besoin decommente la boite alert() dans la fct traitement de la réponse pour voir ce que répond PHP.

3 fichiers:

config.php: 

<?php
$host="localhost";
$Login="root";
$Pass="......l";
$DB="test";
$Table="etudiants";
$champ_niv="niveau";
$champ_etud="etudiants";
?>


liste_liees.php: 

<html>
<head>
<!--  Script de listes deroulantes liees  avec appel  par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
	var http_request = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
		// lancement de la requete
		http_request.open('POST', url, true);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		obj=document.getElementById(id_niveau);
		data="val_sel="+obj.value;
        http_request.send(data);
}

function traitementReponse(http_request,id_ecrire) {
	var affich="";
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
					// cas avec reponse de PHP en mode texte:
			//chargement des elements reçus dans la liste
			var affich_list=http_request.responseText;
         //alert("Reponse de php: "+affich_list);
				obj = document.getElementById(id_ecrire); 
                obj.innerHTML = affich_list;
		} 
		else {
                alert('Un problème est survenu avec la requête.');
        }
    }
}
</script>
</head>
<?php
include ("config.php");
// Connexion a la base de donnees  
	$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	$QuestionBase = "SELECT DISTINCT $champ_niv FROM $Table  ORDER BY $champ_niv ASC " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
	$nombre_enr=mysql_num_rows($result_recherche);
?>
<body>
<form name="test1" method="post" action="liste_liees.php"  >
	<div id="id_list1">Niveau:<br>
		<select name="niv1" id="id_niv1" onChange="makeRequest('rep_PhpAjax.php','id_niv1','id_list2')">
			<option>-- Choisissez --</option>
<?php
			while ($row=mysql_fetch_assoc($result_recherche)){
?>
					<option value="<?php echo $row[$champ_niv]?>"><?php echo $row[$champ_niv]?></option> 
<?php
			}
?>
		</select> 
		<br><br>
	</div>
	
	
	<div id="id_list2">
	<!-- ici sera charge la reponse mode texte de PHP à la request AJAX -->
	</div>
</form>
</body>
</html>


repPhpAjax.php: 

<?php
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
include ("config.php");

// Connexion a la base de donnees  
	$AccesBase = mysql_connect($host,$Login,$Pass);
	mysql_select_db($DB,$AccesBase);
	$QuestionBase = "SELECT * FROM $Table  WHERE ".$champ_niv."='".$_POST[val_sel]."' ORDER BY ".$champ_etud." ASC " ;
	$result_recherche=mysql_db_query($DB, $QuestionBase) or die (mysql_error());
// construction de la liste deroulante
$aff=="";
$aff=$aff."Etudiants:<br>
		<select name='niv1' id='cont_list2' >
		<option>-- Choisissez --</option>";
		while ($row=mysql_fetch_assoc($result_recherche)){
			$aff.="<option value=\"$row[$champ_etud]\">$row[$champ_etud]</option>"; 
		}
	$aff=$aff."</select><br><br>";
// envoi reponse Php a Ajax	
	echo $aff;
?>
3
athome
13 sept. 2010 à 16:47
je tente de me servir de ton script
mais je n'arrive pas à remonter la valeur de la 2eme liste déroulante !
si tu peux donner un coup de main ;)
merci
0
Réponse 3 / 24
pedatic Messages postés 73 Date d'inscription lundi 16 juin 2008 Statut Membre Dernière intervention 1 février 2012 4
9 nov. 2008 à 15:08
Bonjour
pourriez vous mettre les codes des differents pages en une seule ?
2
Réponse 4 / 24
loranl Messages postés 25 Date d'inscription jeudi 9 mars 2006 Statut Membre Dernière intervention 16 mars 2007 3
11 avril 2006 à 17:11
Désolé pour le calvère de ceux qui m'ont lu jusqu'au bout. Je viens de trouvre la solution à mon problème en ne faisant pas appel à ma fonction depuis ma page ajaxssf.php, mais directement depuis ma page principale 'selection.php'
Voilà, ça n'aura certainement pas fait avancer les choses, et sans doute personne ne m'aura lu, mais je préfère quand même conclure mon Post.

A bientôt, peut-être.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 24
techer jean-françois
28 févr. 2007 à 01:02
bonjour ioran
j'ai lu ta demande d'aide concernant des les tes déroulantes de familles et de sous familles et j'ai vu que tu avais trouvé la solution
je souhaiterai jeter un oeil sur ton code pour le comprendre et apprendre
je te remercie de me donner la possibilité de le lire
jean-francois techer
techer.jean-francois@wanadoo.fr
0
Réponse 6 / 24
loranl Messages postés 25 Date d'inscription jeudi 9 mars 2006 Statut Membre Dernière intervention 16 mars 2007 3
16 mars 2007 à 15:12
Désolé Jean-François
Mais depuis ce dernier post, j'ai changé 15 fois de boulot.
J'avoue que je me suis totalement désintéressé du php et de Ajax, et après un an passé sans voir ce type de code, je sais à peine de quoi je parlais à l'époque. Etant novice, je m'y suis intéressé, mais depuis, de l'eau a coulé sous les ponts et a emporté le code avec elle.
Bonne recherche quand même, si tu n'as pas encore trouvé ta solution.
0
Réponse 7 / 24
karim
13 mai 2007 à 16:08
oui loranl tu peut faire ca meme avec javascript sans recour au langauge ajax et aussi j'ai fait ca sans aussi charger la pager mais si tu veut faire une 3 éme categorie sans charger la page alors il faut faire ca avec ajax mais en deux categorie seulement tu peut le faire
0
Réponse 8 / 24
imane14
28 août 2007 à 13:10
Bonjour,
Est ce que tu peux poster ton code pour voir un peu stp?
J'ai le même problème que tu avais, je bloque depuis plusieurs jours.
Merci d'avance pour ton aide!
0
Réponse 9 / 24
Alain42
28 août 2007 à 13:54
Salut imane14</gras>,

Quel est ton problème exactement ?

Tu veux trois listes déroulantes liées par des appels Ajax à un script php (interro BDD), pour faire quoi ?

J'aurais un code qui peut t'intéresser, avec plus de précisions.
0
Réponse 10 / 24
imae14
28 août 2007 à 14:19
j'ai 3 tables : impact, processus, instancededecision.
Ma table impact contient 2 élements: impact1 et impact2.
Ma table processus contient 3 éléments: processus1, processus2 et processus3.
Ma table instancededecision contient instance1 et instance2.
Voici le code de création de ces tables:
CREATE TABLE `impact` (
`id_impact` int(11) NOT NULL auto_increment,
`LibelleImpact` varchar(50) NOT NULL default '',
`Actif` varchar(50) NOT NULL default '',
PRIMARY KEY (`id_impact`)
)

CREATE TABLE `instancedecisison` (
`Id_Instance_Decision` int(11) NOT NULL auto_increment,
`Nom` varchar(50) NOT NULL default '',
`Actif` varchar(50) NOT NULL default '',
PRIMARY KEY (`Id_Instance_Decision`)
)

CREATE TABLE `processus` (
`Id_Processus` int(11) NOT NULL auto_increment,
`NomProcessus` varchar(50) NOT NULL default '',
`Actif` varchar(50) NOT NULL default '',
PRIMARY KEY (`Id_Processus`)
)

En fait dans ma liste déroulante je dois avoir imapct, processus, instancededecision, càd les noms de mes 3 tables.
Qd je vais choisir par exemple impact dans cette liste à coté je dois avoir une sotre de tableau de deux colonnes Nom et Actif.
Dans la colonne Nom, je dois pouvoir afficher les noms des éléments de ma table impact, ici sera impact1, imapct2.
La colonne actif contient des boutons à cocher pour chaque élément.
Bien évidemment, je peux afficher des éléments qui existent déjà dans la table comme je peux créer des nouveaux ou modifier qq uns.

Merci d'avance:-)
0
Réponse 11 / 24
imae14
28 août 2007 à 17:46
Merci bcp Alain42.
Je vais essayer ta proposition, si j'ai un problème je vais te conacter.
0
Réponse 12 / 24
imane14
29 août 2007 à 13:19
Bonjour,
J'ai essayé ton code.
Pour l'instant, il y a une erreur à cette ligne de la page1.php: <div id="id_list1">Liste1:<br>. Je ne vois varaiment pas!
il faut créer une page liste_liees.php qui est déclarée dans action du formulaire de page1.php ?
c'est quoi le rôle de cette fonction : makeRequest('rep_PhpAjax.php','id_niv1','id_niv2')?

Excuses moi je suis encore débutante.
Je te remercie bcp.
0
Réponse 13 / 24
Alain42
31 août 2007 à 17:49
Coucou c'est moi qui reviens de la campagne.

C'est bien le code du post n° 9 que tu as pris ?

Il doit y avoir un pb au moment du copier/ coller car moi je n'ai pas d'erreur (je teste avec EasyPhp 2).
Je ne vois pas ce qui peut gêner à cette ligne là.

Mais méfie toi car comme il y a plusieurs lignes que j'ai laissé en commentaire (entre /* et */ après // connexion à la base), parfois php n'en tient pas compte dans le numéro de ligne en erreur et l'erreur est quelques lignes plus loin. Essayes en otant ces lignes qui ne servent pas.

Pour répondre à ta question:

onChange="makeRequest('rep_PhpAjax.php','id_niv1','id_niv2')"

lorsque l'utilisateur sélectionne un nouvel élément dans la liste, on appelle la fonction Ajax/Javascript makeRequest......
On appelle cette fonction en lui passant les arguments: id de la liste, id du niveau a ecrire

Cette fonction utilise la propriété d'Ajax de lancer une requette vers un script PHP en arrière plan, sans recharger la page, ce qui est plus fluide.
On appelle le script php (rep_PhpAjax.php) en lui passant la valeur qui a été sélectionnée. On lit la valeur par le getElementByID('id_de_la_liste_deroulante') et on l'envoi par le http_request.send(data);

Le script php recevant cette valeur, va interroger la base de données , construction de la partie que l'on veut afficher en niveau2 et renvoyer le résultat (echo $aff);

lorsque la réponse arrive au navigateur, elle est traitée par la fonction traitementReponse.
Elle va écrire par innerHTML la réponse dans le <div id="id_niv2".

Je viens de voir une erreur:
le script php doit se nommer rep_PhpAjax.php et pas repPhpAjax.php
milles excuses!

Quant au script dont le nom est dans la balise <form action="......"

Tu le modifie et tu mets le nom du script qui sera appelé lorsque ton formulaire sera posté (qd l'utilisateur cliquera sur le bouton Envoyer (Submit) et qui traitera de la suite, enregistrement des modifs je suppose.

Mais on verra ça plus tard.
0
Réponse 14 / 24
imane14
1 sept. 2007 à 20:35
Coucou,
j'ai attendu ta réponse, je pensais que tu m'as oublié!!

Je t'envoie les scripts:

page1.php


<html>
<head>
<!-- Script de listes deroulantes liees avec appel par AJAX, (evite
le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de
//fonction supplémentaire pour écraser l'en-tête envoyé par le serveur,
//juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request)
{
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function()
{
traitementReponse(http_request,id_ecrire);
} //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open("POST", "repPhpAjax.php", true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,
// !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}


function modifier(champ,id_ecrire)
{
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de
//fonction supplémentaire pour écraser l'en-tête envoyé par le serveur,
//juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request)
{
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}

http_request.onreadystatechange = function()
{
traitementReponse(http_request,id_ecrire);
} //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open("POST", "modifajax.php", true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,
// !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
obj=document.getElementById("id_niv1").value;
obj1=document.getElementsByName("champ").value;
obj2=document.getElementsByName("select").value;
data2="val_sel2="+obj2;
data1="val_sel1="+obj1;
data="val_sel="+obj;
alert(data);
alert(data1);
alert(data2);
http_request.send(data&data1&data2);
}


function traitementReponse(http_request,id_ecrire)
{
var affich="";
if (http_request.readyState == 4 && http_request.status == 200)
{
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else
{
alert('Un problème est survenu avec la requête.');
}

}
</script>
</head>
<?php
// Connexion a la base de donnees
$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
/*$QuestionBase = "SELECT DISTINCT $champ_niv FROM $Table ORDER BY
$champ_niv ASC " ;
$result_recherche=mysql_db_query($DB, $QuestionBase) or die
(mysql_error());
$nombre_enr=mysql_num_rows($result_recherche);
*/
?>
<body>
<form name="test1" method="post" action="">
<div id="id_list1" title= >Champs à paramétrer:<br>
<select name="niv1" id="id_niv1" onChange="makeRequest('id_niv1','id_niv2')">
<option>-- Choisissez --</option>
<option value="impact">impact</option>
<option value="processus">processus</option>
<option value="instancedecision">instance decision</option>
</select>
<input iname="champ" type="text">
<select name="select" size="1">
<option >0</option>
<option >1</option>
</select>
<br>
<br>
</div>


<div id="id_niv2">
<!-- ici sera charge la reponse mode texte de PHP à la request AJAX
-->
</div>

<div id="id_niv3">
<input name="ajout_champs" type="button" value="Ajouter" onClick="modifier('champ','id_niv1')">
<input name="modif_champs" type="submit" value="Modifier">
<input name="valid_champs" type="submit" value="Valider">
</div>

</form>
</body>
</html>





repPhpajax.php


<?php
// script PHP interrogation Base de donnees pour reponse a la requete
//AJAX

//recup de la valeur postee par Ajax (nom de la table)
$table=$_POST['val_sel'];
if($table=="Choisissez") {exit;}
//generation des noms des champs en fonction de la table (si ils
//s'appelaient tous pareils il serait inutile de faire ça)
switch ($table){
case "impact":
$id="id_impact";
$nom="LibelleImpact";
break;
case "instancedecision":
$id="Id_Instance_Decision";
$nom="Nom";
break;
case "processus":
$id="Id_Processus";
$nom="NomProcessus";
break;
}

// Connexion a la base de donnees

$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
$QuestionBase = "SELECT * FROM $table " ;
$result_recherche=mysql_query($QuestionBase) or die(mysql_error());

// construction de la réponse PHP à Ajax
echo"<table BORDER=\"6\" CELLPADDING=\"6\" CELLSPACING=\"10\"Width=\"60%\">";
echo"<tr><th Width=\"60%\">Nom</th><th colspan=\"2\"Width=\"40%\">Actif</th></tr>";// ligne des titres du tableau
while ($row=mysql_fetch_assoc($result_recherche))
{
//cocher le bouton radio en focntion de l'etat Actif oui/non lu dans la base
if($row['Actif']==1)
{
$check_oui="checked";
$check_non="";
}
else
{
$check_oui="";
$check_non="checked";
}
// generation des lignes de la reponse
echo"<tr><td><input type=\"text\" name=\"$row[$id]\"value=\"$row[$nom]\"></td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_oui >oui</td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_non >non</td></tr>";
}
echo"</table>";
// envoi reponse Php a Ajax qui va afficher tout ça dans la page
//echo $aff;
?>




modifajax.php
<?php
// script PHP interrogation Base de donnees pour reponse a la requete
//AJAX

//recup de la valeur postee par Ajax (nom de la table)
$table=$_POST['val_sel'];
$actif=$_POST['val_sel3'];
$ajout=$_POST['val_sel2'];

if($table=="Choisissez") {exit;}
//generation des noms des champs en fonction de la table (si ils
//s'appelaient tous pareils il serait inutile de faire ça)
switch ($table){
case "impact":
$id="id_impact";
$nom="LibelleImpact";
break;
case "instancedecision":
$id="Id_Instance_Decision";
$nom="Nom";
break;
case "processus":
$id="Id_Processus";
$nom="NomProcessus";
break;
}

// Connexion a la base de donnees

$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
$QuestionBase = "INSERT INTO processus VALUES ('','".$ajout."','".$actif."')";
$result_recherche=mysql_query($QuestionBase) or die(mysql_error());

// construction de la réponse PHP à Ajax
echo"<table BORDER=\"6\" CELLPADDING=\"6\" CELLSPACING=\"10\"Width=\"60%\">";
echo"<tr><th Width=\"60%\">Nom</th><th colspan=\"2\"Width=\"40%\">Actif</th></tr>";// ligne des titres du tableau
while ($row=mysql_fetch_assoc($result_recherche))
{
//cocher le bouton radio en focntion de l'etat Actif oui/non lu dans la base
if($row['Actif']==1)
{
$check_oui="checked";
$check_non="";
}
else
{
$check_oui="";
$check_non="checked";
}
// generation des lignes de la reponse
echo"<tr><td><input type=\"text\" name=\"$row[$id]\"value=\"$row[$nom]\"></td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_oui >oui</td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_non >non</td></tr>";
}
echo"</table>";
// envoi reponse Php a Ajax qui va afficher tout ça dans la page
//echo $aff;
?>

Ces scripts ne marchent pas/
la page modifajax.php concerne l'ajout de champs et l'enregistrement de ces derniers ds la bas de données.
il ya le cas de modification et de suppression que je n'ai pas encore géré.
Je bloque bcp.
Merci de tes aides Alain42.
0
Réponse 15 / 24
Alain42
1 sept. 2007 à 21:18
Première question:

- as tu essayé les trois fichier que je t'ai donné en renommant seulement le fichier repPhpAjax.php en rep_PhpAjax.php et en mettant bien sur tes codes d'accès à la base.

est ce que ce principe te convient, on aménagera plus tard.

Si j'ai bien compris, tu veux qu'après le choix dans la liste 1:

- apparaisse le tableau à deux colonnes avec dans une des champs contenant les processus et dans l'autre en face des boutons radio Actif oui/non

- ensuite en dessous des boutons:
ajouter une ligne (un champ colonne de gauche et deux boutons radio actif oui/NON col de droite (la l'utilisateur pourra rentrer une nouvelle valeur
modifierr (inutile car il peut modifier directement dans les champs et cliquer les boutons radio).
Enregistrer (pour enregistrer toutes les modifs d'un coup)


Car tu as sérieusement modifié la fonction MakeRequest et notamment url a disparu alors comment appeler le script php ?

Si le principe Ajax te perturbe trop on peut faire seulement en PHP cela oblige à recharger la page à chaque fois, c'est comme tu veux .
0
Réponse 16 / 24
imane14
1 sept. 2007 à 22:12
En fait qd j'ai essayé les trois fichiers que tu m'as donné en renommant seulement le fichier repPhpAjax.php en rep_PhpAjax.php et en mettant bien sur tes codes d'accès à la base ça fonctionnait.
Maintenant que j'ai ajouté le script concernant l'ajout, rien ne fonctionne.
Normalement qd on affiche les élements de la table séléctionnée dans le tableau, les boutons Actif ou non actif doit etre figé?
Imagine par erreur un élément est actif l'administrateur coche non actif, il y aura une modification non souhaitée!!
Pour la suppression je ne voits pas trop cmt il faut faire, car si on décide de supprimer un élément du tableau, il faut qu'on arrive à le garder ds l'historique de la base de données.
Est ce que tu px m'expliquer en détails ce que tes scripts font exactement?Je ne comprends pas bien le principe de Ajax.
En php je ne sais pas cmt faire, je suis débutante:-(.Donc je ne peux pas te dire qu'est ce que je préfère!!
Merci bcp Alain42.
0
Réponse 17 / 24
Alain42
1 sept. 2007 à 22:29
Précises moi:

- est ce que ce format d'affichage de la réponse te convient ?

- ensuite que doit pouvoir modifier l'utilisateur ou l'administrateur ? est ce la même personne
le texte contenu dans le champ
modifier actif oui/non correspondant
- ajouter un nouveau champ ? en cochant actif

- supprimer un champ ?

- ou la partie existante est seulement en consultation.

On peut afficher des choses mais les rendre non modifiables.

Pour garder une trace dans la base une fois supprimé, je ne vois pas l'interêt ?
0
Réponse 18 / 24
imane14
1 sept. 2007 à 22:38
oui le format me convient.
modifier ce qu'il y a déjà dans la base de données.
ajouter des nouveaux éléments pour les enregistrer ds la base de données.
supprimer un élément du tableau.


Merci
0
Réponse 19 / 24
imane14
2 sept. 2007 à 11:46
BONJOUR,
Je te renvoie les scripts:



modifajax.php


<html>
<head>
<!-- Script de listes deroulantes liees avec appel par AJAX, (evite
le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de
//fonction supplémentaire pour écraser l'en-tête envoyé par le serveur,
//juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request)
{
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function()
{
traitementReponse(http_request,id_ecrire);
} //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open("POST", "repPhpAjax.php", true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,
// !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}


function modifier(champ,id_ecrire)
{
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de
//fonction supplémentaire pour écraser l'en-tête envoyé par le serveur,
//juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request)
{
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}

http_request.onreadystatechange = function()
{
traitementReponse(http_request,id_ecrire);
} //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open("POST", "modifajax.php", true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST ,
// !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
obj=document.getElementById("id_niv1").value;
obj1=document.getElementById("c").value;
obj2=document.getElementById("s").value;
data2="val_sel2="+obj2;
data1="val_sel1="+obj1;
data="val_sel="+obj;
alert(data);
alert(data1);
alert(data2);
// http_request.send(data&data1&data2);
}



function traitementReponse(http_request,id_ecrire)
{
var affich="";
if (http_request.readyState == 4 && http_request.status == 200)
{
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else
{
alert('Un problème est survenu avec la requête.');
}

}
</script>
</head>
<?php
// Connexion a la base de donnees
$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
/*$QuestionBase = "SELECT DISTINCT $champ_niv FROM $Table ORDER BY
$champ_niv ASC " ;
$result_recherche=mysql_db_query($DB, $QuestionBase) or die
(mysql_error());
$nombre_enr=mysql_num_rows($result_recherche);
*/
?>
<body>
<form name="test1" method="post" action="">
<div id="id_list1" title= >Champs à paramétrer:<br>
<select name="niv1" id="id_niv1" onChange="makeRequest('id_niv1','id_niv2')">
<option>-- Choisissez --</option>
<option value="impact">impact</option>
<option value="processus">processus</option>
<option value="instancedecision">instance decision</option>
</select>
<input name="champ" type="text" id="c">
<select name="select" id="s">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br>
<br>
</div>


<div id="id_niv2">
<!-- ici sera charge la reponse mode texte de PHP à la request AJAX
-->
</div>

<div id="id_niv3">
<input name="ajout_champs" type="button" value="Ajouter" onClick="modifier('champ','id_niv1')">
<input name="modif_champs" type="submit" value="Modifier">
<input name="valid_champs" type="submit" value="Valider">
</div>

</form>
</body>
</html>



page1.php

<?php
// script PHP interrogation Base de donnees pour reponse a la requete
//AJAX

//recup de la valeur postee par Ajax (nom de la table)
$table=$_POST['val_sel'];
$actif=$_POST['val_sel1'];
$ajout=$_POST['val_sel2'];

if($table=="Choisissez") {exit;}
//generation des noms des champs en fonction de la table (si ils
//s'appelaient tous pareils il serait inutile de faire ça)
switch ($table){
case "impact":
$id="id_impact";
$nom="LibelleImpact";
break;
case "instancedecision":
$id="Id_Instance_Decision";
$nom="Nom";
break;
case "processus":
$id="Id_Processus";
$nom="NomProcessus";
break;
}

// Connexion a la base de donnees

$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
$QuestionBase = "INSERT INTO processus VALUES ('','".$ajout."','".$actif."')";
$result_recherche=mysql_query($QuestionBase) or die(mysql_error());

// construction de la réponse PHP à Ajax
echo"<table BORDER=\"6\" CELLPADDING=\"6\" CELLSPACING=\"10\"Width=\"60%\">";
echo"<tr><th Width=\"60%\">Nom</th><th colspan=\"2\"Width=\"40%\">Actif</th></tr>";// ligne des titres du tableau
while ($row=mysql_fetch_assoc($result_recherche))
{
//cocher le bouton radio en focntion de l'etat Actif oui/non lu dans la base
if($row['Actif']==1)
{
$check_oui="checked";
$check_non="";
}
else
{
$check_oui="";
$check_non="checked";
}
// generation des lignes de la reponse
echo"<tr><td><input type=\"text\" name=\"$row[$id]\"value=\"$row[$nom]\"></td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_oui >oui</td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_non >non</td></tr>";
}
echo"</table>";
// envoi reponse Php a Ajax qui va afficher tout ça dans la page
//echo $aff;
?>



repAjaxPhp.php

<?php
// script PHP interrogation Base de donnees pour reponse a la requete
//AJAX

//recup de la valeur postee par Ajax (nom de la table)
$table=$_POST['val_sel'];
if($table=="Choisissez") {exit;}
//generation des noms des champs en fonction de la table (si ils
//s'appelaient tous pareils il serait inutile de faire ça)
switch ($table){
case "impact":
$id="id_impact";
$nom="LibelleImpact";
break;
case "instancedecision":
$id="Id_Instance_Decision";
$nom="Nom";
break;
case "processus":
$id="Id_Processus";
$nom="NomProcessus";
break;
}

// Connexion a la base de donnees

$db_conn = mysql_connect("localhost", "edf", "edf")
or die("Imposssible d'établir la connexion avec le serveur!");
mysql_select_db('edf', $db_conn) or die("Imposssible d'établir la connexion avec la base de données!");
$QuestionBase = "SELECT * FROM $table " ;
$result_recherche=mysql_query($QuestionBase) or die(mysql_error());

// construction de la réponse PHP à Ajax
echo"<table BORDER=\"6\" CELLPADDING=\"6\" CELLSPACING=\"10\"Width=\"60%\">";
echo"<tr><th Width=\"60%\">Nom</th><th colspan=\"2\"Width=\"40%\">Actif</th></tr>";// ligne des titres du tableau
while ($row=mysql_fetch_assoc($result_recherche))
{
//cocher le bouton radio en focntion de l'etat Actif oui/non lu dans la base
if($row['Actif']==1)
{
$check_oui="checked";
$check_non="";
}
else
{
$check_oui="";
$check_non="checked";
}
// generation des lignes de la reponse
echo"<tr><td><input type=\"text\" name=\"$row[$id]\"value=\"$row[$nom]\"></td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_oui >oui</td>";
echo"<td><input type=\"radio\" name=\"radio_oui_$row[$id]\"$check_non >non</td></tr>";
}
echo"</table>";
// envoi reponse Php a Ajax qui va afficher tout ça dans la page
//echo $aff;
?>




en fait, maintenant il affiche les elements qui sont déjà dans la base de données, mais si je veux ajouter un nouveau element, il n'arrive pas à créer une nouvelle zone de texte dans le tableau pour rajouter l'element que j'ai saisi.
Je pense qu'il faut ajouter qqc dans la fonction traitementReponse de la page1.php!!!
Par exemple si je choisi impact dans ma liste déroulante, il m'affiche process1 et le bouton actif est coché(ce que contient la table processus), maintenant j'ecris procss2 dans la zone de texte champ et je choisi 0 dans la liste select pour dire qu'il est non actif.
qd je clique sur le bouton ajouter, il affiche dans une petite fenetre:
val_sel=processus/ val_sel1=process2/val_sel2=0 .mais rien ne se rajoute dans le tableau du coup dans la base de données.

Merci de ton aide alain42.
0
Réponse 20 / 24
Alain42
2 sept. 2007 à 13:27
S@alut,

Je suis en train de bosser pour toi.

Je refait tout en php exclusivement, ce serra mieux, et plus simple qu'avec Ajax.

J'en suis à l'étape de rajout d'une ligne et ça marche. Il me reste a traiter l'enregistrement dans la base. En principe ce serra opérationnel ce soir ?

Par contre le post commence à devenir un peu long et difficile à exploiter alors si tu veux contactes moi par mail sur cette adresse provisoire:

alain4208@orange.fr

je t'enverrai les fichiers en pièce jointe c'est plus pratique !
0
Nass
27 févr. 2008 à 12:20
merci pour ces explications et tes codes, pourrais tu poster ta solution en php ici ?
grand merci
0
M3xico
27 août 2008 à 12:14
Bonjour Alain,

je voulais savoir si vous avez toujours ce script et si oui, pourriez vous me l'envoyer svp?
Ce script en php m'intéresse énormément puisque je dois réaliser un back/front office.

Merci d'avance.
0
qq
19 sept. 2010 à 23:27
Bonjour,

Moi j'ai le probleme que lorsque je choisit une valeur dans le premier champ j'aurais pas la mise à jour du deuxieme champ il reste toujours vide
je crois que cette fonction ne renvoie pas de resultat et je sais pas comment je peux faire pour que la valeur de $id dans la requete s'affiche car je crois qu'elle n'a pas de valeur

Je vais vous donner la fonction concerné

public function getRegionById($id)
{
$prepare = $this->prepare('SELECT region_id, region_name
FROM region
WHERE region_id = "'.$id.'"');
$prepare->execute();
$region = $prepare->fetchAll();

return $region;
}

j'aimerais avoir une aide si quelqu'un peu m'aider merci d'avance de m'aider
0

Discussions similaires

ALERT en php
snoopy -
appkech -

14 réponses
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses
que veut dire php natif
playboy-1990 -
avion-f16 -

2 réponses
Page avec index.php?id=1
jeef06 -
Mihawk -

2 réponses
[php] Différence entre \n et \r
dcanl -
synx -

10 réponses