liste ajax liées

28 sept. 2010, 20:18

bonsoir
j'ai utilisé le code de cyrano pour realiser deux listes déroulantes liées,j'ai choisi l'alternative d'ajax donc j'ai adapté le code à mes paramètres(nom de la base,chemin du fichier javascript) mais alors quand je lance l'execution j'obtiens le message: an error has occured in the script on this page
line:1
char:1
error:invalid character
code:0
url: file:///F:/Users/imm/Downloads/index3/dept_xhr.js
do you want continue running scripts on this page?yes no
je mets yes et quand je selectionne une region j'obtiens rien sauf un message similaire:an error has occured in the script on this page
line:22
char:1
error:object expected
code:0
url:http://localhost:5111/F:/Users/imm/Down ... UG_PROFILE
do you want continue running scripts on this page? yes no
pouvez vous m'aider svp?

28 sept. 2010, 21:51

Bonsoir,

L'erreur affichée fait penser à internet explorer? (mais je me trompe peut-être)
Pour le développement js/ajax je te conseille firefox couplé à l'extension firebug.

Les erreurs devrais être plus explicite...

Par ailleurs, il serait bon que tu nous montres le code que tu as en définitif, une erreur de frappe est vite faite

28 sept. 2010, 22:04

Et accessoirement, si tu nous montres ce que tu as écrit comme adaptation du code, on relèvera peut-être une erreur. Le code du tuto devrait fonctionner normalement aussi bien avec IE que Firefox ou autre.

29 sept. 2010, 00:40

voici le code du fichier index3.php
merci cyrano voila le code

<?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    = "region";
?>
<!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="F:/Users/imm/Downloads/index3/dept_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_region AS idr, region FROM region ORDER BY id_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['region'];
    }
?>
</head>
<body style="font-family: verdana, helvetica, sans-serif; font-size: 85%">
<h3>Version Utilisant AJAX</h3>
<p>Vous constaterez que le délai de latence entre la sélection et la mise à jour est quasiment intermédiaire entre les versions 100% PHP et JavaScript.</p>
<h3>Trouver un département</h3>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgdept">
  <fieldset style="border: 3px double #333399">
  <legend>Sélectionnez une région</legend>
    <select name="region" id="region" onchange="getDepartements(this.value);">
      <option value="vide">- - - Choisissez une région - - -</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 />
  <input type="submit" name="ok" id="ok" value="Envoyer" />
  </fieldset>
</form>

<?php
}
else
{
    /*  Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
</head>
<body>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
</body>
</html>

et le code du fichier departements.php

<?php
/**
 * Code qui sera aeeplé par un objet XHR et qui
 * retournera la liste déroulante des départements
 * correspondant à la région sélectionnée.
 */
/* Paramètres de connexion */
$serveur = "localhost";
$admin   = "root";
$mdp     = "";
$base    = "region";

/* On récupère l'identifiant de la région choisie. */
$idr = isset($_GET['idr']) ? $_GET['idr'] : false;
/* Si on a une région, on procède à la requête */
if(false !== $idr)
{
    /* Cération de la requête pour avoir les départements de cette région */
    $sql2 = "SELECT id_departement, departement FROM departement WHERE id_region = ". $idr ." ORDER BY id_departement ";
    $connexion = mysql_connect($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 */
    $code_dept = array();
    $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)))
    {
        $code_dept[] = $ligne_dept['id_departement'];
        $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="'. $code_dept[$d] .'">'. htmlentities($nom_dept[$d]) .' ('. $code_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");
}
?>

enfin le fichier dept_xhr.js

Code : Tout sélectionner

/*
 * 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 ;) */
                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 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
    {
        /* À cet endroit précis, on peut faire apparaître un message d'attente */
        var blocListe = document.getElementById('blocDepartements');
        blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
        /* 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);
    }
}

encore une fois merci

29 sept. 2010, 00:46

Bonsoir,

L'erreur affichée fait penser à internet explorer? (mais je me trompe peut-être)
Pour le développement js/ajax je te conseille firefox couplé à l'extension firebug.

Les erreurs devrais être plus explicite...

Par ailleurs, il serait bon que tu nous montres le code que tu as en définitif, une erreur de frappe est vite faite

merci jojolapine effectivement c'est ce que j'ai pensé mais je recois la meme erreur avec firefox ainsi que google chrome,à signaler que cette erreur apparait en executant mon code sur phpedit,sinon quand je lance directement mon navigateur(ie,firefox,ou google chrome) la liste des regions apparait vide ce qui est pire!!
merci jojlapine

29 sept. 2010, 07:45

Je viens de tester ton code et je n'ai rien trouvé.

J'ai juste du créer la base et ajuster les liens et autres paramètres, mais ça fonctionne aussi bien sous Firefox que sous IE. Si tu as une erreur, il va falloir vérifier du coté de ta configuration. Avec Firefox, utilise FireBug et/ou la barre WebDeveloper, et sous IE, il existe aussi un outil de débogage disponible gratuitement aussi. Vérifie bien tes paramètres de connexion et note tous les détails si une erreur survient, autrement, je ne vois pas trop comment on pourra t'aider à trouver la solution.

29 sept. 2010, 11:10

la connexion au serveur de base de données ne passe pas,je ne sais pas pourquoi?

29 sept. 2010, 11:12

Si tu essayes d'accéder directement à ton fichier departements.php?idr=xx depuis le navigateur...
As-tu des résultats? des erreurs?

29 sept. 2010, 12:13

voila le message que j'obtiens sous firefox quand je lance le fichier departements.php

'."\n"; for($d = 0; $d < $nd; $d++) { $liste .= ' '. htmlentities($nom_dept[$d]) .' ('. $code_dept[$d] .')'."\n"; } $liste .= ''."\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("

Une erreur s'est produite. La région sélectionnée comporte une donnée invalide.
\n"); } ?>

29 sept. 2010, 12:43

Aie, ça ressemble à du php non-interprété :/
Pour vérifier retourne sur l'url directe de departement.php avec un argument qui va bien
Et montre nous la source générée (ctrl+u sous firefox)

29 sept. 2010, 13:03

Si tu utilises Firebug, ouvre-le (F12) pour récupérer l'url appelée (Réseau > XHR) et ouvre l'url directement dans ton navigateur : normalement, ça devrait afficher à l'écran ce que c'est sensé envoyer à la méthode JS qui effectue l'appel normal. À partir de là, tu déboguera beaucoup plus facilement le script php.

29 sept. 2010, 13:49

quand je vais sur reseau->xhr rien n 'est affiché juste un tableau vide qui ressemble à ça:
url statut domaine poids chronologie
- 0KB 0ms

29 sept. 2010, 13:54

Et la source (ctrl+u sous firefox) de http://localhost/ton/chemin/vers/depart ... hp?idr=xxx (en remplaçant xxx par un id valide)
Qu'est-ce que ça donne?

29 sept. 2010, 14:01

quand je vais sur reseau->xhr rien n 'est affiché juste un tableau vide qui ressemble à ça:
url statut domaine poids chronologie
- 0KB 0ms

Pour avoir quelque chose, commence par ouvrir Firebug, ensuite utilise la première liste : si le onchange active l'appel ajax, tu vas le voir apparaître dans la fenêtre de Firebug.

29 sept. 2010, 14:06

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" lang="fr" xml:lang="fr">
<head>
<title>Accès interdit!</title>
<link rev="made" href="mailto:admin@localhost" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/ 
    body { color: #000000; background-color: #FFFFFF; }
    a:link { color: #0000CC; }
    p, address {margin-left: 3em;}
    span {font-size: smaller;}
/*]]>*/--></style>
</head>

<body>
<h1>Accès interdit!</h1>
<p>


  

    Vous n'avez pas le droit d'acc&eacute;der au r&eacute;pertoire
    demand&eacute;. Soit il n'y a pas de document index soit le r&eacute;pertoire
    est prot&eacute;g&eacute;.

  

</p>
<p>
Si vous pensez qu'il s'agit d'une erreur du serveur, veuillez contacter le 
<a href="mailto:admin@localhost">gestionnaire du site</a>.

</p>

<h2>Error 403</h2>

<address>
  <a href="/">localhost</a><br />
  
  <span>09/29/10 12:04:58<br />
  Apache/2.2.16 (Win32) PHP/5.3.3</span>
</address>
</body>
</html>

liste ajax liées

Qui est en ligne