Bonjour,
Je suis compositeur de musique et débutant (novice) en PHP.
Voilà, je souhaite réaliser un menu de navigation en listes déroulantes à partir de ces 2 bases de données SQL:
orchestre : id_orchestre, orchestre
compositions : id_titre, titre,id_orchestre,lien_titre (URL de la fiche de ma composition)
Quand on choisi un orchestre dans la 1ère liste, la seconde affiche les titres
Pour cela, j'ai utilisé cet exemple (faq-tutoriels/formulaires-listes-deroul ... t4562.html) dans sa version AJAX qui fonctionne bien.
Mon souhait, c'est de pouvoir en cliquant sur un titre de la seconde liste, charger la page PHP correspondant au titre sélectionné.
J'ai essayé différente solution mais je sèche complètement.
Quelqu'un peut-il m'offrir son aide SVP ?
la communauté d'entraide francophone dédiée au PHP
2 Menus déroulants liés avec chargement de page (URL)
Petit nouveau ! |
3 Messages
Voici le code PHP dans ma page compositions.PHP (ou se trouve les 2 listes) :
[javascript]
/**
* Lister les titres d'un orchestre 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 <img src="images/smilies/icon_wink.gif" alt=";)" title="Wink" /> */
requete = null;
}
}
}
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 actualiserTitres()
{
var listeTitre = requete.responseText;
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = listeTitre;
}
/**
* 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 getTitres(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('blocTitres').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'titres.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 */
actualiserTitres();
}
}
};
requete.send(null);
}
}
[/javascript]
Et le code PHP du fichier titres.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 = "compositeur";
?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Liste déroulantes dynamiques liées</title>
<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée via un objet XHR lors d'une sélection sur la première." />
<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />
<meta name="author" content="Cyrano" />
<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="./titres_xhr.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données de la première liste */
$sql = "SELECT `id_orchestre` AS idr, `orchestre` ".
"FROM `orchestre` ".
"ORDER BY `id_orchestre`;";
/* 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 */
$orchestre = array();
/* Index du titre par tableau orchestral */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$orchestre[$ligne['idr']] = $ligne['orchestre'];
}
?>
<h3></h3>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgtitre">
<legend></legend>
<select name="orchestre" id="orchestre" onChange="getTitres(this.value);">
<option value="vide">- - - Choisissez un orchestre - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($orchestre 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="blocTitres"></span><br />
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form><BR>
<?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
}
?>[javascript]
/**
* Lister les titres d'un orchestre 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 <img src="images/smilies/icon_wink.gif" alt=";)" title="Wink" /> */
requete = null;
}
}
}
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 actualiserTitres()
{
var listeTitre = requete.responseText;
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = listeTitre;
}
/**
* 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 getTitres(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('blocTitres').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'titres.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 */
actualiserTitres();
}
}
};
requete.send(null);
}
}
[/javascript]
Et le code PHP du fichier titres.PHP :
<?php
/**
* Code qui sera aeeplé par un objet XHR et qui
* retournera la liste déroulante des titres
* correspondant à l'orchestre sélectionnée.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "compositeur";
/* On récupère l'identifiant de l'orchestre choisie. */
$idr = isset($_GET['idr']) ? $_GET['idr'] : false;
/* Si on a un orchestre, on procède à la requête */
if(false !== $idr)
{
/* Cération de la requête pour avoir les titres de cet orchestre */
$sql2 = "SELECT `id_titre`, `titre`, 'lien_titre'".
" FROM `compositions`".
" WHERE `id_orchestre` = ". $idr ."".
" ORDER BY `titre`;";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$rech_titre = mysql_query($sql2, $connexion);
/* Un petit compteur pour les titres */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des titres */
$code_titre = array();
$nom_titre = array();
/* On va mettre les numéros et noms des titres dans les deux tableaux */
while(false != ($ligne_titre = mysql_fetch_assoc($rech_titre)))
{
$code_titre[] = $ligne_titre['id_titre'];
$nom_titre[] = $ligne_titre['titre'];
$lien_titre[] = $ligne_titre['lien_titre'];
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
$liste = "";
$liste .= '<select name="titre" id="titre">'."\n";
for($d = 0; $d < $nd; $d++)
{
$liste .= ' <option value="'. $code_titre[$d] .'">'. $nom_titre[$d] .'</option>'."\n";
}
$liste .= '</select>'."\n";
/* Un petit coup de balai */
mysql_free_result($rech_titre);
/* 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");
}
?>
Dans ton second <select> (celui des titres) ajoute l'attribut onchange, ceci te permettra de détecter la sélection d'une nouvelle valeur dans ce menu, et d'agir avec javascript.
Dès lors, tu va pouvoir réaliser une redirection javascript
En supposant que la valeur de tes options soit l'url de la page à atteindre :
[javascript]<select ... onchange="document.location = this.options[this.selectedIndex].value;">[/javascript]
En gros, on change l'url de la page (document.location) et on utilise la valeur de l'option sélectionnée (this.options[this.selectedIndex].value) comme nouvelle url.
Après, si la valeur de l'option est une partie de l'url (genre un id), tu peux utiliser cette valeur dans une concaténation javascript :
[javascript]<select ... onchange="document.location = 'la_page_des_titres.php?id=' + this.options[this.selectedIndex].value;">[/javascript]
Dès lors, tu va pouvoir réaliser une redirection javascript
En supposant que la valeur de tes options soit l'url de la page à atteindre :
[javascript]<select ... onchange="document.location = this.options[this.selectedIndex].value;">[/javascript]
En gros, on change l'url de la page (document.location) et on utilise la valeur de l'option sélectionnée (this.options[this.selectedIndex].value) comme nouvelle url.
Après, si la valeur de l'option est une partie de l'url (genre un id), tu peux utiliser cette valeur dans une concaténation javascript :
[javascript]<select ... onchange="document.location = 'la_page_des_titres.php?id=' + this.options[this.selectedIndex].value;">[/javascript]
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...