Discussion :

[Njörd]

Bonjour à tous,

Je suis actuellement en train de buter sur un problème de compatibilité avec Internet Explorer (version 8).

Contexte :
Dans un formulaire d'ajout de page, il y a la possibilité de sélectionner la rubrique du menu à laquelle un lien vers la nouvelle page sera ajouté. Le choix de cette rubrique se fait par l'intermédiaire de listes déroulantes (3 listes au maximum).

Rubriques menu |\/| Sous-rubriques |\/| Sous-sous-rubriques |\/|

Les select Sous-rubriques et Sous-Sous-rubriques sont affiché dynamiquement en Ajax via un appel écouté sur le onClick de chaque option du premier select, rubriques menu.

Mes fonctions fonctionnent sous FF, mais pas sous IE8.
J'ai effectué plusieurs recherches sur ce soucis, et il semblerait que ce soit tout simplement IE8 qui refuse de lire certaines fonctions jQuery.

D'une part, j'ai modifié la logique pour IE en utilisant onChange dans le select et non plus des onClick sur chaque option.
D'autre part, j'ai été obligé de modifier mes fonctions notamment sur l'utilisation de appendTo, find() et each().

Pour appendTo() pas de souci, je peux faire la parade avec html().
Mais je n'ai pas trouvé de parade pour faire comme un $(xml).find('info').each() pour IE (il refuse tout simplement de rentrer dans le each()).

Je vous donne le code :

Le select rubriques menu de la page : Ajouter page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<select id="id_rubrique_page" class="validate[required,custom[rubriques]]" name="id_rubrique_page" onChange="majInfosRubrique(this.options[this.selectedIndex].text);sousRubriques(this.options[this.selectedIndex].value);">
                <option value="0">Rubriques Entreprise</option>
                <?php
                $tabR = $this->rubriques;
                $cpt = count($tabR);
                for ($i = 0; $i < $cpt; $i++) {
                    echo '<option value="' . $tabR[$i]['id_menu'] . '">' . $tabR[$i]['libelle_menu'];
                    '</option>';
                }
                ?>
            </select>

La fonction majRubriques modifie uniquement le contenu d'un div qui informe l'utilisateur de son choix, tout est bon là.

La fonction sousRubriques(id)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
function sousRubriques(id){
    $.ajax({
        type:	"post",
        url:	site+"/backoffice/"+controller+"/rubriques",
        data:	"id_rubrique="+id,
        success: function(xml){                
            // Suppression du contenu et non affichage des select
            $('#container_sous_rubrique_page').empty();
            $('#container_sous_sous_rubrique_page').empty();
            $('#container_sous_sous_rubrique_page').hide();
 
            // Ajout d'une valeur par défaut
            var contenu = '<select id="id_sous_rubrique_page" name="id_sous_rubrique_page" onChange="majInfosRubrique(this.options[this.selectedIndex].text);sousSousRubriques(this.options[this.selectedIndex].value);">';
            contenu = contenu + '<option value="0">Sous-rubriques</option>';
 
            // Parcours du fichier XML 
            $(xml).find('info').each(function(){
                // Récupération des variables du fichier XML
                var id      =   $(this).attr('id');
                var libelle =   $(this).find('libelle').text();
 
                // Chargement des sous-rubriques dans le select
                contenu = contenu + '<option value="'+id+'">'+libelle+'</option>';
            });
 
            // Affichage du select des sous-rubriques
            $('#container_sous_rubrique_page').html(contenu);
            $('#container_sous_rubrique_page').show();
        }
    });
}

La fonction sousSousRubriques(id) est du même accabit que la fonction sousRubriques(id) avec juste des noms de sélecteurs qui changent.

Le XML renvoyé par mon controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$xml = '<?xml version="1.0" encoding="utf-8"?><infos>';
 
            for ($i = 0; $i < $cpt; $i++) {
                $xml .= '<info id="' . $res[$i]["id_menu"] . '">';
                $xml .= '<libelle>' . $res[$i]["libelle_menu"] . '</libelle>';
                $xml .= '</info>';
            }
            $xml .= '</infos>';
            echo $xml;

J'ai essayé aussi de parser le XML afin que IE ne se dise pas que les nœuds que je vise n'existe pas dans le DOM mais rien de probant de ce côté là. Là, je remplaçai $(xml).find('info').each(function(){ ... } par $(xmlDoc).find('info').each(function(){ ... }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  // On parse le XML pour qu'il soit dans le DOM
            var xmlDoc;
            if (window.DOMParser)
            {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(xml,"text/xml");
            }
            else // Internet Explorer
            {
                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(xml);
            }

Les modifications effectuées (onchange à la place de onclick, html() à la place de appendTo()) fonctionnent sous FF et sous IE.

Qu'en pensez-vous ? Comment puis-je parcourir autrement qu'avec find().each() la variable XML que je renvoi à la fonction Ajax ?

J'ai bien vu le fait que : jQuery .find() doesn’t return data in IE but does in Firefox and Chrome. Et que : Attention, le xml ne marche pas en local pour IE.

Merci d'avance

[Njörd]

Bonjour,

Je fais un petit retour pour ceux qui bloquerai sur un souci du même genre.

Donc comme dis dans le message initiale :
- IE n'accepte pas l'évênement onClick sur les options d'un select => il faut utiliser onChange directement dans le select.
- jQuery .find() doesn’t return data in IE but does in Firefox and Chrome => pas trouvé de solution alternative.
- Le xml ne marche pas en local pour IE => pas trouvé de solution, à part tester directement sur le serveur de production.

Du coup, dans le cas de listes liées, je passe désormais par une réponse JSON dans ma fonction Ajax.

Le premier select et les containers des selects liés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<select id="id_rubrique_page" class="validate[required,custom[rubriques]]" name="id_rubrique_page" onChange="majInfosRubrique(this.options[this.selectedIndex].text);sousRubriques(this.options[this.selectedIndex].value);">
                    <option value="-1">Rubriques Entreprise</option>
                    <?php
                    $tabR = $this->rubriques;
                    $cpt = count($tabR);
                    for ($i = 0; $i < $cpt; $i++) {
                        echo '<option value="' . $tabR[$i]['id_menu'] . '">' . $tabR[$i]['libelle_menu'];
                        '</option>';
                    }
                    ?>
                </select>
 
                <span id="container_sous_rubrique_page" style="display:none;"></span>
 
                <span id="container_sous_sous_rubrique_page" style="display:none;"></span>

La réponse quand des réponses sont liées à une sélection :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
function sousRubriques(id){
    $.ajax({
        type:"post",
        dataType:"json",
        url:site+"/backoffice/"+controller+"/rubriques",
        data:"id_rubrique="+id,
        success: function(json){    
            var cpt = 0;
 
            // Suppression du contenu et non affichage des select
            $('#container_sous_rubrique_page').empty();
            $('#container_sous_sous_rubrique_page').empty();
            $('#container_sous_sous_rubrique_page').hide();
 
            // Ajout d'une valeur par défaut
            var contenu = '<select id="id_sous_rubrique_page" name="id_sous_rubrique_page" onChange="majInfosRubrique(this.options[this.selectedIndex].text);sousSousRubriques(this.options[this.selectedIndex].value);">';
            contenu = contenu + '<option value="-1">Sous-rubriques</option>';
 
            // Parcours du JSON
            for(var i=0; i < json.length; i++ ){
                // Variables
                var idMenu = json[i]['id_menu'];
                var libelleMenu = json[i]['libelle_menu'];
 
                // MaJ du Select
                contenu = contenu + '<option value="'+ idMenu +'">'+ libelleMenu +'</option>';
                cpt++;
            }
 
            // Affichage du select des sous-rubriques
            if(cpt !=0){
                $('#container_sous_rubrique_page').html(contenu);
                $('#container_sous_rubrique_page').show();   
            }
        }
    });
}

L'action du controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
public function rubriquesAction() {
        $menu = new Application_Model_DbTable_Menu();

        //On vérifie si l’on utilise bien la méthode Post.
        if ($this->_request->isPost()) {
            $this->_helper->layout->disableLayout();
            $this->_helper->viewRenderer->setNeverRender();

            $res = $menu->recupererLesSousRubriques($_POST['id_rubrique']);
            echo json_encode($res);
        }
    }

Comme d'habitude, n'hésitez pas à critiquer.

Enjoy