Ein Objekt mit den Optionen, die übergeben werden können, wenn ein Formularelement mittels JQuery.dynamic wiederholend geschaltet wird.

Diese Funktionalität kann auch direkt über das Eigenschaftenfenster rechts im Designer aktiviert werden. JavaScript ist hierbei nur erforderlich, falls fortgeschrittene Einstellungen benutzt werden sollen, wie etwa DynamicOptions.addButton oder DynamicOptions.delButton.

Um zum Beispiel ein Element wiederholend zu schalten, wobei zwischen 1 und 6 Wiederholungen erlaubt sein sollen, kann wie folgt vorgegangen werden:

$("[data-name='fsAdresse']").dynamic({
  minSize: 1, // Mindestens 1 Adresse
  maxSize: 6 // Höchstens 6 Adressen
});

Hierarchy

  • DynamicOptions

Index

Properties

Optional addButton

addButton: JQuery | null

Eigenes Element, welches als Schaltfläche zum Hinzufügen neuer Elementewiederholungen benutzt werden soll. Hiermit kann der standardmäßig genutzte Plus-Knopf ersetzt werden.

Das Element, welches hier angegeben wird, wird von seiner Stelle im DOM entfernt und an die entsprechende Stelle unterhalb der Elementwiederholungen verschoben.

Hinweise:

  • Das gleiche Element darf nicht für verschiedenen Elementwiederholungen verwendet werden (da es sonst möglicherweise nur an einer Wiederholung zu sehen ist).
  • Um diese Option zu nutzen, muss die Elementwiederholung manuell per JavaScript aktiviert werden. Die Eigenschaft wiederholen im Designer darf nicht verwendet werden.

Zum Beispiel kann ein Schaltflächen-Element im Designer in das Formular eingefügt werden. Per CSS kann es dann nach Wunsch gestaltet werden. Wenn etwa die Schaltfläche btnTollerPlusKnopf heißt und an einem wiederholten Eingabefeld mit Namen tfMail benutzt werden soll, kann folgender Code genutzt werden: code:

$('[name="tfMail"]').dynamic({
  addButton: $('[name="btnTollerPlusKnopf"]'),
});
see

delButton

Optional delButton

delButton: JQuery | null

Eigenes Element, welches als Schaltfläche zum Löschen neuer Elementewiederholungen benutzt werden soll. Hiermit kann der standardmäßig genutzte Plus-Knopf ersetzt werden.

Das Element, welches hier angegeben wird, wird von seiner Stelle im DOM entfernt. Kopien von diesem Element werden dann an die entsprechenden Stellen unterhalb der einzelnen wiederholten Element angebracht.

Hinweise:

  • Das gleiche Element darf nicht für verschiedenen Elementwiederholungen verwendet werden (da es sonst möglicherweise nur an einer Wiederholung zu sehen ist).
  • Um diese Option zu nutzen, muss die Elementwiederholung manuell per JavaScript aktiviert werden. Die Eigenschaft wiederholen im Designer darf nicht verwendet werden.

Zum Beispiel kann ein Schaltflächen-Element im Designer in das Formular eingefügt werden. Per CSS kann es dann nach Wunsch gestaltet werden. Wenn etwa die Schaltfläche btnTollerMinusKnopf heißt und an einem wiederholten Eingabefeld mit Namen tfMail benutzt werden soll, kann folgender Code genutzt werden: code:

$('[name="tfMail"]').dynamic({
  addButton: $('[name="btnTollerMinusKnopf"]'),
});
see

addButton

Optional hideButtons

hideButtons: boolean | ("add" | "delete")[]

Diese Einstellung erlaubt es, die Hinzufügen- und Löschen-Knöpfe zu verbergen, sodass ein Nutzer die Anzahl der Wiederholungen nicht mehr ändern kann. Die erlaubten Werte sind:

  • false: All Knöpfe werden angezeigt. (Standard)
  • true: Alle Knöpfe (Hinzufügen/Löschen) werden versteckt.
  • Ein Array, welches die Knöpfe enthält, welche nicht angezeigt werden sollen. Entweder [] (alle Knöpfe angezeigt), ["add"], ["delete"] oder ["add", "delete"].

Optional maxSize

maxSize: number

Höchstanzahl an Wiederholungen. Standard: 10.

Optional minSize

minSize: number

Mindestanzahl an Wiederholungen. Standard: 1.

Optional trigger

trigger: JQuery | null

Wenn gegeben, wird der Wert dieses Elements genutzt, um die Anzahl an dynamisch erzeugten Elementen festzulegen.

Immer, wenn der Wert dieses Elements sich ändert, werden dynamische Elemente erzeugt oder entfernt, sodass sich die entsprechende Anzahl ergibt.

Beispielsweise kann hier ein Textfeld Anzahl Kinder festgelegt werden. Von einem dynamischen Container mit den Daten zum Kind werden dann immer so viele Kopien erzeugt, wie bei Anzahl Kinder eingegeben. Wenn etwa der Container den Namen divKind trägt und das Eingabefeld tfAnzahlKinder heißt, kann folgender Code genutzt werden:

$('[name="divKind"]').dynamic({
  trigger: $('[name="tfAnzahlKinder"]'),
});

Methods

Optional afterAdd

  • afterAdd(this: undefined, event: TriggeredEvent, item: JQuery): void
  • Optionale Rückrüffunktion, nachdem ein Element hinzugefügt wurde.

    Parameters

    • this: undefined
    • event: TriggeredEvent

      Ursprüngliches Ereigniss, welches das Hinzufügen auslöste.

    • item: JQuery

      Element, welches hinzugefügt wurde.

    Returns void

Optional afterDel

  • afterDel(this: undefined, event: TriggeredEvent, item: JQuery): void
  • Optionale Rückruffunktion, nachdem ein dynamisches Element entfernt wurde.

    Es ist zu beachten, dass hiermit auf das Element zugegriffen werden kann, nachdem es aus dem DOM entfernt wurde. Da es somit nicht mehr im DOM eingehängt ist, sind gewisse Aktionen mit dem Element nicht mehr durchführbar, etwa das Überprüfen der Sichbarkeit. Auf den Wert des Elements und seine Kinder kann weiterhin zugegriffen werden.

    Parameters

    • this: undefined
    • event: TriggeredEvent

      Ursprüngliches Ereigniss, welches das Entfernen auslöste.

    • item: JQuery

      Element, welches entfernt wurde.

    Returns void

Optional beforeAdd

  • beforeAdd(this: undefined, event: TriggeredEvent, item: JQuery): boolean | void
  • Optionale Rückrüffunktion, bevor ein Element hinzugefügt wird.

    Es ist zu beachten, dass hiermit auf das Element zugegriffen werden kann, bevor es in den DOM hinzugefügt wird. Da es somit noch nicht im DOM eingehängt ist, sind gewisse Aktionen mit dem Element noch nicht durchführbar, etwa das Überprüfen der Sichbarkeit. Auf den Wert des Elements und seine Kinder kann bereits zugegriffen werden.

    Parameters

    • this: undefined
    • event: TriggeredEvent

      Ursprüngliches Ereigniss, welches das Hinzufügen auslöste.

    • item: JQuery

      Element, welches hinzugefügt werden soll.

    Returns boolean | void

    false, wenn das Hinzufügen des Elements verhindert werden soll.

Optional beforeDel

  • beforeDel(this: undefined, event: TriggeredEvent, item: JQuery): boolean | void
  • Optionale Rückruffunktion, bevor ein dynamisches Element entfernt wird.

    Parameters

    • this: undefined
    • event: TriggeredEvent

      Ursprüngliches Ereigniss, welches das Entfernen auslöste.

    • item: JQuery

      Das Formularelement, welche entfernt werden soll.

    Returns boolean | void

    false, wenn das Entfernen des Elements verhindert werden soll.

Optional changeRowSize

  • changeRowSize(this: undefined, size: number, item: JQuery, added: boolean): void
  • Rückruffunktion, welche jedesmal aufgerufen wird, wenn die Anzahl dynamischer Elemente sich ändert.

    Parameters

    • this: undefined
    • size: number

      Aktuelle Anzahl an dynamischen Elementen.

    • item: JQuery

      Das Element, welches hinzugefügt oder entfernt wurde.

    • added: boolean

      true, wenn es sich um ein Hinzufügen handelt. false, wenn es sich um ein Entfernen handelt.

    Returns void