Wiki-Quellcode von Wiederholende Elemente

Zeige letzte Bearbeiter
1 == Selektion eines wiederholenden Elements ==
2
3 Wird bei einem Element die Einstellung Wiederholen vorgenommen, dann ändert sich dadurch auch der Namens-Selektor für die betroffenen Eingabeelemente. Standardmäßig ist dieser seit V7 //data-name//. Zum Beispiel für Eingabefeld //tfName//:
4
5 {{code language="javascript"}}
6 $('[data-name="tfName"]')
7 {{/code}}
8
9 Der Selektor //data-name// ist nachwievor noch vorhanden, aber es wird u.a. eine laufende ID angehangen und der Name wäre somit für die erste Zeile //tfName_dyn_div1_0//. In diesem konkreten Beispiel befindet sich das Eingabefeld //tfName //innerhalb eines Containers //div1//. Der eigentliche Name wird im Selektor //data-org-name// hinterlegt. Damit wäre der allgemeine Selektor nun:
10
11 {{code language="JavaScript"}}
12 $('[data-org-name="tfName"]')
13 {{/code}}
14
15 Beim intitalen Aufruf des Selektors würde nun nur die erste Zeile selektiert und die entsprechenden Funktionen ausgeführt. Da zum Aufrufzeitpunkt nur die erste Zeile vorhanden ist. Sobald eine neue Zeile hinzugefügt wird, sind die vorherig hinterlegten Aktionen, wie z.B. Reaktion auf ein change nicht mehr hinterlegt und müssten nun für die folgenden Zeilen hinzugefügt werden. Dies ist mittels dem Event //addRow //möglich:
16
17 {{code language="JavaScript"}}
18 $('FORM.xm-form').on('addRow', doSomething);
19
20 function doSomething(event, data) {
21 var row = data.container;
22 $('[data-org-name="tfName"]', row).on('change', function() {
23 // Ihr Code folgt hier...
24 });
25 }
26
27 doSomething(null, {});
28 {{/code}}
29
30 dd