2 liste lier ajax+php/mysql

hsouna01 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -  
hsouna01 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
j'ai un projet de fin d'etude un site web en cour de realisation ,dans la partie administration de ce site dans l'un de ces page je veut afficher 2 select dynamique liee dans l'un qui contient la liste des filiere sporitve(volley ball,judo,foot ball) affichee de la table filiere et l'autre la liste des categorie(minim,cadee,junior,senior) selon le choix de la filiere de la table categorie pour afficher enfin les joueur ou l'entrenneur de cette categorie.
je developpe avec php et sql. 

Structure de la table `filiere`
-- 

CREATE TABLE `filiere` (
  `idfil` int(3) NOT NULL auto_increment,
  `typefil` varchar(30) NOT NULL,
  PRIMARY KEY  (`idfil`),
  UNIQUE KEY `typefil` (`typefil`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=116 ;




-- Structure de la table `categorie`
-- 

CREATE TABLE `categorie` (
  `idcat` int(3) NOT NULL auto_increment,
  `nomcat` varchar(30) NOT NULL,
  `typefil` varchar(30) NOT NULL,
  PRIMARY KEY  (`idcat`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;


fichier test.php 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
<script type="text/javascript" src="oXHR.js"></script> 
<script type="text/javascript">
<!-- 

function request(oSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr   = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
	
	xhr.open("POST", "XMLHttpRequest_getListData.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("typefil=" + value);
}

function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("softwaresSelect");
	var oOption, oInner;
	
	oSelect.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oOption = document.createElement("option");
		oInner  = document.createTextNode(nodes[i].getAttribute("typefil"));
		oOption.value = nodes[i].getAttribute("typefil");
		
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
	}
}
//-->
</script>
</head>

<body>
<fieldset>
	<legend>Programmes</legend>
	<div id="programBox">
		<p id="editors">
			<select id="editorsSelect" onchange="request(this);">
				<option value="none">Selection</option>
				<?php					
					mysql_connect("localhost","root",""); 
					mysql_select_db("asptt");
					
					$query = mysql_query("SELECT * FROM filiere ORDER BY typefil");
					while ($back = mysql_fetch_assoc($query)) {
						echo "\t\t\t\t<option value=\"" . $back["typefil"] . "\">" . $back["typefil"] . "</option>\n";
					}
				?>	
                		
			</select>
			<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
		</p>
		<p id="softwares">
			<select id="softwaresSelect"></select>
		</p>
	</div>
</fieldset>

</body>
</html>



fichier XMLHttpRequest_getListData.php : 
<?php

header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";

$typefil = (isset($_POST["typefil"])) ? htmlentities($_POST["typefil"]) : NULL;

if ($typefil) {
	mysql_connect("localhost","root",""); 
					mysql_select_db("asptt");
	
	$query = mysql_query("SELECT * FROM categorie WHERE typefil=" . $typefil . " ORDER BY nomcat");
	while ($back = mysql_fetch_assoc($query)) {
		echo "<item idcat=\"" . $back["idcat"] . "\" nomcat=\"" . $back["nomcat"] . "\" />";
	}
}

echo "</list>";

?>


fichier oXHR.js : 

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}



j'espere que j'ai bien expliquer mon probleme ,svp de l'aide et merci d'avance.
cordialement.
A voir également:

1 réponse

Réponse 1 / 1
hsouna01 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   1
 
domage il n' ya pas quelqu'un qui peut m'aider !!!
1

Discussions similaires

probléme avec ajax svp
marwen109 -
Groarh -

4 réponses