onchange et réécriture de div

**mverhaeghe** · 04/01/2012, 08h57

Bonjour à tous,

Je suis confronté à un problème depuis quelques jours sans parvenir à trouver une solution. Je cherche a faire un select dynamique en fonction des résultats d'un select précédent. Cela marche très bien lorsque je teste la page de formulaire en direct. Mais cela ne fonctionne plus lorsque cette page est appelé dans une div.

En gros, j'ai une div_gauche qui contient le menu, et une div_droite qui contient la page correspondante. Le chargement se fait via la fonction suivante :

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
 
        function envoieRequete(url,id)
        {
            var xhr_object = null;
            var position = id;
            if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
            else
            if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
            // On ouvre la requete vers la page désirée
            xhr_object.open("GET", url, true);
            xhr_object.onreadystatechange = function(){
                    if ( xhr_object.readyState == 4 )
                    {
                            // j'affiche dans la DIV spécifiées le contenu retourné par le lien
                            document.getElementById(position).innerHTML = xhr_object.responseText;
                    }
            }
        // dans le cas du get
        xhr_object.send(null);
 
        }

Le code javascript qui me permet de faire mon select dynamique est inclus sur ma page de recherche, le voici :

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
 
    $(function(){
      $("select#select_societe").change(function(){
            $.getJSON("bin/recherche_projetBysociete.php",{id: $(this).val(), ajax: 'true'}, function(j) {
            var options = '';
            alert(j);
            for (var i = 0; i < j.length; i++) {
                alert('<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>');
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            $("#projet").html(options);
            $('#projet option:first').attr('selected', 'selected');
        })
      })
    })

Je débugge ce truc avec Firebug. Je n'ai aucune erreur qui apparait, la fonction de change n'est apparemment pas appelé du tout. Même des alert javascripts ne s'affichent pas. Il doit y avoir un surchargement quelque part, mais je ne comprends pas ou, et je suis complétement aveugle.
Si quelqu'un a une idée, je suis preneur.

**erox44** · 04/01/2012, 09h35

Hello, met nous donc ton html aussi pour y voir plus clair.

**mverhaeghe** · 04/01/2012, 09h57

Voici les trois fichiers html :

- Le header
- Le menu de gauche
- Le contenu de droite

Le header :
------------------------------------

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Gestion de la météo des services</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <!--<script type="text/javascript" src="js/niceforms.js"></script>        -->
        <link href="css/template.css" rel="stylesheet" type="text/css" />
        <link href="css/template2.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
        <!-- <link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" /> -->
        <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    </head>
    <script type="text/javascript">
        function envoieRequete(url,id)
        {
            var xhr_object = null;
            var position = id;
            if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
            else
            if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
            // On ouvre la requete vers la page désirée
            xhr_object.open("GET", url, true);
            xhr_object.onreadystatechange = function(){
                    if ( xhr_object.readyState == 4 )
                    {
                            // j'affiche dans la DIV spécifiées le contenu retourné par le lien
                            document.getElementById(position).innerHTML = xhr_object.responseText;
                    }
            }
        // dans le cas du get
        xhr_object.send(null);
 
        }
 
        $(function() {
            $( "#accordion" ).accordion();
        });
    </script>
 
    <body style="background-color:#EEEEE8;">
        <div id="conteneur_global">
            <div id="conteneur_header">
                <div id="logo_header">
                    <a href="./index.php"><img src="images/logo_prosodie.gif" style="border:0px;"/></a><br /><br />
                </div>
            <div id="title_header">Gestion de la météo des services</div>
            </div>
            <div id="conteneur_center">

Le menu :
------------------------------------

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
<?php
    include('header.php');
    include('secure.php');
    include('bin/workshop.php');
?>
 
<div id='conteneur_gauche' style='z-index:10;'>
    <!-- Titre du bloc droit -->
  <table align='center' width='100%'>
    <tr>
      <td class='text_index' width='100%'><center>Menu</center></td>
    </tr>
  </table>
    <!-- Contenu du bloc droit -->
  <div id='conteneur_list_1'>
    <div id="accordion">
        <h3><a href="#">Accueil</a></h3>
        <div>
            <ul>
                <li><a href="#" onClick=envoieRequete('accueil.php','conteneur_list_2')>Status des météos</a></li>
                <li><a href="#" onClick=envoieRequete('meteo_recherche.php','conteneur_list_2')>Recherche de météos</a></li>
            </ul>
        </div>
        <h3><a href="#">Gestion</a></h3>
        <div>
            <ul>
                <li><a href="#" onClick=envoieRequete('meteo_creation.php','conteneur_list_2')>Création d'une météo</a></li>
                <li><a href="#" onClick=envoieRequete('meteo_modification.php','conteneur_list_2')>Modification d'une météo</a></li>
                <li><a href="#" onClick=envoieRequete('meteo_suppression.php','conteneur_list_2')>Suppression d'une météo</a></li>
            </ul>
        </div>
        <h3><a href="#">Administration</a></h3>
        <div>
            <ul>
                <li><a href="#" onClick=envoieRequete('meteo_admin_groupes.php','conteneur_list_2')>Gestion des groupes</a></li>
                <li><a href="#" onClick=envoieRequete('meteo_admin_users.php','conteneur_list_2')>Gestion des utilisateurs</a></li>
            </ul>
        </div>
    </div>
  </div>
</div>
<div id='conteneur_graphe' style='z-index:10;'>
    <!-- Titre du bloc gauche -->
  <table align='center' width='100%'>
    <tr>
      <td class='text_index' width='100%'><center>Accueil / Status des météos</center></td>
    </tr>
  </table>
    <!-- Contenu du bloc gauche -->
  <div id='conteneur_list_2'>
      <?php AfficheStatusTTMeteo(); ?>
  </div>
</div>
 
<?php 
 
include('footer.php'); 
 
?>

Le formulaire de recherche :
------------------------------------

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
<?php
    include('bin/workshop.php');
?>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(function(){
      $("select#select_societe").change(function(){
            $.getJSON("bin/recherche_projetBysociete.php",{id: $(this).val(), ajax: 'true'}, function(j) {
            var options = '';
            alert(j);
            for (var i = 0; i < j.length; i++) {
                alert('<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>');
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            $("#projet").html(options);
            $('#projet option:first').attr('selected', 'selected');
        })
      })
    })      
</script>
<form action="bin/lancer_recherche.php" method="post" class="niceform">
    <fieldset>
    <legend>Recherche de m&eacute;t&eacute;o</legend>
    <dl>
        <dt><label for="titre">Titre :</label></dt>
        <dd><input type="text" name="titre" id="titre" size="32" maxlength="128" /></dd>
    </dl>
    <dl>
      <dt><label for="status">Status :</label></dt>
      <dd>
        <select size="1" name="status" id="status">
            <option value="2">Publi&eacute;</option>
            <option value="1">En Test</option>
            <option value="0">En cr&eacute;ation</option>
            	</select>
            </dd>
        </dl>
        <dl>
            <dt><label for="select_societe">Societe :</label></dt>
            <dd>
            	<select size="1" name="select_societe" id="select_societe">
                    <?php SelectAllSocietes(); ?>
                </select>
            </dd>
        </dl>
        <dl>
        <dt><label for="projet">Projet :</label></dt>
        <dd>
            <select size="1" name="projet" id="projet"></select>
        </dd>
        </dl>
    </fieldset>
    <fieldset class="action">
    	<input type="submit" name="submit" id="submit" value="Rechercher" />
    </fieldset>
</form>

**Bovino** · 04/01/2012, 10h02

Il y a certains points peu clairs dans ton message et certaines maladresses dans ton code.
* Quel est le rapport entre tes deux codes ?
* Mélanger jQuery et du JavaScript natif est maladroit, utilises jQuery partout.
Ta fonction envoieRequete() par exemple pourrait être réécrite.
* Si le résultat de getJSON() est bien un objet JSON, il ne possède pas de propriété length (et une boucle for peut être réalisée avantageusement avec each()).
* Si le select qui lance getJSON() est ajouté via AJAX, lorsque ton code est exécuté, il n'existe pas dans la page et l'événement associé ne peut donc pas être attaché (voir du coté de delegate() ou on()).
* $("select#select_societe") est une écriture maladroite qui peut obliger jQuery a des traitements supplémentaires inutiles, puisqu'un id doit être unique dans la page, $("#select_societe") suffit amplement et est plus efficace !

**mverhaeghe** · 04/01/2012, 10h19

Merci pour ces infos, je vais nettoyer un peu tout ça.
Par contre, je pense avoir isoler le problème. Je crois que cela vient de la ligne :

Code :

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

document.getElementById(position).innerHTML = xhr_object.responseText;

Le code de la page est traité comme du texte, et pas du html, il n'est donc pas interprété.

**mverhaeghe** · 04/01/2012, 10h46

Bon, j'ai trouvé d’où venait le problème. Effectivement, quand on utilise du Jquery au lieu de faire des mélanges, ça fonctionne mieux.

J'ai réécrit ma fonction de redirection, le code est maintenant bien interprété.
Voici le code final :

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
 
$(document).ready(function(){   // le document est chargé
    $("a#lien_menu").click(function(){   // on selectionne tous les liens et on définit une action quand on clique dessus
        page=($(this).attr("href")); // on recuperer l' adresse du lien
        $.ajax({ // ajax
            url: page, // url de la page à charger
            cache: false, // pas de mise en cache
            success:function(html){ // si la requête est un succès
            afficher(html);     // on execute la fonction afficher(donnees)
        },
        error:function(XMLHttpRequest, textStatus, errorThrows)
        { // erreur durant la requete
        }
        });
        return false; // on desactive le lien
    });
});
 
function afficher(donnees){ // pour remplacer le contenu du div contenu
    $("#conteneur_list_2").empty(); // on vide le div
    $("#conteneur_list_2").append(donnees); // on met dans le div le résultat de la requête ajax
}

PS : Merci à tous pour le coup de main

onchange et réécriture de div

jQuery

Vue hybride

Discussions similaires

Partager

Partager