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

AJAX Discussion :

[AJAX] IE: listes déroulantes liées


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut [AJAX] IE: listes déroulantes liées
    bonjour à tous, pouvez-vous m'aider,

    j'ai deux listes déroulantes qui sont liées par interdépendance.
    Pour cela j'ai utilisé AJAX,que j'ai implémenté dans une jsp.

    Le Pb est que sur FF ça marche trés bien mais que sur IE6.0 pas du tout.
    je pense que cela vient du innerHtml que IE ne supporte pas car je n'utilise aucun div pouvez vous m'aider ou m'aiguiller SVP
    je vous met mon code:

    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
    67
    68
    69
    70
    71
    72
    73
    74
    75
     
    function getXhr()
    {
         var xhr = null; 
        if(window.XMLHttpRequest)
        { // Firefox et autres
    		xhr = new XMLHttpRequest();
    		//alert('new XMLHttpRequest'); 
        }
        else if(window.ActiveXObject)
        { // Internet Explorer 
    	    xhr = new XMLHttpRequest();
        }
        else 
       { // XMLHttpRequest non support� par le navigateur 
    	   alert("Votre navigateur ne supporte pas les objets    
               XMLHTTPRequest..."); 
    	   xhr = false; 
       } 
        return xhr;
    }
     
    function go() 
    {
     
        var xhr = getXhr();
        // On défini ce qu'on va faire quand on aura la réponse
       xhr.onreadystatechange = function()
       {
    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    	if(xhr.readyState == 4 && xhr.status == 200){
    		leselect = xhr.responseText;
                   // On se sert de innerHTML pour rajouter les options a la liste
    		document.getElementById('LC').innerHTML = leselect;
    	}
        }
        sel = document.getElementById('Techno'); //Techno = structure
        techno = sel.options[sel.selectedIndex].value;
     
        // Ici on va voir comment faire du post
       xhr.open("POST","./DeuxiemeJsp.jsp?techno="+techno,true);
       // ne pas oublier �a pour le post
       xhr.setRequestHeader('Content-Type','application/x-www-form- 
       urlencoded');
       // ne pas oublier de poster les arguments
       // ici, l'id de la structure 
       xhr.send("idTechno="+techno);
     
    }
    </script>
     
    <table border cellspacing="10px" align="center" width="60%">
    <tr >
    <td> 
     
    	<select name="T" id="Techno" onchange="go()">
    	<option value="" selected></option> 
    	<%
    		String RequeteSelectA= "SELECT distinct A FROM maTable order by A";
    		result = statement.executeQuery(RequeteSelectA);
     
    		while (result.next()) 
    		{
    			String A= result.getString("A");
    			out.print("<option value="+ A+" >" +  A+ "</option>");
     
    		}
    		result.close();
    	%>	
            </select>					
    </td>
    <td >
    <select name="L" id=LC> 
    	<option value="vide">ALL</option>
    </select>
    DeuxiemeJsp.jsp
    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
     
    <%	
    	String A= request.getParameter("A");
     
    	System.out.println("****************************");
    	System.out.println("Techno Pour Liste2 :" + A);
    	System.out.println("****************************");
    	if(A!=null)
    	{
    		String RequeteSelectLC = "SELECT distinct(B) FROM maTable 
                    WHERE A= '"+A+"' order by B";
                    result = statement.executeQuery(RequeteSelectLC);    
                    System.out.println("****RequeteSelectLC*********");
                    System.out.println("Requete = " + RequeteSelectLC);
                   System.out.println("*******************");
     
                   while (result.next()) 
                   {
            	     String B= result.getString("B");
            	     out.print("<option value="+B+">" + B+ "</option>");
            	}
                     result.close();
    	}
    	statement.close();
    	connection.close(); 
     
    %>

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    pour IE6 avec innerHTML, a priori il faut aussi regénérer les <select> et </select> dans ton jsp : tu ne peux pas ne modifier que les options qu'ils contiennent ...

    A+

  3. #3
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,
    Citation Envoyé par E.Bzz
    pour IE6 avec innerHTML, a priori il faut aussi regénérer les <select> et </select> dans ton jsp : tu ne peux pas ne modifier que les options qu'ils contiennent ...
    C'est expliqué sur le tutoriel http://siddh.developpez.com/articles/ajax/#LIV-A
    Le problème vient surement de la remarque d'E.Bzz mais :
    <select name="L" id=LC>
    Tu dois mettre la valeur des attributs dans des quotes .
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name="L" id="LC">

  4. #4
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut
    merci à vous deux pour votre réponses rapides.
    Pour Andry je pense pas que c'est les doubles quotes c'est juste un oublie de ma part.
    par contre pour e.buzz :

    je ne comprend pas ce que tu veux dire ou du moins comment le traduire en code AJAX : "a priori il faut aussi regénérer les <select> et </select> dans ton jsp"

  5. #5
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par luffy2mars Voir le message
    je ne comprend pas ce que tu veux dire ou du moins comment le traduire en code AJAX : "a priori il faut aussi regénérer les <select> et </select> dans ton jsp"
    Ça ne veux rien dire d'autre que ça.
    Pour l'instant tu génères une liste d'options que tu intègres au select via son innerHTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('LC').innerHTML = leselect;
    Il faut simplement qu'en plus des options ton code PHP (ou ton code Javascript dans la fonction de réception Ajax) regénère les <select> et </select> et plus des options. Il faut ensuite que tu "remontes" d'un cran dans ton HTML, au niveau du <td>, donc, et que tu utilises le innerHTML du <td> (en lui donnant un id) pour intégrer le <select>, les options et le </select>.

    EDIT : dans le lien de la FAQ, tu as effectivement un exemple dans le ajaxLivre.php en fin du § IV.A

    A+

  6. #6
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Ce que dit E.Bzz est expliqué sur le tutoriel que je t'ai donné .
    C'est un div que tu doits rafraichir avec un innerHTML mais pas un select car avec IE, la balise select ne supporte pas innerHTML.

  7. #7
    Membre averti
    Inscrit en
    Avril 2008
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 54
    Par défaut
    ok j'ai compris j'ai mis un div

    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
     
    leselect = xhr.responseText;
    document.getElementById('liste').innerHTML = leselect;
    //On se sert de innerHTML pour rajouter les options a la liste
    document.getElementById('LC').innerHTML = leselect;
     
    <div id="liste">
    <table>
    <tr>
    <td>
     
    <select id="LC">meme traitement</select>
    </td>
    </tr>
    </table>
    </div>
    est-ce comme ça qu'il faut faire?
    car ça marche tjr pas.

    par contre j'avais un erreur dans la fonction getXhr qui suit:
    //erreur souligné en rouge
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    try 
    {
    	xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch (e)
    {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

Discussions similaires

  1. [AJAX] compatibilité liste déroulante liée avec Internet Explorer IE
    Par pasc06 dans le forum Général JavaScript
    Réponses: 27
    Dernier message: 09/12/2008, 19h16
  2. [AJAX] 2 listes déroulantes liées
    Par ThinKiT dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 10/07/2008, 15h19
  3. [AJAX] Listes Déroulantes Liées : 2e liste qui ne s'affiche pas
    Par fayred dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 20/07/2007, 13h07
  4. [AJAX] Exécution sous Internet Explorer (liste déroulantes liées)
    Par dream_of_australia dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 08/06/2007, 07h24
  5. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 16h51

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