IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

IE7 plante complètement


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Freelance
    Inscrit en
    Décembre 2003
    Messages
    423
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Freelance

    Informations forums :
    Inscription : Décembre 2003
    Messages : 423
    Par défaut IE7 plante complètement
    Bonjour à tous,

    J'ai un formulaire contenant trois select
    En fonction du choix sur le deuxième, le contenu du dernier est modifié via une requete AJAX + un peu de javascript.

    Voici mon codage :

    Fichier HTML contenant le formulaire :
    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
     
    <tr>
                    <td><label for="marque">Marque </label></td>
                    <td class="celluleBlanche"></td>
                    <td>
                        <select id="marque" onchange="ChargerModeles(this.value)" onkeyup="ChargerModeles(this.value)">
                            <option selected="selected" value="-1">Toutes</option>
                            <!-- BEGIN marque -->
                                <option value="{marque.VALEUR}" >{marque.TEXTE}</option>
                            <!-- END marque -->
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label for="modele">Mod&egrave;le </label></td>
                    <td class="celluleBlanche"></td>
                    <td>
                        <select id="modele" >
                            <option selected="selected" value="-1">Tous</option>
                            <!-- BEGIN modele -->
                                <option value="{modele.VALEUR}" >{modele.TEXTE}</option>
                            <!-- END modele -->
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">&nbsp;</td>
                    <td><input type="submit" value="Chercher" id="submitChercher"/></td>
                </tr>
            </table>
        </form>
    Fonction javascript appelée :
    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
     
    function ChargerModeles(unIdMarque)
    // Rôle :
    //    Cette méthode se charge de récupérer l'ensemble
    // des modèles de la marque dont l'id est <unIdMarque>
    // via une requête AJAX.
    //    L'ensemble des modèles trouvés sont ajoutés au select 
    // de la page courante ayant pour id "modele".
    //    Si aucun modèle n'a été trouvé, une seule option composera
    // le select : "Aucun Modele Trouvé" et désactivera le bouton d'id
    // "submitChercher" de la page courante.
    //
    // Contrat :
    //    Aucun
    //
    // Algorithme :
    //    Trivial
    //
    {
        var selectModele = document.getElementById('modele');    // Sélectionne le select où seront ajoutés les OPTIONS
     
        // Vidage du select : toutes les options sont supprimées
        if ($.browser.opera)
        { // Pour opéra, l'effacement est un peu différent
            while(selectModele.length != 0)
            {
                selectModele.options[selectModele.length-1] = null;
            }
        }
        else
        { // Pour les autres navigateurs il n'y a pas de problème
            selectModele.length = 0;
        }
     
        if ( unIdMarque != -1 )
        {
            // Utilisation du framework jQuery pour la requête AJAX
            $.ajax({
                type: 'POST',                            // Méthode post
                url: './Includes/chargerModeles.php',    // Fichier appelé
                data: 'idMarque='+unIdMarque,            // Paramètres du post
                success: function(modeles)                // Fonction appelée une fois la requête terminée
                        {
                            if ( $(modeles).find("reponse").find("modele").length != 0 )
                            { // Il y a au moins un modèle
                                selectModele.options[selectModele.options.length] = new Option("Tous","-1");
                                $(modeles).find("reponse").find("modele").each(function()
                                {
                                    selectModele.options[selectModele.length] = new Option($(this).find("nom").text(),$(this).find("id").text());
                                });
                                document.getElementById('submitChercher').disabled = false;
                            }
                            else
                            { // On a trouvé aucun modèle
                                selectModele.options[selectModele.length] = new Option("Aucun modele trouve","-1");
                                document.getElementById('submitChercher').disabled = true;
                            }
                        }
            });
        }
        else
        { // L'utilisateur a sélectionné l'option Toutes dans les marques
            selectModele.options[selectModele.length] = new Option("Tous","-1");
            document.getElementById('submitChercher').disabled = false;
        }
    } // --- Fin de ChargerModeles()
    Le fichier php appelé lors de la requête AJAX :
    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
     
    <?php
        ///////////////////////////////////////////////////////////////
        // Rôle de ce fichier :
        //    Le contenu de ce fichier sert lors des requêtes AJAX pour 
        // récupérer tous les modèles de la base de données d'une marque donnée
        // L'id de cette marque est envoyé lors de l'appel AJAX sous le nom
        // idMarque
        //
        //    Renvoi une chaine au format XML encadrée par la balise <reponse></reponse>
        // Si le résultat est vide, la chaine ne contient que ces balises.
        // Sinon pour chaque modele  trouvé la structure suivante est ajoutée à la balise
        // précédente :
        //    <modele>
        //        <id> ID DU MODELE </id>
        //        <nom> NOM DU MODELE </nom>
        //    </modele>
        //
        // Contrat :
        //    Ce fichier n'est à utiliser que dans un contexte AJAX.
        //
        // Algorithme : 
        //    Trivial
        //
        //////////////////////////////////////////////////////////////
     
     
        /////////////////////////////////////// Include des fichiers nécessaires
        require_once('Config.php');
        require_once('../'.REP_CLASSES.'/Voiture.php');    // Contient la méthode ListerModeles
     
        /////////////////////////////////////// Initialisation de l'accès à la base de données
        $baseDonnees = new PDO(BDD_CONNEXION,BDD_UTILISATEUR,BDD_MOT_DE_PASSE);
     
        ////////////////////////////////////// Récupération des modèles
        $modeles = Voiture::ListerModeles($baseDonnees,$_REQUEST['idMarque']);
     
        ///////////////////////////////////// Formatage du résultat
        $retour = '<reponse>';
        if (count($modeles)!=0)
        {
            foreach($modeles as $unModele)
            {
                $retour .= '<modele>';
                $retour .= '<id>'.$unModele['IdModele'].'</id>';
                $retour .= '<nom>'.$unModele['NomModele'].'</nom>';
                $retour .= '</modele>';
            }
        }
     
        $retour .= '</reponse>';
        $baseDonnees = null;
        header('Content-type: text/xml');
        echo $retour;
    ///////////////////
    // Ne surtout pas insérer de caractère après la balise fermante php sous peine de non fonctionnement
    //////////////////
    ?>
    Le problème est le suivant :
    Admettons je choisisse dans le second select un premier choix qui implique que mon dernier select soit modifié.
    Si à nouveau je remodifie mon choix du second select de sorte que mon dernier select soit modifié avec une seule Option (affichage du message Tous ou Aucun modele trouve selon le code fourni ci-dessus). La réaction diffère entre Firefox et IE 7 :

    Firefox : ça marche y'a pas de soucis.
    IE7 : il plante complètement sans message d'erreur sans rien (uniquement le dialogBox de Vista où il y a écrit : Explorer à terminé)

    Je suis sous VISTA (on sait jamais si ça peut jouer).

    Ce qui me parait bizarre aussi c'est que j'avais déjà fais ça de la façon suivante et que ça marchait sans soucis ... sauf que cette méthode était très très mal codée, alors que là c'est normalement beaucoup plus propre ...
    Ancienne méthode (fonctionnelle) Fonction Javascript :
    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
     
    function load_Modele(form)
    {
     
         var l1 = document.getElementById('marque');
         var l2 = document.getElementById('modele');
         var index = l1.selectedIndex;
         var valeur = l1.options[index].value;
     
         if (valeur<0) 
         {    //re-affichage du message "selectionner une marque"
            l2.options.length = 0;
     
            if (form == 'voiture')
            {
                l2.options[0] = new Option("Selectionner une marque","-1");
                load_Details('div_infovoit','marque','modele','categorie','text_modele');
            }
            else
            {
                l2.options[0] = new Option("Toutes","-1");
            }
         }
         else
         {    //mise en place de l'objet pour XMLHttpRequest
            var xhr_object = null;
     
            // Firefox 
            if(window.XMLHttpRequest) 
                xhr_object = new XMLHttpRequest();
            // Internet Explorer 
            else if(window.ActiveXObject) 
                  xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     
            // XMLHttpRequest non supporté par le navigateur 
            else {
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...Le site ne peut donc fonctionner correctement. Veuillez utiliser un autre navigateur."); 
                return; 
            }
     
     
     
            xhr_object.open("POST", "./includes/modele.php", true);
            xhr_object.onreadystatechange = function() 
            { 
                if(xhr_object.readyState == 4)
                {
                    //on interprete maitnenant les commandes javascript pour que l'ajout se fasse reellement
                    eval(xhr_object.responseText); 
                }
            }
     
            xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
            //on stocke les donnees saisie par l'utilisateur (marque modele) qui seront utiles dans modele.php. Les donnees sont envoyees via xhr_object.send();
            var data = "id_marque="+valeur+"&form="+form+"&l_modele=modele";
            xhr_object.send(data);
         }
    }
    Ancienne méthode (fonctionnelle) fichier php appelé :
    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
     
    //traitement SQL
        $db = new PDO(BDD_CONNECTION, "root", "");
        $sql='SELECT Id_Modele,Nom FROM modeles WHERE Id_Marque=:id_marque ORDER BY Nom ASC';
        $statement = $db->prepare($sql);
        $statement->execute(array(':id_marque' => intval($_POST["id_marque"])));
        $tabl_results = $statement->fetchAll();
     
        //Gestion de la liste
        echo 'var liste = document.getElementById("'.$_POST["l_modele"].'");';
        echo 'liste.options.length=0;';
     
        //si notre requete n'est pas vide on crée nos options
        if (count($tabl_results))
        {
            if ($_POST["form"]=="voiture")    // page d'ajout de voiture
            {
                echo 'liste.options[liste.options.length] = new Option("Choisissez un modele","-1");';
            }
            else                            //page de recherche dans le stock 
            {
                echo 'liste.options[liste.options.length] = new Option("Tous","-1");';
            }
     
            foreach($tabl_results as $map)
            {
                echo 'liste.options[liste.options.length] = new Option("'.$map["Nom"].'",'.$map["Id_Modele"].');';
            }
        }
        //sinon on ne met qu'une seule option correspondant à un message de vide
        else
        {
            echo 'liste.options[liste.options.length] = new Option("Aucun modele correspondant","-1");';        
        }
        echo 'load_Details("div_infovoit","marque","modele","categorie","text_modele");';
        $statement = null;
        $db = null;
    Merci de m'avoir lu,
    Et surtout merci à quiconque pourra m'aider

  2. #2
    Membre éclairé
    Homme Profil pro
    Freelance
    Inscrit en
    Décembre 2003
    Messages
    423
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Freelance

    Informations forums :
    Inscription : Décembre 2003
    Messages : 423
    Par défaut
    Après divers tests j'en suis arrivé à la conclusion que c'était un soucis interne à mon PC.


    J'abandonne donc la discussion partant du principe que ça fonctionne correctement.


    Sur ce bonne soirée

Discussions similaires

  1. [AC-2003] Formulaire qui plante complètement ACCESS
    Par damsmut dans le forum IHM
    Réponses: 14
    Dernier message: 30/04/2009, 11h22
  2. [MFC] DoModal() plante
    Par barthelv dans le forum MFC
    Réponses: 3
    Dernier message: 29/07/2004, 10h56
  3. Que se passe-t-il en interne si un ROLLBACK plante ?
    Par jack554 dans le forum Administration
    Réponses: 4
    Dernier message: 07/04/2004, 12h55
  4. Réponses: 11
    Dernier message: 17/03/2003, 10h56
  5. Réponses: 2
    Dernier message: 23/10/2002, 13h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo