Wiederholende Elemente


Selektion eines wiederholenden Elements

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:

$('[data-name="tfName"]')

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:

$('[data-org-name="tfName"]').on('change', function() {
    // Ihr Code folgt hier...
});

Alternativ kann auch die eigene CSS-Klasse des Elements verwendet werden, vorrausgesetzt die Einstellung unter Formular > Fortgeschritten > Name als CSS-Klasse anfügen wurde angehakt:

$('.tfName').on('change', function() {
    // Ihr Code folgt hier...
});

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.

Events und Funktionen eines Elements für Folgezeilen anwenden

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:

$('FORM.xm-form').on('addRow', doSomething);

function doSomething(event, data) {
   var row = data.container;

    $('[data-org-name="tfName"]', row).on('change', function() {
       // Ihr Code folgt hier...
   });
}

doSomething(null, {});

Hiermit würde 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 einzeln ausgeführt werden. In diesem Fall muss keine Zeile übergeben werden.