Wiki source code of Wiederholende Elemente

Show last authors
1 {{content/}}
2
3 == Selection of a repeating element ==
4
5 If the Repeat setting is made for an element, then the name selector for the corresponding input elements also changes. By default, this has been data-name since V7. For example, for input field //tfName//:
6
7 {{code language="javascript"}}
8 $('[data-name="tfName"]')
9 {{/code}}
10
11 The attribute //data-name// is still existing, but a serial index is appended and the newly generated name would be for the lines //tfName_dyn_div1_0//, //fName_dyn_div1_1//, etc. In this concrete example, the input field //tfName //is inside a container //div1//. The actual name is now inside the attribute //data-org-name//. This would be the general selector:
12
13 {{code language="JavaScript"}}
14 $('[data-org-name="tfName"]').on('change', function() {
15 // Your code follows here...
16 });
17 {{/code}}
18
19 (% class="wikigeneratedid" %)
20 Alternatively, the element's own CSS class can be used, if the option under Form > Advanced > [[Add name as CSS class>>doc:Formcycle.Designer.Form.FormProperties||target="_blank"]] has been activated:
21
22 {{code language="JavaScript"}}
23 $('.tfName').on('change', function() {
24 // Your code follows here...
25 });
26 {{/code}}
27
28 (% class="wikigeneratedid" %)
29 When the selector is called intitally, only the first line would be selected and the corresponding functions appended. Because only the first line is available at the time of the call.
30
31 == Apply events and functions of an element for following lines ==
32
33 As soon as a new row is added, the previously stored actions, e.g. reaction to a change, are no longer defined and must now be added for the following rows. This is possible with the event //addRow//:
34
35 {{code language="JavaScript"}}
36 $('FORM.xm-form').on('addRow', doSomething);
37
38 function doSomething(event, data) {
39 var row = data.container;
40
41 $('[data-org-name="tfName"]', row).on('change', function() {
42 // Your code follows here...
43 });
44 }
45
46 doSomething(null, {});
47 {{/code}}
48
49 As soon as a row is added, the according event is attached to the new row. To ensure that this is also applied to the first row (if min. repetition is 1), the according function has to be executed again individually. In this case, no row element must be passed.