Änderungen von Dokument Wiederholende Elemente

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

...	...	@@ -6,36 +6,19 @@
6	6	$('[data-name="tfName"]')
7	7	{{/code}}
8	8
9		-Das Attribut //data-name// ist nachwievor noch vorhanden, aber es wird u.a. eine laufende Index angehangen und der neu generierte Name wäre somit für die Zeilen //tfName_dyn_div1_0, fName_dyn_div1_1, //usw. In diesem konkreten Beispiel befindet sich das Eingabefeld //tfName //innerhalb eines Containers //div1//. Der eigentliche Name ist nun im Attribut //data-org-name// hinterlegt. Damit wäre der allgemeine Selektor:
	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	10
11	11	{{code language="JavaScript"}}
12		-$('[data-org-name="tfName"]').on('change', function() {
13		- // Ihr Code folgt hier...
14		-});
	12	+$('[data-org-name="tfName"]')
15	15	{{/code}}
16	16
17		-(% class="wikigeneratedid" %)
18		-Alternativ kann auch die eigene CSS-Klasse des Elements verwendet werden, vorausgesetzt die Einstellung unter Formular > Fortgeschritten > [[Name als CSS-Klasse anfügen>>doc:Formcycle.Designer.Form.FormProperties||target="_blank"]] wurde angehakt:
	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:
19	19
20	20	{{code language="JavaScript"}}
21		-$('.tfName').on('change', function() {
22		- // Ihr Code folgt hier...
23		-});
24		-{{/code}}
25		-
26		-(% class="wikigeneratedid" %)
27		-Beim intitalen Aufruf des Selektors würde nun nur die erste Zeile selektiert und die entsprechenden Funktionen angehangen. Da zum Aufrufzeitpunkt nur die erste Zeile vorhanden ist.
28		-
29		-== Events und Funktionen eines Elements für Folgezeilen anwenden ==
30		-
31		-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:
32		-
33		-{{code language="JavaScript"}}
34	34	$('FORM.xm-form').on('addRow', doSomething);
35	35
36	36	function doSomething(event, data) {
37	37	var row = data.container;
38		-
39	39	$('[data-org-name="tfName"]', row).on('change', function() {
40	40	// Ihr Code folgt hier...
41	41	});
...	...	@@ -44,4 +44,4 @@
44	44	doSomething(null, {});
45	45	{{/code}}
46	46
47		-Hiermit wird nun sobald eine Zeile hinzugefügt wird, für die neue Zeile das entsprechende Event angehangen. Damit für die erste Zeile (falls Min Wdh. 1 ist) dies auch angewendet wird, muss die entsprechende function nochmal ausgeführt werden. In diesem Fall muss keine Zeile übergeben werden.
	30	+dd