Bonjour,

J'ai une page créée en jsp dans laquelle se trouve une table qui comprend des éléments tels que input text, input text calendar, textarea ou select avec options. Sous cette table se trouve un bouton "save_change".
Je souhaite que ce bouton soit enabled lorsque l'on modifie un des éléments de la table.
Mon problème est que mon code javascript ne fonctionne pas pour l'input text calendar. Quant aux input text, il faut cliquer ailleurs (histoire de focus j'imagine) après une modif pour que cela fonctionne.

Quelqu'un saurait-il ce qui convient mieux pour un calendar ?

Après quelques essais avec "select" qui ne convient pas pour ce que je veux faire, ja vais essayer de contrôler l'ancienne date et la nouvelle date. Si il y a une différence, je déclencherai un évènement ... je pars sur cette recherche ... si vous avez mieux à me proposer, merci !

PS : dans la doc du site "api.jquery.com", on peut lire à propos de la méthode change :
"Changing the value of an input element using JavaScript, using .val() for example, won't fire the event."
Donc cela signifie-t'il que je doive peut-être déclencher une méthode depuis l'intérieur du date-picker.js ????

voici ma jsp :
Code html : 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
<table class="table table-condensed">
<tr>
<td width="10%" class="NormalBold text-right">Confirmé:</td>
<td width="20%" class="text-left">
<div class="input-group">
<input class="form-control" type="text" name="proposed" value=" {{ ning.student }} " maxlength="9" size="9" title="Proposed {{ ning.proposedCourse }}">
<div class="input-group-addon">    
<html:link href = "#" onclick = "">
	<html:img pageKey = "image.search" bundle = "imageResources" width = "21" height = "16" border = "0"/>
</html:link>
</div>
</div>
</td>
<td width="15%" class="NormalBold text-right"> étudiant :</td>
<td width="20%" class="text-left">
<select class="form-control" name="select" id="tot">
<option value="1" selected>Joe</option>
<option value="7">Alain</option>
<option value="8">René</option>
<option value="8">Tartuffe</option>
</select>
</td>
<td width="15%" class="NormalBold text-right">Cours ciblé:</td>
<td width="20%" class="text-left">
<div class="input-group">
<input class="form-control" type="text" id="TargetDate" value="{{ targetDateDisplay }}" maxlength="9" size="9">
<div class="input-group-addon">
	<html:link href = "#" onclick = "show_calendar(document.getElementById('TargetDate'), true);return false;">
    	<html:img pageKey = "image.calendar" bundle = "imageResources" width = "21" height = "16" border = "0"/>
	</html:link>
</div>
</div>
</td>
</tr>
<tr>
<td class="NormalBold text-right">Instruction:</td>
<td colspan="5" ><textarea class="form-control"></textarea></td>
</tr>
</table>
<div class="row">
     <div class="col-lg-12">
          <a class="btn btn-action btn-default pull-right" disabled="disabled" id="save_change">Save changes</a>
     </div>
</div>

et voici le 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
actionCallback: {
edit: function (element, table, rows) {
    rows.every(function (rowIdx, tableLoop, rowLoop) {
        var row = this;
        var tr = $(row.node());
        if (row.child.isShown()) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp(200, function () {
                row.child.hide();
                element.removeClass('active');
            });
        } else {
            // Open this row
            row.child(format('#screen_detail', row.data())).show();
            $('div.slider', row.child()).slideDown(200).on('change', function(event) {
            	console.log('change');
            	$('#save_change').prop('disabled', false);
	    });
            element.addClass('active');
	    $('#save_change').prop('disabled', true);
            element.addClass('active');
        }
    });
},
Merci beaucoup !