Bonjour à tous,
J'ai suivi à la lettre le tutoriel de Cyrano [[url]http://forum.phpfrance.com/faq-tutoriels/formulaires-listes-deroulantes-dynamiques-liees-t4562.html[/url]] pour lier plusieurs select. J'ai choisis la méthose ajax.
Arrivé au moment où le second select devrait apparaitre, apres le message "Traitement en cours, veuillez patienter...", et bien il n'apparait pas et ce message reste affiché.
j'ai donc deux tables : region et departement
Cependant, Cyrano lie ces deux tables par "id_region" alors que moi je les lie par "region". J'ai donc adapter le code à ma situation. Est-ce pour cela ? je pense pas mais on ne sait jamais.
Voici ma page index.php
[php]<!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">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/dept_xhr.js" charset="iso_8859-1"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
session_start();
if (!isset($_SESSION['login'])) {
header ('Location: index.php');
exit();
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "base";
$conn = mysql_connect ('localhost', 'root', '');
mysql_select_db ('base', $conn);
$chaine=ucfirst($_SESSION['login']);
$sql = 'SELECT privilege FROM admin_user WHERE login="'.$chaine.'"';
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$data = mysql_fetch_row($req);
$statut = $data['0'];
$down = $_GET['down'];
if ($down == '1') {
if (isset($_POST['modif']) && $_POST['modif'] == 'Ajouter') {
// on teste si une entrée de la base contient ce couple login / pass
$base = mysql_connect ('localhost', 'root', '');
mysql_select_db ('base', $base);
$t = 'INSERT INTO reda_article VALUES("", "'.mysql_escape_string($_POST['titre']).'", "'.mysql_escape_string($_POST['texte']).'", "'.mysql_escape_string($_POST['categorie']).'", "'.$chaine.'", "'.date("y.m.d G:i:s").'", "'.date("d.m.y G:i:s").'", "")';
mysql_query($t) or die('Erreur SQL !'.$t.'<br />'.mysql_error());
echo $t;
header('Location: newarticle.php?down=2');
}
}
?>
<title>Site - Administration</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="Stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
<!-- JavaScript -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>
<script type="text/javascript" src="js/excanvas.pack.js"></script>
<script type="text/javascript" src="js/jquery.flot.pack.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.pack.js"></script>
<script type="text/javascript" src="markitup/sets/default/set.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="./arrayPHP2JS.js" charset="iso_8859-1"></script>
<script type="text/javascript" src="./changeDept.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données de la première liste */
$sql = "SELECT `region` AS idr ".
"FROM `region` ".
"ORDER BY `region`;";
/* Connexion et exécution de la requête */
$connexion = mysql_connect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$recherche = mysql_query($sql, $connexion);
/* Création du tableau PHP des valeurs récupérées */
$regions = array();
/* Index du département par tableau régional */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$regions[$ligne['idr']] = $ligne['idr'];
}
?>
</head>
<body>
<div class="container" id="container">
<div id="header">
<?php include('incl_userinfo.php'); ?>
<div id="logo"><h1><a href="/"></a></h1></div>
</div><!-- end header -->
<div id="content" >
<?php
include('incl_menu.php'); ?>
<div id="content_main" class="clearfix">
<div id="main_panel_container" class="left">
<div id="dashboard">
<!-- DEBUT : EDITION -->
<h2 class="ico_mug">Nouvel article</h2>
<?php if ($down == '0') { ?>
<div class="clearfix">
<div class="left quickview">
<ul>
<li>
<form action="newarticle.php?down=1" method="post">
Titre : <input type="text" name="titre" size="50" value=""><br /><br />
Sélectionnez une catégorie (et sous catégorie) :
<select name="region" id="region" onchange="getDepartements(this.value);">
<option value="vide">Choisissez une catégorie</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($regions as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocDepartements"></span><br />
</form>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
<br /><br />
Texte : <textarea cols="100" id="texte" name="texte" rows="15"></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'texte' );
//]]>
</script>
<input type="submit" name="modif" value="Ajouter">
</form>
</li>
</ul>
</div>
</div><!-- FIN : EDITION -->
<?php } elseif ($down == '2' ){ ?>
<div class="clearfix">
<div class="left quickview">
<ul>
<li>
<?php
$erreur = '<div id="success" class="info_div"><span class="ico_success">Article ajouté ! </span></div>';
echo $erreur;
}
?>
</li>
</ul>
</div>
</div><!-- end #dashboard -->
</div>
</div><!-- end #content -->
<div id="footer" class="clearfix">
</div><!-- end #footer -->
</div><!-- end container -->
<?php
mysql_close();
?>
</body>
</html>
[/php]
Voici mon script js
[code]/**
* Lister les départements d'une région avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour <!-- s;) --><img src="{SMILIES_PATH}/icon_wink.gif" alt=";)" title="Wink" /><!-- s;) --> */
requete = null;
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserDepartements()
{
var listeDept = requete.responseText;
var blocListe = document.getElementById('blocDepartements');
blocListe.innerHTML = listeDept;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getDepartements(idr)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idr == 'vide')
{
document.getElementById('blocDepartements').innerHTML = '';
}
else
{
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'departements.php?idr='+ idr;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserDepartements();
}
}
};
requete.send(null);
}
}[/code]
et voici ma page departement.php
[php]<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "base";
$idr = $_GET ['idr'];
/* Requête SQL de récupération des données */
if (NULL !== $idr)
{
$sql2 = "SELECT departement ".
"FROM departement ".
"WHERE region ='". $idr ."'".
"ORDER BY departement;";
/* Connexion et exécution de la requête */
$connexion = mysql_pconnect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$rech_dept = mysql_query($sql2, $connexion);
/* Un petit compteur pour les départements */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des départements */
$nom_dept = array();
/* On va mettre les numéros et noms des départements dans les deux tableaux */
while(false != ($ligne_dept = mysql_fetch_assoc($rech_dept)))
{
$nom_dept[] = $ligne_dept['departement'];
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
$liste = "";
$liste .= '<select name="departement" id="departement">'."\n";
for($d = 0; $d < $nd; $d++)
{
$liste .= ' <option value="'. $nom_dept[$d] .'">'. htmlentities($nom_dept[$d]) .'</option>'."\n";
}
$liste .= '</select>'."\n";
/* Un petit coup de balai */
mysql_free_result($rech_dept);
/* Affichage de la liste déroulante */
echo($liste);
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. La région sélectionnée comporte une donnée invalide.</p>\n");
}
?>
[/php]
Je pense que le problème vient du script js, mais comme je ne m'y connais pas beaucoup en ajax, je n'ai pas localiser l'erreur.
Merci pour votre aide.
