• italian
  • german
  • swedish
S'inscrire à la newsletter:
Rechercher dans le site:
*
Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
04 Décembre 2008 à 03:26:46

Connexion avec identifiant, mot de passe et durée de la session



 
« sujet précédent | | sujet suivant »
Pages: [1] 2 Imprimer
Auteur Fil de discussion: Listes déroulantes dynamiques en AJAX  (Lu 2210 fois)
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« le: 27 Mars 2007 à 13:21:32 »

Pour commencer, l'idée de réaliser ce tutoriel m'est venue grâce à vos interventions et demandes sur le forum. Je remercie donc toutes les personnes qui participent et contribuent à la vie de notre forum d'aide informatique. L'idée de ce tutoriel m'est venue en lisant par exemple les sujets Récupérer une donnée d'une balise SELECT en PHP ou encore Besoin d'aide devis, et on pourrait très bien envisager d'utiliser ce que je vais vous expliquer avec le formulaire HTML d'un de mes précédents tutoriels.

On nous a plusieurs fois demandé comment alimenter une liste déroulante "B" en tenant compte de la valeur de la liste déroulante "A" qu'un utilisateur a choisi, tout en sachant que les valeurs de la liste "B" seraient extraites d'une base de données. Si les valeurs n'étaient pas prises dans une base de données, vous pourriez faire une simple fonction javascript qui les changent dynamiquement sans recharger la page. Mais imaginez que ma liste "A" contienne 15 catégories, et que ma liste "B" doit afficher une vingtaine de sous-catégories en fonction du choix de catégorie... Là ça commence à faire beaucoup et la gestion de ces données dans une base de données s'impose.

Dans ce tutoriel je vais continuer sur l'exemple que je viens de citer, qui est assez simple à comprendre pour vous et c'est bien là l'intérêt. Pour réaliser cela, nous allons utiliser la bibliothèque XAJAX qui va vous permettre d'implémenter l'AJAX (non ce n'est pas une lessive je vous vois venir Wink sans trop vous prendre la tête.


Lire la suite de Listes déroulantes dynamiques en AJAX
« Dernière édition: 30 Janvier 2008 à 00:21:48 par damien » Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
Cobalt
Nouveau membre
*

Points gagnés: 0
Messages: 7


Voir le profil
« Répondre #1 le: 26 Avril 2007 à 08:32:13 »

Bonjour

Et pour obtenir la bibliothèque XAJAX.ZIP ?

Ou puis-je là trouver, car un clique dans le tutatoriel ne conduit nul part !

Merci de votre aide.

Cobalt
Journalisée
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« Répondre #2 le: 26 Avril 2007 à 08:47:05 »

Bonjour,

Je vous ai répondu ici pour xajax. Inutile de demander de partout, on l'a vu  Surprised
Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #3 le: 24 Mai 2007 à 19:48:45 »

Bonjour,

Tout dabord bravo pour ton script, il est très bien. Je l'ai utilisé en changeant quelque petit truc.

Par contre, il semble avoir un bug sous internet explorer. La liste de la premiere catégorie s'affiche normalement, mais la sous catégorie n'apparait jamais. Avec firefox et opera, le script fonctionne a merveille. Avait tu remarquer le problème ?  Peu-etre que le problème vient des changements que j'ai apporté ? Si tu as remarquer le problème, as-tu essayer de trouver le bug ?

Merci
Benoit
Journalisée
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« Répondre #4 le: 24 Mai 2007 à 20:48:42 »

Bonjour,

Le mien fonctionnait avec Internet Explorer, attention à ce que le javascript et les activex ne soit pas désactivés sur le tien car ça peut être la cause du problème.
Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #5 le: 24 Mai 2007 à 21:10:06 »

Bon et bien s'il n'y avait aucun bug de ton coter alors c'est surement ma configuration qui ne marche pas. C'est p-e le fait que je travail sur le localhost. J'en ai aucune idée. Lorsque je met le $xajax->debugOn(); , explorer me repond la meme chose que firefox. Alors cela veux dire qu'il comprend mais me les affiches pas. Alors je vais faire comme si je n'avais pas tester sur explorer et continuer mon travail.

Si quelqu'un connait la cause de se problème, merci de me le laisser savoir !!
encore merci
Benoit
Journalisée
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #6 le: 25 Mai 2007 à 19:16:32 »

Encore moi,

Je n'ai toujours pas réussi a me debugger. Est-ce que sa serais que Explorer le tient pas en compte le innerHTML ? Parce que lorsque je lance le dubug, il me lance le message suivant:
 
Received: <?xml version="1.0" encoding="utf-8" ?><xjx><cmd n="as" t="liste_souscat" p="innerHTML"><![CDATA[<option value="warrior 200">warrior 200</option><option value="warrior">warrior</option>]]></cmd></xjx>

Alors il prend bien mon code mais il ne veut pas l'afficher dans sa balise <select></select>. Par contre firefox, opera et autre me l'affiche correctement.

Quelqu'un aurais une idée du trouble ?
Merci de m'aider,  je dois absolument intégrer ce formulaire dans ma page
Ben
Journalisée
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #7 le: 25 Mai 2007 à 20:01:01 »

J'ai découvert le bug mais je ne suis pas capable de le résoudre. Explorer a de la misere avec le innerHTML. En fait il prend la ligne de code suivante:

<SELECT id=liste_souscat>warrior 200</OPTION><OPTION value="warrior">warrior</OPTION></SELECT>

Le premiere partie de la balise option est tronquer. Pourtant mon code est correct. Quelqu'un a déja eu ce buge t as reussi a le contourner ?
Journalisée
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« Répondre #8 le: 25 Mai 2007 à 21:15:03 »

Ca ne me dit rien de particulier comme bug. Le problème est peut-être ailleurs, envoie moi ta page entière ce sera plus simple pour t'aider. Envoie la par email si c'est un code trop long a copier ici.
Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« Répondre #9 le: 25 Mai 2007 à 23:45:49 »

J'ai bien reçu ton code, merci c'est quand même plus parlant pour moi.
Effectivement il est bon et je confirme que Internet Explorer semble avoir du mal à changer le innerHTML d'un élement "select", contrairement aux "div" qui fonctionnent très bien.
Je te propose donc de tricher avec "div" ce qui permettra de faire fonctionner ton code sans problème sur tous les navigateurs.

Remplace :
Code:
<select id="liste_souscat" onchange="xajax_SelectSiege(this.value)">
</select>
Par :
Code:
<div id="liste_souscat"><select onchange="xajax_SelectSiege(this.value)">
</select></div>

Et la fonction SelectSouscat() deviendra celle-ci...
Code:
function SelectSouscat($catid)
{
   $options="";
   // créé un nouvel objet permettant d'envoyer une réponse au côté client
   $objResponse = new xajaxResponse();
   // on selectionne les sous-catégorie en fonction de l'id de la catégorie mère
   $sql="SELECT annee, modele FROM yamaha WHERE annee = '".$catid."'";
   $req=mysql_query($sql);
    $options='<select onchange="xajax_SelectSiege(this.value)"><option value="">Choose your model</option>';
   while ($souscat = mysql_fetch_array($req))
   {
      // on place toutes les sous-catégories dans des options valables pour la liste SELECT
      $options .= '<option value="'.$souscat['modele'].'">' . $souscat['modele'] . '</option>';
     
   }
   $options .='</select>';
   // l'Ajax remplacera le innerHTML (html intérieur) de la liste_souscat pour y mettre $options
   $objResponse->addAssign("liste_souscat","innerHTML",$options);
   // envoie la réponse en XML
   return $objResponse->getXML();

}

Voilà, j'ai testé ça marche mieux Wink
Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #10 le: 26 Mai 2007 à 00:42:27 »

Wow !! merci beaucoup, sa l'air a fonctionner #1 !!!
Journalisée
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #11 le: 29 Mai 2007 à 19:45:55 »

Bonjour,

J'aimerais savoir si il est possible de reprendre la variable $catid qui est dans ma fonction SelectSouscat($catid) pour la placer dans ma fonction SelectSiege($souscate) .

La valeur de ma variable $catid représente un année. J'ai vraiment besoin de cette année lorsque je fais mon SELECTdans ma fonction SelectSiege

Merci beaucoup
Journalisée
damien
Rédacteur Admin
Intarrisable
*****

Points gagnés: 5
Messages: 2387


Voir le profil WWW
« Répondre #12 le: 29 Mai 2007 à 21:25:19 »

Bonsoir,

Oui c'est bien sûr possible, vous pouvez ajouter le paramètres a votre fonction SelectSiege() pour faire :
Code:
function SelectSiege($souscate, $catid)

Et dans l'appel de la fonction :

Code:
<div id="liste_souscat"><select onchange="xajax_SelectSiege(this.value,document.getElementById('liste_cat').value">
</select></div>
Journalisée

Cordialement,
Damien

Agence web - Annuaire Blog
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #13 le: 29 Mai 2007 à 21:44:57 »

Merci,

J'ai bel et bien changer les choses que tu m'as dit et il dise qu'il me manque l'argument 2
Journalisée
Ben79
Nouveau membre
*

Points gagnés: 0
Messages: 10


Voir le profil
« Répondre #14 le: 30 Mai 2007 à 21:23:28 »

Je m'ai toujours pas réussi a régler mon problème. Si quelqu'un peut m'aider sa serais vrm trop gentil !!
merci
Journalisée
Pages: [1] 2 Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  

Powered by SMF 1.1.4 | SMF © 2006, Simple Machines LLC