Bonjour
je dois faire des modifications dans un code qui n'est pas le mien et Prototype est utilisé. Je n'ai jamais touché à Prototype donc c'est pour ça que je viens vous demander de l'aide parce que là je patauge
Voici mon problème (je simplifie pour que vous compreniez mieux ^^) :
> j'ai un tableau avec 5 colonnes : A, B, C, D et E
> j'ai une première ligne principale : 1.
> je peux déplier mon tableau et obtenir sous la ligne 1, 5 autres lignes : 2, 3, 4, 5 et 6.
Mon tableau n'est composé que de checkboxes donc par ligne j'ai : 5 checkboxes (une pour chaque colonne).
Le truc à faire : si je clique sur une checkbox de la ligne 1, toutes les checkboxes de la colonne correspondante devront se cocher (que le tableau soit déplié ou non).
Mon problème : ben pour la première colonne (A), ça fonctionne bien. Mais il ne se passe strictement rien sur mes autres colonnes
Mon code html :
Et mon js (je n'en mets qu'une partie car il me semble que c'est le code principal mais à voir s'il manque des choses ...) :
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 <div> <!-- Ligne principale forcément visible --> <div class="x-sub-block-header"> <label class="row-medium-label"><img src="clear.gif" alt="+" class="x-sub-block-button" />...</label> <span class="form-column"><input type="checkbox" name="tableau[1][A]" class="x-autocheck-A checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[1][B]" class="x-autocheck-B checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[1][C]" class="x-autocheck-C checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[1][D]" class="x-autocheck-D checkbox-input" value="1" /></span> ... </div> <!-- Lignes non visibles au départ dépliables --> <div class="x-sub-block"> <label class="row-medium-label secondary-label row-checker-label">...</label> <span class="form-column"><input type="checkbox" name="tableau[2][A]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[2][B]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[2][C]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[2][D]" class="validate-norule checkbox-input" value="1" /></span> ... <br /> <label class="row-medium-label secondary-label row-checker-label">...</label> <span class="form-column"><input type="checkbox" name="tableau[3][A]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[3][B]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[3][C]" class="validate-norule checkbox-input" value="1" /></span> <span class="form-column"><input type="checkbox" name="tableau[3][D]" class="validate-norule checkbox-input" value="1" /></span> ... <br />
et :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 form.select('.row-checker-label').each(Social.labelRowChecker.bindLabel); form.select('.x-sub-block-header').each(Social.togglableBlocks.bindHeader); if (form.hasClassName('...')) { $A(['A', 'B', 'C', 'D', 'E']).each(function (key) { var reg = new RegExp('\\[' + key + '\\]$'); form.select('.x-autocheck-' + key).each(function (elm) { Social.massChecker.bindElement(elm, reg, elm.up('div').next()); }); }); }
Donc voilà, en fait mon each(function(key) ...) s'arrête à ma première clé "A".
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 Social.massChecker = { bindElement: function (element, pattern, container) { var checkboxes = container.select('input[type="checkbox"]').findAll(function (item) { return item.name.match(pattern); }); $(element).observe('click', function() { checkboxes.each(function (item) { item.checked = element.checked; }); }); } }; Social.labelRowChecker = { bindLabel: function (label) { var checkboxes = Social.labelRowChecker.getCheckboxesAfterLabel(label); label.observe('click', function () { var val = null; checkboxes.each(function (cb) { if (val === null) { val = !cb.checked; } cb.checked = val; if (cb._onchange) { cb._onchange(); } }); }); }, getCheckboxesAfterLabel: function (label) { var checkboxes = [], cur = label.next(); while (cur && cur.tagName.toLowerCase() !== 'label') { if (cur.match('input[type=checkbox]')) { checkboxes.push(cur); } else { cur.select('input[type=checkbox]').each(function (i) { checkboxes.push(i); }); } cur = cur.next(); } return checkboxes; } }; Social.togglableBlocks = { bindHeader: function (header) { var block = header.next('.x-sub-block'), button = header.select('.x-sub-block-button')[0], checkboxes = header.select('input[type=checkbox]'), isChecked = function (e) { return e.checked; }, onCheckboxChange = function () { if (checkboxes.find(isChecked)) { block.show(); } else { block.hide(); } }; if (block) { block.hide(); button.observe('click', function (event) { event.stop(); header.toggleClassName('x-block-deployed'); block.toggle(); }); } } };
Que manque-t-il à mon code ?
Je vous remercie !
Partager