Mise à jour de contenu de div

**mverhaeghe** · 11/12/2012, 11h08

Bonjour,

Je rencontre un problème dans un formulaire : j'ai un premier champs qui me remplit le second. Sur celui-ci j'ai déclaré un évènement onChange de manière à ce que lorsqu'on fait une sélection sur le deuxième champs, une DIV se remplit avec certaines informations en rapport avec la sélection. Hors mon problème est que ma div ne se met pas du tout à jour.

Je me demandais si ça ne posait pas un problème d'avoir un évènement déclaré sur un élément dont le contenu est rechargé ?

Pour information, voici le code source de mon 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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<!-- SECTION JAVASCRIPT -->
<script type="text/javascript" language="javascript">
    $(function(){
      $("select#select_chapitre").change(function(){
        $.getJSON("bin/recherche_moduleBymeteoAndChapitre.php",{id_meteo: $("select#select_meteo").val(), id: $(this).val(), ajax: 'true'}, function(j) {
        var options = '';
        //alert(j);
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        $("#select_module").html(options);
        $('#select_module option:first').attr('selected', 'selected');
        })
      });
 
      $("select#select_module").change(function(){
        $.getJSON("bin/recherche_descparams.php",{id_module: $("select#select_module").val(), ajax: 'true'}, function(j) {
        alert(j);
        for (var i = 0; i < j.length; i++) {
            data += j[i];
        }
        $("div#desc_params").empty();
        $("div#desc_params").append(data);
        })
      });
 
        $(".button").click(function() {
            var nom = $("#par_nom").val();
            var valeur = $("#par_value").val();
            var id_module = $("select#select_module").val();
            var id_meteo = $("select#select_meteo").val();
            var id_chapitre = $("select#select_chapitre").val();
            var text_module = $("select#select_module:selected").text();
 
            var dataString = 'nom='+ nom + '&valeur=' + valeur + '&id_module=' + id_module + '&id_meteo=' + id_meteo + '&id_chapitre=' + id_chapitre;
            //alert(dataString); return false;
 
            $.ajax({
            type: "POST",
            url: "bin/creer_param.php",
            data: dataString,
            success: function(data) {
                $('#div_form').html(data);
            }
            });
            return false;
 
        })
    })
</script>
<div id="div_form">
    <form id="crea_param" action="#" method="post">
        <fieldset>
        <legend>Cr&eacute;ation de modules </legend>
        <p>
            Pour cr&eacute;er un param&egrave;tre, il faut lui definir un nom, une valeur et renseigner la soci&eacute;t&eacute; et le projet<br/>
        </p>
        <dl>
            <dt><label for="select_meteo">Meteo :</label></dt>
            <dd>
                <select size="1" name="select_meteo" id="select_meteo">
                    <?php AfficheTTMeteoForParams(); ?>
                </select>
            </dd>
        </dl>
        <dl>
            <dt><label for="select_chapitre">Chapitre :</label></dt>
            <dd>
                <select size="1" name="select_chapitre" id="select_chapitre">
                  <option value="0"><-- S&eacute;lectionner un chapitre--></option>
                  <option value="1">1- Synth&egrave;se</option>
                  <option value="2">2 - Fonctionnel</option>
                  <option value="3">3 -Technique</option>
                </select>
            </dd>
        </dl>
        <dl>
            <dt><label for="select_module">Module :</label></dt>
            <dd>
                <select size="1" name="select_module" id="select_module">
                    <option value=0><-- S&eacute;lectionner une m&eacute;t&eacute;o et un chapitre--></option>
                </select>
            </dd>
        </dl>
        <dl>
            <dt><label for="par_nom">Nom du param&egrave;tre :</label></dt>
            <dd>
                <input type="text" size="60" value="" name="par_nom" id="par_nom" />
            </dd>
        </dl>
        <dl>
            <dt><label for="par_value">Valeur :</label></dt>
            <dd>
              <input type="text" size="60" value="" name="par_value" id="par_value" />
            </dd>
        </dl>
        </fieldset>
        <fieldset class="action">
            <input type="submit" name="submit" class="button" id="button" value="Enregistrez le param&egrave;tre" />
        </fieldset>
    </form>
</div>
<div id="desc_params" name="desc_params">
  Description des param&eacute;tres : <br/>
</div>

**SpaceFrog** · 11/12/2012, 11h11

regarde du coté de on() ou delegate()

**mverhaeghe** · 11/12/2012, 14h15

Hum....
Je viens de tester avec le on, mais c'est pas mieux. Je vais voir avec delegate.

Voici le code pour l'instant :

Code :

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

1
2
3
4
5
6
7
8
9
10
      $("select#select_module").on("change",function(){
        $.getJSON("bin/recherche_descparams.php",{id_module: $("select#select_module").val(), ajax: 'true'}, function(j) {
        alert(j);
        for (var i = 0; i < j.length; i++) {
            data += j[i];
        }
        $("div#desc_params").empty();
        $("div#desc_params").append(data);
        })
      });