Discussion :

[Daair]

Bonjour,


Je peine depuis plusieurs jours sur un script jQuery (je suis débutante en JS) et tout ne se passe comme prévu ! Je m'explique :
Le but de ce script est :


1. Afficher un span lorsque au moins une des case d'un tableau est cochée, et afficher le nombre de case cochées,
2. Charger avec AJAX une version actualisée du tableau dans un <div> lorsque le lien "actualiser" est cliqué


Au niveau du HTML j'ai ceci :

Code html :

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

1
2
3
4
5
6
7
8
<span id="itembutton"> <!--bouttons à afficher quand au moins & case est cochée -->
<a></a> //des liens...
<a></a>
</span>
<a href="#" id="ajaxrefresh"><span class="glyphicon glyphicon-refresh"></span></a> <!-- mon boutton rafraichir -->
<div id="ajaxlocation">
<!-- le tableau à actualiser avec des <input type="checkbox" name="select" value="allselected"> dedans -->
</div>

Et une partie du code JS :

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
var countChecked = function () { // la fonction qui compte les cases cochées
    var n = $('input:checked').length;
    if ($('#checkbox').is(':checked') == true) { // pour ne pas compter la case "séléctionner tout"
        n = n - 1;
    }
    if (n !== 0) {
        $('#checkcount').text(n + (n === 1 ? ' élément sélectionné' : ' éléments séléctionnés'));
        $('#itembutton').show('fast'); // on affiche un span
    } else {
        $('#checkcount').text('');
        $('#itembutton').hide();
        $('#checkbox').prop('checked', false);
    }
};
var ajaxrefresh = function (url) { // la fonction AJAX appelée par les clics sur certains liens
    $.ajax({
        url: url,
        cache: false,
        /*dataType: 'html',*/
        success: function (e) {
            $('#ajaxlocation').empty();
            $('#ajaxlocation').append(e); // on remplit 
            countChecked();
        },
        error: function (e) {
            alert('Ne marche pas');
        }
    })
};
// ce qui ne marche pas avec les cases chargées par AJAX
$('input[type=checkbox]').on('click', countChecked);
$('input[type=checkbox]').click(function () { 
    if ($('#checkbox').prop('checked') == false) {
        var nbc = $('input:checked').length;
        var nb = $('input').length;
        if (nbc === nb - 1) {
            $('#checkbox').prop('checked', true);
        }
    }
});

Pouvez-vous m'aider à comprendre ce qui ne fonctionne pas ? Merci d'avance !

[Bovino]

Tout ce qu'il faut savoir se trouve dans la doc...

[Daair]

Bonjour ! Oui j'avais parcouru la doc mais j'ai pas tout compris :/

du coup j'ai cherché des explications grâce le titre du paragraphe que vous m'avez fourni
Et tout est bien expliqué ici

J'ai remplacé :

Code javascript :

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

1
2
$('input[type=checkbox]').on('click', countChecked);

Par

Code javascript :

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

1
2
 
$('#ajaxlocation').on('click','input[type=checkbox]', countChecked);

Et effectivement ça fonctionne, merci. Cependant le langage technique et en anglophone de la doc n'est pas aisé a comprendre pour un débutant lambda, merci de bien admettre cela.

[Bovino]

Je pense être plutôt bien placé pour le comprendre puisque je prends régulièrement sur mon temps pour traduire des articles et des documentations à l'intention des visiteurs du site...
Néanmoins, il faut aussi comprendre que dans le domaine de l'informatique, ne pas maitriser l'anglais est un véritable handicap.