Discussion :

[jmtrivia]

Bonjour à toutes et tous,
Je rencontre une difficulté que je ne sais pas résoudre. J'utilise un javascript que je n'ai pas codé moi-même et qui fonctionne bien sur certaines de mes pages mais pas sur toutes. Le code ci dessous :

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
45
46
47
48
49
50
51
52
 
...
<?php 
        $lignes = $pdo->query('SELECT ... FROM ... WHERE .... = ...');
        $lignes->execute();
        $count = $lignes->rowCount();
        $lignes->closeCursor();
        if( $count == 0 ) 
        { 
                // mode création
                $charges = $pdo->query('SELECT ordre, libelle FROM charges ORDER BY ordre');
        }
        else 
        {
                // mode modification
                $charges = $pdo->query('SELECT ... FROM ... WHERE .... = ...'); 
        }       
        while( $compte = $charges->fetch() ) 
        {
        ?>
								<td class="col-md-1"><input type="text" id="Charge" class="form-control" name="inputOrdre[]" value="<?= ( $count == 0 ? $compte['ordre'] : $compte['c_ordre'] ); ?>" /></td>
								<td class="col-md-5"><input type="text" id="Charge" class="form-control" name="inputCharge[]" value="<?= ( $count == 0 ? $compte['libelle'] : $compte['c_libelle'] ) ; ?>" /></td>
								<td class="col-md-2"><input type="text" id="Charge" class="form-control" name="inputMontant[]" value="<?= ( $count == 0 ? 0 :  $compte['c_montant'] ); ?>" /></td>
								<td>
								<a href="javascript:void(0);" class="addCharge"><span class="glyphicon glyphicon-plus-sign" style="line-height:2;" aria-hidden="true"></span></a>
								<a href="javascript:void(0);" class="remCharge"><span class="glyphicon glyphicon-minus" style="line-height:2;" aria-hidden="true"></span></a>
								</td>
							</tr>	
	<?php
        }
        $charges->closeCursor();
        ?>
							<tr>
								<td class="col-md-1"><input type="text" id="Charge" class="form-control" name="inputOrdre[]" value="" /></td>
								<td class="col-md-5"><input type="text" id="Charge" class="form-control" name="inputCharge[]" value="" /></td>
								<td class="col-md-2"><input type="text" id="Charge" class="form-control" name="inputMontant[]" value="" /></td>
								<td>
								<a href="javascript:void(0);" class="addCharge"><span class="glyphicon glyphicon-plus-sign" style="line-height:2;" aria-hidden="true"></span></a>
								<a href="javascript:void(0);" class="remCharge"><span class="glyphicon glyphicon-minus" style="line-height:2;" aria-hidden="true"></span></a>
								</td>
							</tr>
							<script type="text/javascript"> 
                                                        $(document).ready(function() {
                                                                $(".addCharge").click(function(){
                                                                        $("#Charge").append('<tr><td class="col-md-1"><input type="text" id="Charge" class="form-control" name="inputOrdre[]" /></td><td class="col-md-5"><input type="text" id="Charge" class="form-control" name="inputCharge[]" /></td><td class="col-md-2"><input type="text" id="Charge" class="form-control" name="inputMontant[]" value="0" /></td><td><a href="javascript:void(0);" class="addCharge"><span class="glyphicon glyphicon-plus-sign" style="line-height:2;" aria-hidden="true"></span></a><a href="javascript:void(0);" class="remCharge"><span class="glyphicon glyphicon-minus" style="line-height:2;" aria-hidden="true"></span></a></td></tr>');
                                                                });
                                                                $("#Charge").on('click','.remCharge',function(){
                                                                        $(this).parent().parent().remove();
                                                                });
                                                        });
                                                        </script>
...

J'ai modifié les requêtes mais tout fonctionne à l'exception du script.
D'avance merci pour votre aide.

[headmax]

L'ID en HTML est unique ici tu utilise le même id pour ton élément html ce qui créera un conflit de ciblage de ta DIV. De plus tu essayé de "append" dans un input au lieux d'un tr ou un td ton id doit être unique est mis sur l'un des deux :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<td id="load"></td>
//ou
<tr id="load"></tr>
//ensuite
$(document).ready(function() {
    $(".addCharge").click(function(){
        $("#load").append('<tr><td class="col-md-1"><input type="text" id="Charge" class="form-control" name="inputOrdre[]" /></td><td class="col-md-5"><input type="text" id="Charge" class="form-control" name="inputCharge[]" /></td><td class="col-md-2"><input type="text" id="Charge" class="form-control" name="inputMontant[]" value="0" /></td><td><a href="javascript:void(0);" class="addCharge"><span class="glyphicon glyphicon-plus-sign" style="line-height:2;" aria-hidden="true"></span></a><a href="javascript:void(0);" class="remCharge"><span class="glyphicon glyphicon-minus" style="line-height:2;" aria-hidden="true"></span></a></td></tr>');
        });
         $("#Charge").on('click','.remCharge',function(){
              $(this).parent().parent().remove();
         });
});