Bonjour à tous,

Je tente de créer un petit formulaire qui contiendrait notamment 3 listes déroulantes, le contenu de la deuxième découlant de la sélection dans la première, idem entre la troisième et la deuxième.

Je m'inspire fortement de ce tutoriel : http://siddh.developpez.com/articles/ajax/

J'ai une question concernant du code de la partie IV, fichier auteurs.php :

sel = document.getElementById('auteur');
idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);

Je ne comprends pas la deuxième ; à quoi exactement fait référence sel.selectedIndex ?
Je n'ai pas d'index dans ma base, et je n'ai vu nulle part dans ce tuto qu'il fallait en créer un...
Quant à la troisième ligne, j'avoue que là aussi, je suis un peu perdue
Si quelqu'un pouvait m'expliquer brièvement leur utilité et fonctionnement, merci


Autre chose :
Ajax semble fonctionner sous Firefox et Chrome, mais ni sur IE, ni sur Opera, ni sur Safari ; je n'ai trouvé nulle part de quoi corriger ce problème...

Merci par avance

le sel.selectedIndex fait référence à l'option sélectionnée dans ton select.
C'est comme un array ; dans ton select, tu as plusieurs options.
Ici, sel correspond au select. sel.options correspond aux options de ton select.
Comme ton select a plusieurs options, il faut cibler celle qui t'intéresse
Pour exemple, ici, sel.options[0] correspondrait à ta première option, sel.options[1] à la deuxième, etc.

La 3e ligne détermine les variables que tu envoies en Ajax. La page PHP appelée recevra $_GET['idAuteur'] (ou $_POST) avec comme valeur la value de l'option choisie dans le select

Concernant le problème sur certains navigateur, il faut voir comment tu déclare l'objet xhr

J'espère que tu y vois un peu plus clair, je suis pas sûr de bien te simplifier les principes

Merci, c'est déjà un peu plus clair

Concernant sel.options : je pensais avoir compris que sel.selectedIndex correspond à la value de l'option cliquée dans ma liste qui a l'id auteur, mais il y a .value à la fin donc ce n'est pas tout à fait ça ?
Le mot "index" m'intrigue, à vrai dire !
Mais mis à part ce détail, j'ai compris ce que contient à présent idauteur. Merci


Voici ma déclaration de xhr :

function getXhr(){
            var xhr = null; 
            if(window.XMLHttpRequest) // Firefox et autres
            xhr = new XMLHttpRequest(); 
            else if(window.ActiveXObject){ // Internet Explorer : 2 méthodes possibles
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
            else { // XMLHttpRequest non supporté par le navigateur 
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
                xhr = false; 
            } 
            return xhr;
        }

Et voici la fonction qui utilise getXrh() lorsqu'on clique sur un élément de la première liste :

function go1(){
            var xhr = getXhr();
            if(xhr!=null) {
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    //readystate 4 = terminé // status 200 = OK (sinon 404)
                    if(xhr.readyState == 4 && xhr.status == 200){
                        var leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('livre').innerHTML = leselect;
                    }
                }

J'espère ne pas me tromper lorsque j'ajoute var devant leselect ?

en fait selectedIndex correspond à l'index de l'élément tout entier qui a été sélectionné (le <option>).
L'index étant la valeur numérique de l'élément:

quand tu as un select avec plusieurs option a l'intérieur, chaque option a un index:
<select>
<option value="choix1">Choix 1</option> <- index = 0
<option value="choix2">Choix 2</option> <- index = 1
<option value="choix3">Choix 3</option> <- index = 2
<option value="choix4">Choix 4</option> <- index = 3
</select>

Il sont attribués automatiquement, ils permettent d'accéder directement aux éléments de ta liste, par exemple, si tu veux récupérer la value du troisième élément de ta liste, tu va faire sel.options[2].value;

sel.options[2] tout court te renvoie l'élément en entier, si tu veux juste accéder au value, il faut que tu rajoute le .value a la fin, pour spécifier que l'élément ne t'interesse pas mais que tu veux uniquement le value de cet élément.

Et pour finir, non tu ne te trompe pas en mettant var devant leselect la première fois que tu l'utilise, cela sert a le déclarer proprement comme étant une variable.

Merci beaucoup, à vous deux !


Reste une question qui est toujours sans réponse : pourquoi tout ceci ne fonctionne pas avec certains navigateurs malgré ma déclaration de xhr a priori correcte ?

Le problème du xhr est qu'il fonctionne différemment en fonction des navigateurs...
S'il est mal déclaré, il va foirer dans certains navigateurs et pas dans d'autres, il faut que tu regardes du coté de la déclaration de ta fonction getxhr() pour voir ce qu'il y a dedans.

tu as quelques infos dans cette discussion:
http://forum.webrankinfo.com/probleme- [...] r-t85184.html

Pose des alertes pour voir l'endroit où plante ton code (console.log se serait mieux, mais je crois pas que ça fonctionne partout...), et regarde la console aussi, il devrait y avoir des indications qui peuvent aider...

EDIT : Il est où le xhr.open ?

Je vais faire ça...

Il est bien là, dans ma fonction go(), peu avant les premières lignes de code que j'ai postées

xhr.open("POST","testajax.php",true);

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var sel = document.getElementById('auteur');
var idauteur = sel.options[sel.selectedIndex].value;
xhr.send("idAuteur="+idauteur);

Tiens en voyant ça là, ça me rappelle qu'une fois, c'était le RequestHeader qui faisait planter sur quelques nav' ; me souviens plus du pourquoi par contre.. Dans tes tests, essaie en le virant, on sait jamais

Ca marche plus du tout
Je vais chercher des infos sur cette fonction sur le web, je préviens si je trouve quelque chose. Merci en tout cas !

EDIT :
J'ai tenté d'ajouter, sans grande conviction, "Cache-control", "no-cache" à la liste des paramètres du RequestHeader.
Je me retrouve (même après avoir enlevé ce que j'avais ajouté) avec une erreur signalée par le débogueur de IE à la ligne suivante :

document.getElementById('livre').innerHTML = leselect;

Erreur d'exécution inconnue.


EDIT BIS :
Je suis tombée sur ceci : http://support.microsoft.com/kb/276228/fr
Reste plus qu'à comprendre comment intégrer ça à mon code pour que ça fonctionne, et que ça ne soit pas bancal... et espérons que ça fonctionne !

Si cela intéresse quelqu'un, voilà comment j'ai résolu mon problème :

* Encadrer le SELECT livre, affiché en fonction de la sélection dans le premier SELECT, par un DIV, avec un ID (ici 'div_livre').

* Remplacer

document.getElementById('livre').innerHTML = leselect;

Par

document.getElementById('div_livre').innerHTML = leselect;

* Ajouter juste derrière :

if (window.ActiveXObject)
                            xhr = new ActiveXObject('Microsoft.XMLHTTP');

Cela réinitialise l'objet xhr, indispensable sous IE


Voilà, je pense n'avoir rien oublié