formcycle 8.3.6 - JavaScript für Formulare
    Bereite Suchindex vor...

    Schnittstelle DynamicOptions

    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
    });
    interface DynamicOptions {
        addButton?: JQuery<HTMLElement>;
        delButton?: JQuery<HTMLElement>;
        hideButtons?: boolean | ("add" | "delete")[];
        maxSize?: number;
        minSize?: number;
        trigger?: JQuery<HTMLElement>;
        afterAdd(this: undefined, event: TriggeredEvent, item: JQuery): void;
        afterDel(this: undefined, event: TriggeredEvent, item: JQuery): void;
        beforeAdd(
            this: undefined,
            event: TriggeredEvent,
            item: JQuery,
        ): boolean | void;
        beforeDel(
            this: undefined,
            event: TriggeredEvent,
            item: JQuery,
        ): boolean | void;
        changeRowSize(
            this: undefined,
            size: number,
            item: JQuery,
            added: boolean,
        ): void;
    }
    Index

    Eigenschaften

    addButton? delButton? hideButtons? maxSize? minSize? trigger?

    Methoden

    afterAdd? afterDel? beforeAdd? beforeDel? changeRowSize?

    Eigenschaften

    addButton?: JQuery<HTMLElement>

    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"]'),
    });

    delButton

    delButton?: JQuery<HTMLElement>

    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"]'),
    });

    addButton

    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"].
    maxSize?: number

    Höchstanzahl an Wiederholungen. Standard: 10.

    minSize?: number

    Mindestanzahl an Wiederholungen. Standard: 1.

    trigger?: JQuery<HTMLElement>

    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"]'),
    });

    Methoden

    • Optionale Rückrüffunktion, nachdem ein Element hinzugefügt wurde.

      Parameter

      • this: undefined
      • event: TriggeredEvent

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

      • item: JQuery

        Element, welches hinzugefügt wurde.

      Rückgabewert 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.

      Parameter

      • this: undefined
      • event: TriggeredEvent

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

      • item: JQuery

        Element, welches entfernt wurde.

      Rückgabewert 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.

      Parameter

      • this: undefined
      • event: TriggeredEvent

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

      • item: JQuery

        Element, welches hinzugefügt werden soll.

      Rückgabewert boolean | void

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

    • Optionale Rückruffunktion, bevor ein dynamisches Element entfernt wird.

      Parameter

      • this: undefined
      • event: TriggeredEvent

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

      • item: JQuery

        Das Formularelement, welche entfernt werden soll.

      Rückgabewert boolean | void

      false, wenn das Entfernen des Elements verhindert werden soll.

    • Rückruffunktion, welche jedesmal aufgerufen wird, wenn die Anzahl dynamischer Elemente sich ändert.

      Parameter

      • 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.

      Rückgabewert void

    Einstellungen

    Member-Sichtbarkeit

    Auf dieser Seite

    Eigenschaften
    Methoden