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

    Schnittstelle JQuery<TElement>

    interface JQuery<TElement = HTMLElement> {
        addStar(): JQuery;
        appointmentPicker(method?: "init"): JQuery;
        appointmentPicker(method: "getSlot"): Promise<IAppointmentSlot>;
        appointmentPicker(method: "getSlotSync"): IAppointmentSlot;
        appointmentPicker(
            method: "getSlots",
            monthYear?: Partial<IAppointmentLocalMonthYear>,
        ): Promise<IAppointmentMonthSlotData>;
        appointmentPicker(
            method: "getMonthYear",
        ): Promise<IAppointmentLocalMonthYear>;
        appointmentPicker(
            method: "setMonthYearDelta",
            monthYearDelta?: Partial<IAppointmentLocalMonthYear>,
        ): Promise<IAppointmentMonthSlotData[]>;
        appointmentPicker(
            method: "setMonthYear",
            monthYear?: Partial<IAppointmentLocalMonthYear>,
        ): Promise<IAppointmentMonthSlotData[]>;
        appointmentPicker(
            method: "setDate",
            date: Partial<IAppointmentLocalDate>,
        ): Promise<IAppointmentDaySlotData[]>;
        appointmentPicker(
            method: "setSlot",
            slot?: IAppointmentSlot,
            options?: IAppointmentSetSlotOptions,
        ): Promise<void>;
        appointmentPicker(method: "toggle", open?: boolean): Promise<boolean[]>;
        appointmentPicker(method: "isOpened"): Promise<boolean>;
        autocompleteDB(
            queryName: string,
            label?: string,
            onSelect?: (
                this: JQuery,
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string } },
            ) => void,
        ): JQuery;
        autocompleteDB(
            queryName: string,
            label: string,
            value: string,
            onSelect?: (
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string }; this: JQuery },
            ) => void,
            params?: SingleOrArrayLike<
                string
                | number
                | bigint
                | boolean
                | Node
                | JQuery<HTMLElement>,
            >,
        ): JQuery;
        autocompleteLDAP(
            queryName: string,
            label?: string,
            onSelect?: (
                this: JQuery,
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string } },
            ) => void,
        ): JQuery;
        autocompleteLDAP(
            queryName: string,
            label: string,
            value: string,
            onSelect?: (
                this: JQuery,
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string } },
            ) => void,
            params?: SingleOrArrayLike<
                string
                | number
                | bigint
                | boolean
                | Node
                | JQuery<HTMLElement>,
            >,
        ): JQuery;
        autocompleteQuery(
            url: string,
            queryName: string,
            label: string,
            onSelect?: (
                this: JQuery,
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string } },
            ) => void,
        ): JQuery;
        autocompleteQuery(
            url: string,
            queryName: string,
            label: string,
            value: string,
            onSelect?: (
                this: JQuery,
                event: TriggeredEvent,
                ui: { item: { optionLabel: string; optionValue: string } },
            ) => void,
            params?: SingleOrArrayLike<
                string
                | number
                | bigint
                | boolean
                | Node
                | JQuery<HTMLElement>,
            >,
        ): JQuery;
        autoNumeric(options?: Partial<ValueOrSupplier<InitOptions>>): JQuery;
        autoNumeric(method: "destroy"): JQuery;
        autoNumeric(method: "get"): string;
        autoNumeric(method: "getArray"): { name: string; value: string }[];
        autoNumeric(method: "getSettings"): InitOptions;
        autoNumeric(method: "getString"): string;
        autoNumeric(
            method: "init",
            options?: Partial<ValueOrSupplier<InitOptions>>,
        ): JQuery;
        autoNumeric(method: "set", number: string | number): JQuery;
        autoNumeric(
            method: "update",
            options: Partial<ValueOrSupplier<InitOptions>>,
        ): JQuery;
        clear(): JQuery;
        cob2auto(options?: Partial<Cob2AutoOptions>): JQuery;
        counter(settings?: Partial<JQueryCounter.Settings>): JQuery;
        dynamic(options?: Partial<DynamicOptions>): JQuery;
        dynamic(method: "addRow"): JQuery;
        dynamic(method: "removeRow", rowIndex?: number): JQuery;
        dynamic(method: "getRowSize"): number;
        dynamic(method: "setRowSize", rowSize: number): JQuery;
        error(errorMessage: string): JQuery;
        error(): JQuery;
        errorFunc(validatorFunction: (this: JQuery) => string): JQuery;
        getContainer(returnRepetitionContainer?: boolean): JQuery;
        getLabel(): JQuery<JQuery<HTMLElement>>;
        hasAttr(name: string): boolean;
        jSignature(options?: Partial<JSignature.Settings>): JQuery;
        jSignature(method: "init", options?: Partial<JSignature.Settings>): JQuery;
        jSignature(method: "clear" | "reset"): JQuery;
        jSignature(method: "destroy"): JQuery;
        jSignature(method: "getData", dataFormat?: "default"): string;
        jSignature(
            method: "getData",
            dataFormat: "native",
        ): { x: number[]; y: number[] }[];
        jSignature(
            method: "getData",
            dataFormat: "base30" | "image/jSignature;base30",
        ): string[];
        jSignature(
            method: "getData",
            dataFormat: "image/svg+xml" | "svg",
        ): ["image/svg+xml", string];
        jSignature(
            method: "getData",
            dataFormat: "svgbase64" | "image/svg+xml;base64",
        ): ["image/svg+xml;base64", string];
        jSignature(
            method: "getData",
            dataFormat: "image" | "image/png;base64",
        ): ["image/png;base64", string];
        jSignature(method: "getData", dataFormat: string): any;
        jSignature(
            method: "setData" | "importData",
            dataObject: { x: number[]; y: number[] }[],
            dataFormat: "native",
        ): JQuery;
        jSignature(
            method: "setData" | "importData",
            dataObject: string[],
            dataFormat: "base30" | "image/jSignature;base30",
        ): JQuery;
        jSignature<T extends string = string>(
            method: "setData" | "importData",
            dataObject: [T, any],
            dataFormat?: T,
        ): JQuery;
        jSignature(
            method: "setData" | "importData",
            dataObject: any,
            dataFormat: string,
        ): JQuery;
        jSignature(method: "listPlugins", category: "import" | "export"): string[];
        jSignature(method: "disable"): JQuery;
        jSignature(method: "enable"): JQuery;
        jSignature(method: "isModified"): boolean;
        jSignature(method: "getSettings"): JSignature.Settings;
        jSignature<K extends keyof JSignature.Settings>(
            method: "updateSettings",
            name: K,
            value: JSignature.Settings[K],
            applyImmediately?: boolean,
        ): JSignature.Settings[K];
        on<TType extends string, TData>(
            events: TType,
            selector: string,
            data: TData,
            handler: TypeEventHandler<TElement, TData, any, any, TType>,
        ): this;
        on<TType extends string, TData>(
            events: TType,
            selector: null,
            data: TData,
            handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>,
        ): this;
        on(
            events: string,
            selector: string,
            data: any,
            handler: (event: JQueryEventObject) => void,
        ): this;
        on<TType extends string>(
            events: TType,
            selector: string,
            handler: false | TypeEventHandler<TElement, undefined, any, any, TType>,
        ): this;
        on<TType extends string, TData>(
            events: TType,
            data: TData,
            handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>,
        ): this;
        on(
            events: string,
            selector_data: any,
            handler: (event: JQueryEventObject) => void,
        ): this;
        on<TType extends string>(
            events: TType,
            handler:
                | false
                | TypeEventHandler<TElement, undefined, TElement, TElement, TType>,
        ): this;
        on(events: string, handler: (event: JQueryEventObject) => void): this;
        on<TData>(
            events: TypeEventHandlers<TElement, TData, any, any>,
            selector: string,
            data: TData,
        ): this;
        on<TData>(
            events: TypeEventHandlers<TElement, TData, TElement, TElement>,
            selector: null,
            data: TData,
        ): this;
        on(
            events: TypeEventHandlers<TElement, undefined, any, any>,
            selector: string,
        ): this;
        on<TData>(
            events: TypeEventHandlers<TElement, TData, TElement, TElement>,
            data: TData,
        ): this;
        on(
            events: TypeEventHandlers<TElement, undefined, TElement, TElement>,
        ): this;
        on(
            event: "addRow",
            callback: (
                this: HTMLElement,
                event: TriggeredEvent,
                data: { container: JQuery },
            ) => void,
        ): JQuery;
        on(
            event: "delRow",
            callback: (
                this: HTMLElement,
                event: TriggeredEvent,
                data: { container: JQuery },
            ) => void,
        ): JQuery;
        on(event: "ready", callback: (this: HTMLElement) => void): JQuery;
        removeStar(): JQuery;
        replaceParams(): JQuery;
        setDataType(dataType: string): JQuery;
        setDataType(): JQuery;
        setError(errorMessage: string): JQuery;
        setError(): JQuery;
        setGroupReq(groupreq: string): JQuery;
        setGroupReq(): JQuery;
        setMaxCheckBox(maxCheckBox: number): JQuery;
        setMaxCheckBox(): JQuery;
        setMaxLength(maxLength: number): JQuery;
        setMaxLength(): JQuery;
        setMaxValue(maxValue: number): JQuery;
        setMaxValue(): JQuery;
        setMinCheckBox(minCheckBox: number): JQuery;
        setMinCheckBox(): JQuery;
        setMinLength(minLength: number): JQuery;
        setMinLength(): JQuery;
        setMinValue(minValue: number): JQuery;
        setMinValue(): JQuery;
        setMustEqual(name: string): JQuery;
        setMustEqual(): JQuery;
        setRequired(required: boolean): JQuery;
        setRequiredIf(name: string, test?: number, value?: string | number): JQuery;
        setRequiredIf(): JQuery;
        showStar(show: boolean): JQuery;
        sum(): number;
        validate(silent?: boolean): boolean;
        vattr(validationAttributeName: string): JQuery;
        vattr(validationAttributeName: string, value: unknown): JQuery;
        visible(show: boolean): JQuery;
        [n: number]: TElement;
    }

    Typenparameter

    • TElement = HTMLElement

    Hierarchie

    • Iterable<TElement>
      • JQuery

    Indexierbar

    • [n: number]: TElement
    Index

    Methoden

    addStar appointmentPicker autocompleteDB autocompleteLDAP autocompleteQuery autoNumeric clear cob2auto counter dynamic error errorFunc getContainer getLabel hasAttr jSignature on removeStar replaceParams setDataType setError setGroupReq setMaxCheckBox setMaxLength setMaxValue setMinCheckBox setMinLength setMinValue setMustEqual setRequired setRequiredIf showStar sum validate vattr visible

    Methoden

    • Fügt einen (standardmäßig kleinen roten) Stern an den Leittext eines Formularfelds hinzu. Dieser Stern gibt an, ob das Formularfeld ein Pflichtfeld ist.

      Derzeit wird hierzu ein SPAN-Element mit der Klasse required-star erzeugt, dies kann sich ändern:

      <span class="required-star">*</span>

      Zum Beispiel:

      // Fügt einen Stern zum Label des Formularfelds tf1 hinzu.
      $('input[name="tf1"]').addStar();

      Diese Funktion ändert nur das Aussehen, aber nicht, ob das Formularfeld ein Pflichtfeld ist. Um festzulegen, ob ein Feld ein Pflichtfeld ist, kann die Funktion setRequired verwendet werden.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Initialisiert einen Datums- und Uhrzeitpicker zur Auswahl eines Termins. Termine können im Backend konfiguriert werden. Ermöglicht es dem Benutzer, ein Datum (Jahr, Monat, Tag) und eine Uhrzeit (Stunde und Minute) auszuwählen.

      Parameter

      • Optionalmethod: "init"

      Rückgabewert JQuery

      this zum Verketten.

    • Ruft den aktuell ausgewählten Slot für das erste Element in der aktuellen Auswahl ab.

      Parameter

      • method: "getSlot"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      Rückgabewert Promise<IAppointmentSlot>

      Der aktuell ausgewählte Slot oder undefined, wenn kein Slot ausgewählt ist.

      Wenn die aktuelle Auswahl leer ist.

    • Ruft den aktuell ausgewählten Slot für das erste Element in der aktuellen Auswahl ab, und zwar auf synchrone Weise, d. h. durch direkte Rückgabe des Slots anstelle eines Versprechens. Aus Gründen der Konsistenz geben alle Methoden Versprechen zurück. Verwenden Sie diese Methode nur, wenn Sie synchron auf den Slot zugreifen müssen, z. B. bei der Arbeit mit APIs, die keine asynchronen Rückrufe unterstützen.

      Parameter

      • method: "getSlotSync"

        Die Methode, die für die Terminauswahl aufgerufen werden soll.

      Rückgabewert IAppointmentSlot

      Der aktuell ausgewählte Slot oder undefined, wenn kein Slot ausgewählt ist.

      Wenn die aktuelle Auswahl leer ist oder keinen Terminwähler enthält.

    • Ruft alle verfügbaren Slots für einen bestimmten Monat und ein bestimmtes Jahr für das erste Element in der Auswahl ab.

      Parameter

      • method: "getSlots"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • OptionalmonthYear: Partial<IAppointmentLocalMonthYear>

        Der Monat und das Jahr, für die die Slots abgerufen werden sollen. Wenn eine Eigenschaft nicht angegeben ist, wird der aktuell ausgewählte Monat und das Jahr verwendet.

      Rückgabewert Promise<IAppointmentMonthSlotData>

      Alle verfügbaren Slots für den angegebenen Monat und das angegebene Jahr. Das Versprechen wird abgelehnt, wenn die Slots nicht vom Server abgerufen werden konnten.

    • Ermittelt den aktuell ausgewählten Monat und das entsprechende Jahr des ersten Elements in der aktuellen Auswahl.

      Parameter

      • method: "getMonthYear"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      Rückgabewert Promise<IAppointmentLocalMonthYear>

      Der aktuell ausgewählte Monat und das Jahr oder undefined, wenn kein Monat oder Jahr ausgewählt ist. Das Versprechen wird abgelehnt, wenn die aktuelle Auswahl leer ist.

    • Wählt einen bestimmten Monat in einem bestimmten Jahr aus und zeigt alle Tage für den Monat für alle Elemente in der aktuellen Auswahl an. Wenn der Datumsauswahl geschlossen werden kann, sollte sie zuerst geöffnet werden.

      Parameter

      • method: "setMonthYearDelta"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • OptionalmonthYearDelta: Partial<IAppointmentLocalMonthYear>

        Der Monat und das Jahr, die relativ zum aktuell ausgewählten Monat und Jahr ausgewählt werden sollen. Der Monat wird standardmäßig auf 1 und das Jahr auf 0 gesetzt (z. B. zum nächsten Monat wechseln). Kann negativ sein.

      Rückgabewert Promise<IAppointmentMonthSlotData[]>

      Alle verfügbaren Slots für den ausgewählten Monat im angegebenen Jahr. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Monate und Jahre festgelegt wurden (oder abgelehnt, wenn einer nicht festgelegt werden konnte).

    • Wählt einen bestimmten Monat in einem bestimmten Jahr aus und zeigt alle Tage für den Monat für alle Elemente in der aktuellen Auswahl an. Wenn der Datumsauswahl geschlossen werden kann, sollte sie zuerst geöffnet werden.

      Parameter

      • method: "setMonthYear"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • OptionalmonthYear: Partial<IAppointmentLocalMonthYear>

        Tag zum Auswählen. Wenn eine Eigenschaft nicht angegeben ist, wird sie standardmäßig auf den aktuell ausgewählten Monat oder das Jahr gesetzt.

      Rückgabewert Promise<IAppointmentMonthSlotData[]>

      Alle verfügbaren Slots für den ausgewählten Monat im angegebenen Jahr. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Monate und Jahre festgelegt wurden (oder abgelehnt, wenn einer nicht festgelegt werden konnte).

    • Wählt einen bestimmten Tag aus und zeigt die verfügbaren Slots dieses Tages für alle Elemente in der aktuellen Auswahl an.

      Parameter

      • method: "setDate"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • date: Partial<IAppointmentLocalDate>

        Tag zum Auswählen. Wenn eine Eigenschaft nicht angegeben ist, wird sie standardmäßig auf das aktuell ausgewählte Datum gesetzt.

      Rückgabewert Promise<IAppointmentDaySlotData[]>

      Alle verfügbaren Slots für den ausgewählten Tag. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn alle Daten festgelegt wurden (und abgelehnt, wenn ein Datum nicht festgelegt werden konnte).

    • Ändert den aktuell ausgewählten Slot in den angegebenen Slot oder löscht den ausgewählten Slot, für alle Elemente in der aktuellen Auswahl.

      // Wählt den ersten Slot des aktuellen Monats aus, sofern vorhanden
      async function selectFirstSlot(app) {
        const {slots} = await app.appointmentPicker("getSlots");
        const firstSlot = Object.values(slots)?.[0]?.slots?.[0]?.slot;
        if (firstSlot) {
          await app.appointmentPicker("setSlot", firstSlot);
        }
      }
      selectFirstSlot($("[name='app1']"));

      Parameter

      • method: "setSlot"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • Optionalslot: IAppointmentSlot

        Der Slot, der festgelegt werden soll, oder undefined, um den ausgewählten Slot zu löschen.

      • Optionaloptions: IAppointmentSetSlotOptions

        Optionale Einstellungen, die beeinflussen, wie der Slot festgelegt wird.

      Rückgabewert Promise<void>

      Ein Versprechen, das aufgelöst wird, wenn die Slots festgelegt wurden, oder abgelehnt wird, wenn die Slots nicht festgelegt werden konnten.

    • Schließt oder öffnet den Terminauswahl für alle Elemente in der aktuellen Auswahl.

      Parameter

      • method: "toggle"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      • Optionalopen: boolean

        true, um den Terminauswahl zu öffnen, false, um ihn zu schließen, undefined, um ihn zu öffnen, wenn er geschlossen ist, und umgekehrt.

      Rückgabewert Promise<boolean[]>

      Ob der Terminauswahl jetzt geöffnet ist. Das Array enthält einen Eintrag für jedes Element in der aktuellen Auswahl. Das Versprechen wird aufgelöst, wenn der Terminauswahl umgeschaltet wurde, und abgelehnt, wenn die Auswahl leer ist oder der Terminauswahl nicht schließbar ist.

    • Überprüft, ob der Terminauswahl für das erste Element in der aktuellen Auswahl geöffnet oder geschlossen ist.

      Parameter

      • method: "isOpened"

        Die Methode, die für den Terminauswahl aufgerufen werden soll.

      Rückgabewert Promise<boolean>

      true, wenn der Terminauswahl geöffnet ist, oder false sonst. Gibt immer true zurück, wenn der Terminauswahl nicht schließbar ist. Das Versprechen wird abgelehnt, wenn die Auswahl leer ist.

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA formcycle konfiguriert werden.

      Der gegebene Datenbankspaltenname wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese Spalte. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

      Die Datenbankabfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung ausgeführt.

      Beispiel Länder

      Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage könnte etwa wie folgt aussehen:

      SELECT code, de FROM demo.countries where de like concat('%',?,'%');

      Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:

      $('[name="tfLand"]').autocompleteDB("LandNamen", "de");

      Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla, Antarktika, Antigua und Barbuda.

      Beispiel mit Rückruffunktion

      function codeSetzen(event, ui){
        $('[name=tfLandercode]').val(ui.item.code)
      }
      $('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);

      Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.

      Parameter

      • queryName: string

        Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA formcycle angelegt werden.

      • Optionallabel: string

        Name der Datenbankspalte. Rückfallwert is label. Diese wird sowohl zum Anzeigen genutzt als auch als der Wert, der beim Absenden des Formulars übertragen wird.

      • OptionalonSelect: (
            this: JQuery,
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string } },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einer Datenbankabfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Die Datenbankabfrage wird asynchron über AJAX ausgeführt. Datenbankabfragen können im Backend von XIMA formcycle konfiguriert werden.

      Es können zwei Datenbankspaltennamen angegeben werden. Die eine Spalte wird als Anzeigetext der Option genommen. Die andere Spalte wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Spalten. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

      Die Datenbankabfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Es müssen hierbei keine Anführungszeichen oder Maskierungszeichen verwendet werden. Die Datenbankabfrage wird als vorbereitete Anweisung ausgeführt. Enthält die Abfrage weitere Parameter, müssen für diese Werte an diese Funktion übergeben werden. Andernfalls schlägt die Abfrage fehl.

      Beispiel Länder

      Angenommen, es wurde im Backend eine Datenbankabfrage mit dem Namen LandNamen angelegt. Die Abfrage könnte etwa wie folgt aussehen:

      SELECT code, de FROM demo.countries where de like concat('%',?,'%');

      Um nun diese Abfrage mit dem Eingabefeld namens tfLand zu nutzen:

      $('[name="tfLand"]').autocompleteDB("LandNamen", "de");

      Wenn der Nutzer nun den Text An eingibt, liefert die Datenbankabfrage alle Länder zurück, die mit An beginnen. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Andorra, Angola, Anguilla, Antarktika, Antigua und Barbuda.

      Beispiel mit Rückruffunktion

      function codeSetzen(event, ui){
        $('[name=tfLandercode]').val(ui.item.code)
      }
      $('[name=tfLander]').autocompleteDB("LandNamen", "de", codeSetzen);

      Wie im oberen Beispiel wird die Autovervollständigung initialisert. Zusätzlich wird noch bei Auswahl einer Option aus der Länderliste aber noch eine weitere Funktion ausgeführt werden. In dieser Funktion wird nun auf das ausgewählte Element zugegriffen (ui.item) und der Wert der Spalte code ausgelesen (ui.item.code). Dieser Wert entspricht dem Wert aus der Spalte code aus der Datenbankabfrage der Länder. Schließlich wird dieser Ländercode in ein Textfeld mit dem Namen tfLandercode für die weitere Verarbeitung geschrieben.

      Parameter

      • queryName: string

        Name der Datenbankabfrage. Datenbankabfragen können im Backend von XIMA formcycle angelegt werden.

      • label: string

        Name der Datenbankspalte, die als Text genutzt wird, der dem Nutzer angezeigt wird.

      • value: string

        Name der Datenbankspalte, die als Wert genutzt wird, der beim Absenden des Formulars übertragen wird.

      • OptionalonSelect: (
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string }; this: JQuery },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      • Optionalparams: SingleOrArrayLike<
            string
            | number
            | bigint
            | boolean
            | Node
            | JQuery<HTMLElement>,
        >

        Weitere Parameter für die Datenbankabfrage. Kann ein einzelner Wert oder ein Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen. Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen, (4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP (Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA formcycle konfiguriert werden.

      Die gegebene LDAP-Eigenschaft wird als Anzeigetext der Option genommen; und auch als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die LDAP-Abfrage auf diese Eigenschaft. Somit wird die Menge der zu übertragenden Daten reduziert und der Vorgang beschleunigt.

      Die LDAP-Abfrage muss genau einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat.

      Beispiel

      Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage könnte etwa wie folgt aussehen:

      BaseDN: ou="employees", ou="company", dc="company", dc="com"
      Query : (userPrincipalName=*?*)

      Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:

      $('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full");

      Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt, Peter Fischer, Peter Weber.

      Parameter

      • queryName: string

        Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA formcycle angelegt werden.

      • Optionallabel: string

        Name eines LDAP-Attributs. Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als auch als der Wert, der beim Absenden des Formulars übertragen wird. Um eine verschachtelte Eigenschaft anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.

      • OptionalonSelect: (
            this: JQuery,
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string } },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus einem LDAP (Lightweight Directory Access Protocol) genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Die LDAP-Abfrage wird asynchron über AJAX ausgeführt. LDAP-Abfrage können im Backend von XIMA formcycle konfiguriert werden.

      Es können zwei LDAP-Eigenschaften angegeben werden. Die eine Eigenschaft wird als Anzeigetext der Option genommen. Die andere Eigenschaft wird verwendet als der Wert, der beim Absenden des Formulars mitgesendet wird. Diese Funktion beschränkt die Datenbankabfrage auf diese beiden Eigenschaften. Somit wird die Menge der zu übertragenden Daten reduziert. Dies beschleunigt den Vorgang bei großen Datenbanktabellen.

      Die LDAP-Abfrage muss wenigstens einen Parameter in Form eines Fragezeichens (?) besitzen. Dieser Parameter wird mit dem Text ersetzt, den der Nutzer bisher in das Eingabefeld eingegeben hat. Enthält die Abfrage weitere Parameter, müssen für diese Werte an diese Funktion übergeben werden. Andernfalls schlägt die Abfrage fehl.

      Beispiel

      Angenommen, es wurde im Backend eine LDAP-Abfrage mit dem Namen Angestellte angelegt. Die Abfrage könnte etwa wie folgt aussehen:

      BaseDN: ou="employees", ou="company", dc="company", dc="com"
      Query : (userPrincipalName=*?*)

      Um nun diese Abfrage mit dem Eingabefeld namens tfAngestellte zu nutzen:

      $('[name="tfAngestellte"]').autocompleteLDAP("Angestellte", "name.full", "accountName");

      Wenn der Nutzer nun den Text Peter eingibt, liefert die LDAP-Abfrage alle Angestellten zurück, deren Name Peter enthält. Diese werden dem Nutzer als mögliche Vorschläge angezeigt: Peter Müller, Peter Schmidt, Peter Fischer, Peter Weber. Angezeigt werden dem Nutzer Vor- und Nachname der Angestellten, beim Absenden wird der Name des jeweiligen Nutzerkontos übertragen.

      Parameter

      • queryName: string

        Name der LDAP-Abfrage. LDAP-Abfragen können im Backend von XIMA formcycle angelegt werden.

      • label: string

        Name eines LDAP-Attributs, dessen Wert dem Nutzer angezeigt wird. Um eine verschachtelte Eigenschaft anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.

      • value: string

        Name eines LDAP-Attributs, dessen Wert beim Absenden des Formulars übertragen wird. Um eine verschachtelte Eigenschaft anzugeben, werden die Bestandteile mit einem Punkt getrennt, z.B.: name.full oder location.city.

      • OptionalonSelect: (
            this: JQuery,
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string } },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      • Optionalparams: SingleOrArrayLike<
            string
            | number
            | bigint
            | boolean
            | Node
            | JQuery<HTMLElement>,
        >

        Weitere Parameter für die LDAP-Abfrage. Kann ein einzelner Wert oder ein Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen. Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen, (4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA formcycle erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.

      Parameter

      • url: string

        URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder XFC_METADATA.urls.dataquery_db.

      • queryName: string

        Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA formcycle erstellt werden.

      • label: string

        Name eines Felds für das Label und den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Rückfallwert is label. Dieses wird sowohl zum Anzeigen genutzt als als der Wert, der beim Absenden des Formulars übertragen wird.

      • OptionalonSelect: (
            this: JQuery,
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string } },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      Rückgabewert JQuery

    • Sollte nur auf Texteingabefelder angewendet werden.

      Aktiviert die Autovervollständigung für das Texteingabefeld. Die möglichen Optionen werden aus dem Resultat einer HTTP-Abfrage genommen. Dem Nutzer wird während des Tippens eine Liste der in Frage kommenden Optionen angezeigt.

      Dieser Methode erlaubt es, eine eigene URL anzugeben. Zum Ausführen von Datenbank- und LDAP-Abfragen, die im Backend von XIMA formcycle erstellt wurden, sollte JQuery.autocompleteDB beziehungsweise JQuery.autocompleteLDAP verwendet werden.

      Parameter

      • url: string

        URL, die für die Abfrage verwendet werden soll. Normalerweise sollten hierfür die URLs aus XFC_METADATA.urls verwendet werden, beispielsweise XFC_METADATA.urls.dataquery_ldap oder XFC_METADATA.urls.dataquery_db.

      • queryName: string

        Name der Abfrage. LDAP und Datenbankabfrage können im Backend von XIMA formcycle erstellt werden.

      • label: string

        Name des Felds für den Anzeigetext, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Dieser Wert wird dem Nutzer als Auswahloption angezeigt.

      • value: string

        Name des Felds für den Wert, wie etwa eine Datenbankspalte oder ein LDAP-Attribut. Der Wert wird beim Absenden des Formulars übertragen.

      • OptionalonSelect: (
            this: JQuery,
            event: TriggeredEvent,
            ui: { item: { optionLabel: string; optionValue: string } },
        ) => void

        Die Rückruffunktion, welche aufgerufen wird, wenn der Nutzer eine vorgeschlagene Option auswählt. Siehe auch die Dokumentation von jQueryUI zu autocomplete.

      • Optionalparams: SingleOrArrayLike<
            string
            | number
            | bigint
            | boolean
            | Node
            | JQuery<HTMLElement>,
        >

        Weitere Parameter für die Abfrage. Kann ein einzelner Wert oder ein Feld von Werten sein, es werden alle angegebenen Wert als Parameter übertragen. Bei undefined wird ein leerer Wert übertragen. Bei einem String wird der String selbst übertragen. Bei Zahlen und Wahrheitswerden wird die String-Repräsentation der Zahl beziehungsweise des Wahrheitswerts übertragen. Bei einer JQuery-Instanz werden die Werte aller HTML-Elemente in der JQuery-Selektion übertragen. Bei einem HTMLElement: (1) wenn es ein Checkbox- oder Radio-Input-Element ist, wird der Wert der Checkbox oder des Radiobuttons übertragen, falls selektiert, (2) wenn es ein File-Input-Element ist, werden die Namen aller Dateien übertragen oder der leere String, falls keine Datei ausgewählt ist, (3) bei anderen Input-Elementen wird der Wert des Input-Elements übertragen, (4) wenn es ein Select- oder Textarea-Element ist, wird der Wert via $.fn.val ermittelt und übertragen, (5) bei anderen Elementen wird nach Kinderelementen vom Type input, textarea und select gesucht und deren Werte übertragen.

      Rückgabewert JQuery

    • Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können. Diese Funktion sollte mit Texteingabefeldern genutzt werden.

      autoNumeric ist eine JavaScript-Bibliothek zur Eingabe von Zahlen in länderspezifischen Formaten. Diese Bibliothek ist bereits in formcycle eingebunden, sodass sie in Formularen direkt genutzt werden kann. Auf der offiziellen Webseite findet sich eine ausführliche Erklärung.

      Zuerst wird ein Eingabefeld mit jQuery selektiert, dann werden die Optionen an autoNumeric wie folgt übergeben:

      $("[name=tfGewicht]").autoNumeric("init", {
        aDec: ',', //Komma als Dezimalseparator
        aSep: '', // kein Trennzeichen für Tausender
        aSign: ' kg', // Einheit kg
        pSign: 's', // Einheit nach der Zahl
        vMin: 1, // Mindestwert 1
        vMax: 100, // Höchstwert 100
        mDec: 3, // Maximal 3 Dezimalstellen
        aPad: false // Es können auch weniger als 3 Dezimalstellen sein.
        // weitere Optionen...
      });

      Im Textfeld tfGewicht kann der Nutzer nun z.B. 3,99 eingeben, dies wird als 3,99 kg angezeigt. autoNumeric stellt sicher, dass es sich um eine gültige Zahl ist.

      Einige oft verwendete Einstellungen sind:

      • aDec: Dezimaltrennzeichen
      • aSep: Trennzeichen für Tausender
      • aSign: Einheit der Zahl, etwa EUR oder ¥.
      • pSign: Ob die Einheit am Ende (Wert s) oder am Anfang (Wert p) steht
      • vMin: Geringster erlaubter Zahlenwert
      • vMax: Größter erlaubter Zahlenwert
      • mDec: Höchstanzahl von Dezimalstellen
      • aPad: Ob immer auf die angegebene Anzahl von Dezimalstellen mit Nullen aufgefüllt wird

      Es sei angemerkt, dass die Optionen statt per JavaScript auch als HTML-Data-Attribute an dem Eingabefeld übergeben werden können:

      <input id="money-field"
          data-a-dec=","
          data-a-sign="kg"
          data-v-min="1"
          data-v-max="100"
          data-m-dec="3"
      >

      Parameter

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Beendet die Formattierung durch autoNumeric.

      Parameter

      • method: "destroy"

        Name der aufzurufenden Methode.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Methode, um den eigentlichen Zahlenwert eines Eingabefeldes zu erhalten, unabhängig der derzeitigen Formattierungseinstellungen.

      Parameter

      • method: "get"

        Name der aufzurufenden Methode.

      Rückgabewert string

      Der aktuelle Wert, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.

    • Nutzt die Methode serializeArray von jQuery, welche ein Feld mit Objekten zurückliefert und als JSON-String enkodiert werden kann.

      Parameter

      • method: "getArray"

        Name der aufzurufenden Methode.

      Rückgabewert { name: string; value: string }[]

      Die Werte, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.

    • Parameter

      • method: "getSettings"

        Name der aufzurufenden Methode.

      Rückgabewert InitOptions

      Die aktuellen Einstellungen von autoNumeric. Kann für die Entwicklung nützlich sein.

    • Nutzt die Methode serialize von jQuery, welche aus einer Menge von Formularelementen eine URL-enkodierte Zeichenkette erzeugt, die abgesendet werden kann. Diese Methode sorgt dafür, dass nicht die formattieren Werte genutzt werden, sondern die formatunabhängigen.

      Parameter

      • method: "getString"

        Name der aufzurufenden Methode.

      Rückgabewert string

      Die Werte, im Format nnnn.nn mit einem Punkt als Dezimatrennzeichen.

    • Initialisiert autoNumeric. Muss aufgerufen werden, bevor die anderen Methoden genutzt werden können.

      Parameter

      • method: "init"

        Name der aufzurufenden Methode.

      • Optionaloptions: Partial<ValueOrSupplier<InitOptions>>

        Optionale Einstellungen für autoNumeric.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt den Wert des Eingabefelds auf den gegebenen Wert. Der Wert wird anhand der aktuellen Formattierungseinstellungen entsprechend formattiert angezeigt.

      Parameter

      • method: "set"

        Name der aufzurufenden Methode.

      • number: string | number

        Die neue Zahl oder der neue Wert für das Eingabefeld.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Aktualisiert eine oder mehrere Formattierungseinstellungen.

      Parameter

      • method: "update"

        Name der aufzurufenden Methode.

      • options: Partial<ValueOrSupplier<InitOptions>>

        Neue zu setzende Formattierungseinstellungen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Löscht den Wert dieses Formularfeldes. Bei Texteingabefeldern wird der Text geleert, bei Auswahlfeldern alle ausgewählten Optionen deselektiert.

      Das Formularfeld wird nach dem Leeren nicht validiert. Falls es sich um ein Mussfeld handelt, wird daher keine Fehlermeldung angzeigt. Die Validierung kann mittels der Funktion validate angestoßen werden.

      // Setzt den Wert des Eingabefelds "tf1" auf "Hallo Welt!"
      // Dies geschieht normalerweise durch den Nutzer
      $('[name="tf1"').val("Hallo Welt!") ;

      // Löscht den eingebenen Text
      $('[name="tf1"').clear();

      // Validiert das Textfeld. Falls es ein Mussfeld ist, wird nun eine Fehlernachricht angezeigt.
      $('[name="tf1"').validate();

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Diese Funktion kann verwendet werden mit Auswahlfeldern, die als Combobox dargestellt werden.

      Im Designer kann die Autovervollständigung für Auswahlfelder auch direkt über die Oberfläche aktiviert werden. Rechts im Eigenschaftsbereich unter Grundeinstellungen kann dazu die entsprechende Checkbox aktiviert werden.

      Das Auswahlfeld wird in ein Texteingabefeld umgewandelt. Während der Nutzer nun Text eingibt, wird ihm automatisch eine Liste mit in Frage kommenden Möglichkeiten angezeigt. Derzeit wird für diese Funktionalität das jQueryUI-Widget autocomplete verwendet.

      // Wandelt das Auswahlfeld "sel1" in ein Eingabefeld mit Autovervollständigung um.
      $('[name="sel1"]').cob2auto();

      Parameter

      • Optionaloptions: Partial<Cob2AutoOptions>

        Optional Einstellungen für die Autovervollständigung.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Initialisiert das jQuery Counter-Plugin auf einem Element.

      Dieses jQuery-Plugin zum Zählen von Wörtern und Zeichen ermöglicht es Ihnen, Zeichen oder Wörter auf- oder abwärts zu zählen. Sie können ein Mindest- oder Höchstziel für den Zähler festlegen.

      Parameter

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

      Verwenden Sie stattdessen $.xutil.inputElementCounter. Es wird jetzt eine andere Bibliothek verwendet.

    • Schaltet ein Formularelement wiederholbar, sodass der Nutzer nun eine beliebige Anzahl an Kopien anlegen kann. Etwa kann ein E-Mail-Feld wiederholbar geschaltet werden, sodass der Nutzer eine oder mehrere E-Mail-Adressen eingeben kann.

      Um wiederholte erzeugte Elemente zu selektieren, sollte das Attribut data-org-name statt name verwendet werden.

      // Schaltet Formularfeld "tfMail" wiederholbar
      $("[name="tfMail"").dynamic();

      // Zugriff auf den Wert des ersten wiederholten Elements.
      $("[data-org-name="tfMail"").first().val();

      Jedes einzelne wiederholbare Element befindet sich in einem DIV-Container mit der Klasse dynamic-row. Dieser Container wird an die Rückruffunktionen afterAdd, afterDel, beforeAdd, beforeDel und changeRowSize übergeben.

      Falls Formularfelder über JavaScript initialisiert werden sollen, z.B. mit der Funktion cob2auto oder errorFunc, kann die Initialisierung erst erfolgen, nachdem das Formularfeld wiederholbar erzeugt wurde. Dies kann wie folgt geschehen:

      // Auswahl mit allen Personen wiederholbar schalten
      $('[name="selPersonen"]').dynamic({
        // Rückrüffunktion, wenn ein neues Element erzeugt wurde
        afterAdd: function(_, item) {
          // Das eigentliche Formularelement im DIV-Container selektieren
          var element = item.find('.XItem');
          // Nun kann das Element initialisiert werden, z.B.
          element.cob2auto();
        }
      });

      Elemente können auch direkt im Designer wiederholbar geschaltet werden. Dies geschieht unter den Grundeigeschaften des Eigenschaftsbereichs eines Elements. Dort können auch die Mindestzahl und Höchstzahl wiederholbarer Elemente sowie ein Auslösungselement (trigger) eingestellt werden. Für fortgeschrittene Anwendungsfälle können Elemente über JavaScript mit dieser Method wiederholbar geschaltet werden.

      Parameter

      • Optionaloptions: Partial<DynamicOptions>

        Optionen für das wiederholbare Formularfeld, z.B. um zu steuern, wieviele wiederholte erzeugte Elemente erlaubt sind oder um Rückruffunktionen zu definieren.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Für ein wiederholbares Element: Erhöht die Anzahl wiederholter Element um eins, erzeugt ein neues Formularelement. Dieses wird am Ende der bereits existierenden wiederholten Elemente hinzugefügt. Das Aufrufen dieser Methode hat die gleiche Auswirkung wie das Betätigen des Plus-Knopfs.

      // Formularelement "tfMail" wiederholbar schalten
      $("[data-name='tfMail']").dynamic();
      // ...
      // Ein weiteres E-Mail-Eingabefeld erzeugen
      $("[data-name='tfMail']").dynamic("addRow");

      Parameter

      • method: "addRow"

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Für ein wiederholbares Element: Entfernt ein wiederholtes Element. Gleiches Resultat wie das Betätigen des Minus-Knopfs am jeweiligen wiederholten Element.

      // Formularelement "tfMail" dynamisch schalten
      $("[data-name='tfMail']").dynamic();
      // ...
      // Das letzte E-Mail-Eingabefeld entfernen
      $("[data-name='tfMail']").dynamic("removeRow");

      Parameter

      • method: "removeRow"

        Name der aufzurufenden Methode.

      • OptionalrowIndex: number

        0-basierter Index des zu löschenden Elements. Wenn nicht übergeben, wird das letzte Element gelöscht.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Für ein wiederholbares Element: Ermittelt, wieviele wiederholte Elemente es aktuell gibt.

      // Formularelement "tfMail" wiederholbar schalten
      $("[data-name='tfMail']").dynamic({minSize: 3});

      // Anzahl der Wiederholung ist initial 3
      var repetitions = $("[data-name='tfMail']").dynamic("getRowSize");

      Parameter

      • method: "getRowSize"

      Rückgabewert number

      Die aktuelle Anzahl an wiederholten erzeugten Elementen.

    • Für ein wiederholbares Element: Erzeugt Formularelemente oder entfernt welche, sodass nun die übergebene Anzahl an wiederholten Formularelementen existiert.

      // Schalte Formularfeld "tfMail" wiederholbar
      $("[data-name='tfMail']").dynamic();

      // Setze die Anzahl an wiederholten Formularelementen auf 5.
      $("[data-name='tfMail']").dynamic("setRowSize", 5);

      Parameter

      • method: "setRowSize"

        Name der aufzurufenden Methode.

      • rowSize: number

        Die neu zu setzende Anzahl an wiederholten Formularfeldern.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Markiert das Formularfeld als ungültig (wie die Funktion setError) und zeigt eine Fehlermeldung an (wie die Funktion validate).

      Die Funktion setError markiert ein Formularfeld nur als ungültig, zeigt aber nicht sofort eine Fehlermeldung an. Die Fehlermeldung wird erst angezeigt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort anzuzeigen, kann die Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und zeigt sofort eine Fehlermeldung an.

      // Schreibt die Fehlermeldung "Ungültiger Wert" an das Element "tfIdNummer"
      $('[data-name=tfIdNummer').error("Ungültiger Wert");

      Parameter

      • errorMessage: string

        Die Fehlermeldung, die angzeigt werden soll. Darf nicht der leere String sein.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Markiert das Formularfeld als gültig und entfernt die Fehlermeldung. Marks the form field as valid and removes the error message.

      Die Funktion setError markiert ein Formularfeld nur als gültig, entfernt aber nicht sofort die Fehlermeldung. Die Fehlermeldung wird erst entfernt, wenn der Nutzer mit dem Formularfeld interagiert (blur oder change) beziehungsweise versucht, das Formular abzuschicken. Um die Fehlermeldung sofort zu entfernen, kann die Funktion validate benutzt werden. Diese Funktion erleichert dieses Vorgehen und entfernt sofort die Fehlermeldung an.

      // Entfernt die Fehlermeldung vom Element "tfIdNummer"
      $('[name=tfIdNummer').error();

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Fügt diesem Formularfeld eine Validierungsfunktion hinzu. Die Validierungsfunktion kann benutzt werden, um eigene Logik für die Validierung zu implementieren.

      Die Validierungsfunktion wird jedesmal aufgerufen, wenn sich der Wert des Formularfelds geändert hat oder eine Validierung erforderlich ist, etwa beim Absenden des Formulars.

      Sind mehere Validierungsfunktionen festgelegt, so werden alle Validierungsfunktionen bei der Validierung aufgerufen und alle Fehlermeldungen angezeigt.

      Es ist zu beachten, dass zwischen Mussfelder und Datenvalidierung unterschieden wird. Hat ein Mussfeld keinen Wert, ist das Formularfeld ungültig. Erst wenn in einem Mussfeld ein Wert eingetragen wurde, wird die Datenvalidierung gestartet und geprüft, ob die eingegebenen Daten gültig sind. Die Validierungsfunktion wird erst während der Datenvalidierung aufgerufen. Hat ein Mussfeld also keinen Wert, wird immer eine Fehlermeldung angezeigt, unabhängig der festgelegten Validierungsfunktionen.

      // Der Datentyp des Felds 'tfEmail' wurde auf 'E-Mail' gesetzt.
      // Wir fügen eine zusätzliche Bedingung hinzu: Der Host muss entweder 'example.com' oder 'example.de' lauten.
      $('[name="tfEmail"]').errorFunc(function() {
        var value = String(this.val() || "");
        var hostIndex = value.indexOf("@");
        var host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
        if (host === "example.com" || host === "example.de") return "";
        return "Der Host muss entweder example.de oder example.com lauten!";
      });

      Parameter

      • validatorFunction: (this: JQuery) => string

        Validierungsfunktion, welche während der Validierung aufgerufen wird. Ist das Formularfeld ungültig, muss diese Validierungsfunktion eine nichtleere Zeichenkette mit der Fehlermeldung zurückgegben. Ist das Formularfeld gültig, muss diese Validierungsfunktion die leere Zeichnkette zurückgeben.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten. Diese befinden sich alle in einem Container-Element. Diese Funktion liefert dieses Container-Element zurück.

      Container-Elemente sind DIV-Elemente mit der CSS-Klasse xm-item-div. Zudem hat ein Container-Element das Attribute xn mit dem Namen des Formularelements.

      Für ein Texteingabeld namens tfName liefert $("[data-name='tfName']") etwa das folgende HTML-Element zurück

      <input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">

      Und das Suchen des Containers mittels $("[data-name='tfName']").getContainer() liefert etwa folgendes HTML-Element:

      <div class="xm-item-div label-top CXTextField ctfName" cn="XTextField" data-xi="xi-tf-8" data-xn="tfName">
        ...
        <input id="xi-tf-16" name="tfName" class="XItem XTextField" title type="text">
        ...
      </div>

      Verhalten für wiederholte Elemente

      Ein wiederholtes Formularelement ist ein Element, von dem ein Nutzer eine oder mehrere Kopien erstellen kann. Wiederholte Felder werden für die Eingabe von dynamischen Datensätzen verwendet, etwa für die Adressdaten mehrerer Personen. Das Element mit der Klasse xm-item-div ist der Container, welcher alle dynamisch erzeugten Elemente enthält. Jedes erzeugte dynamische Element wiederum befindet sich in einem Container mit der Klasse dynamic-row. Standardmäßig liefert diese Methode immer diesen xm-item-div Container zurück. Ist das optional boolesche Flag returnRepetitionContainer auf true gesetzt, wird stattdessen die dynamic-row zurückgegeben. Falls beispielsweise das Textfeld mit dem Namen tfMail wiederholt ist, dann selektiert $("[data-org-name='tfMail']).eq(1) das zweite dynamisch erzeugte Textfeld und $("[data-org-name='tfMail']).eq(1).getContainer() dementsprechend die zweite dynamic-row innerhalb des xm-item-div.

      <div class="xm-item-div label-top CXTextField ctfMail" data-cn="XTextField"
        data-xi="xi-tf-2" data-xn="tfMail" id="xi-tf-2-xc" data-name="tfMail">

        <div data-dynamic-row="0" class="dynamic-row" id="xi-tf-8-xc_c_0">
          <input id="xi-tf-8" name="tfMail_dyn_tfMail_0" class="XItem XTextField" type="text">
        </div>

        <div data-dynamic-row="1" class="dynamic-row" id="xi-tf-8-xc_c_1">
          <input id="xi-tf-8" name="tfMail_dyn_tfMail_1" class="XItem XTextField" type="text">
        </div>

        <!-- ... -->

      </div>

      Parameter

      • OptionalreturnRepetitionContainer: boolean

        true um den Container einer Elementwiederholung zurückzugeben (falls das selektierte Element ein wiederholtes Element ist), false um immer den Hauptcontainer mit der Klasse xm-item-div zurückzugeben. Wenn nicht angegeben, ist der Standardwert false.

      Rückgabewert JQuery

      Das Container-Element des Formularfelds. Wenn es sich nicht um ein Formularfeld handelt und somit kein Container gefunden werden kann, eine leere JQuery-Instanz.

    • Jedes Formularfeld besteht aus mehreren Elementen, etwa Leittexten (label), Eingabefeldern und Fehlertexten. Formularfelder zum Eingeben von Daten wie Texteingabefelder oder Auswahlfelder haben einen Leittext. Diese Funktion liefert dieses Leittext-Element zurück.

      // Liefert vom Eingabefeld "tfMail" den Text des Labels zurück, z.B. "Ihre E-Mail-Addresse"
      $("[data-name='tfMail']").getLabel().text();

      // Liefert von einem wiederholten Element "tfAngestellte" den Text des
      // zweiten Labels zurück, z.B. "Name des 2. Angestellten"
      $($('[data-org-name=tfAngestellte]').get(1)).getLabel().text();

      Rückgabewert JQuery<JQuery<HTMLElement>>

      Ein Feld mit allen Leittext-Elementen (label) der Formularfelder. Wenn ein Formuarfeld keine Leittext hat, wird kein Eintrag in das Feld geschrieben.

    • Prüft, ob an dem Element ein HTML-Attribut mit dem gegebenen Namen existiert.

      Falls etwa folgendes HTML vorliegt:

      <input name="tfMail" placeholder></input>

      Dann verhält sich diese Funktion wie folgt:

      $("[data-name='tfMail']").hasAttr("name"); // true
      $("[data-name='tfMail']").hasAttr("placeholder"); // true
      $("[data-name='tfMail']").hasAttr("id"); // false

      Parameter

      • name: string

        Names des zu prüfenden HTML-Attributs.

      Rückgabewert boolean

      Ob das Element ein Attribut mit dem gegebenen Name hat.

    • Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm eingeben.

      Parameter

      • Optionaloptions: Partial<JSignature.Settings>

        Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Wandelt ein Eingabefeld (input oder textarea) in ein jSignature-Feld um. Hier kann der Nutzer dann eine handschriftliche Unterschrift mit der Maus oder einem Stift auf einem berührungsempfindlichen Bildschirm eingeben.

      Parameter

      • method: "init"

        Name der aufzurufenden Methode.

      • Optionaloptions: Partial<JSignature.Settings>

        Optionale Einstellungen für jSignature, etwa Strichfarbe oder Strichbreite.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Leert das Unterschriftenfeld und den Datenspeicher. Stellt auch die Unterschriftenlinie und andere Dekorelemente wieder her.

      Parameter

      • method: "clear" | "reset"

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Zerstört diese jSignature-Instanz und stellt das ursprüngliche Eingabefeld wieder her.

      Parameter

      • method: "destroy"

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Das Datenformat ist hierbei das von Canvas nativ genutzte Format - eine Daten-URL mit Base64-enkodierten PNG-Bitmap-Informationen und sieht wie folgt aus: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j....

      Parameter

      • method: "getData"
      • OptionaldataFormat: "default"

      Rückgabewert string

      Die aktuelle Signatur als Daten-URL.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Das Datenformat ist hierbei das von jSignature verwendete Format zum Zeichnen von mehrere Strichen, also einem Feld aus Objekten mit den Eigenschaften x und y, welche beide ein Feld aus Zahlen sind. Diese Datenstruktur wurde mit dem Ziel gewählt, Geschwindigkeit und Effzienz beim Sammeln von Strichdatenpunkten zu erreichen. Auch wenn es sich um eine weniger intuitive Datenstruktur handelt, so erlaubt sie (a) schnell neue Koordinaten einzufügen, ohne für jede Koordinate ein neues Objekt erzeugen zu müssen und (b) eine einfache Iteration über die Daten mittels Schleifen. Diese Datenstruktur könnte in einen JSON-String umgewandelt werden und zum Speichern verwendet werden, allerdings wird davon abgeraten, da es sich um ein internes Format handelt, welche sich in künftigen Versionen ändern kann. Für ein direktes, kompaktes Format, welches ähnlich zu JSON ist, wird base30 empfohlen. Dieses native Datenformat ist gut zum Ermitteln von statistischen Informatioen (Strichanzahl, Position der Unterschrift auf dem Canvas) und um Striche zu editieren (wie etwa zum Rückgängigmachen des letzten gezeichneten Strichs).

      Parameter

      • method: "getData"
      • dataFormat: "native"

      Rückgabewert { x: number[]; y: number[] }[]

      Die aktuelle Signatur.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Dieses Datenformat ist ein an Base64 orientiertes komprimiertes Format mit dem Ziele hoher Kompaktheit und nativer URL-Kompatibilität. Es handelt sich um eine native Datenstruktur aller Vektoren, welche in eine kompakte Zeichenkettendarstellung umgewandelt wird. Eine mögliche Weise zum Übertragen der Daten auf den Server besteht im Format JSONP, welches in der Praxis eine URL-Längenbeschränkung von 2000 Zeichen aufweist (falls IE unterstützt wird). Dieses Kompressionsformat ist nativ URL-kompatibel und benötigt keine zusätzliche Maskierung von Sonderzeichen und benötigt zugleich auf für komplexe Unterschriften nicht mehr als 2000 Zeichen.

      Parameter

      • method: "getData"
      • dataFormat: "base30" | "image/jSignature;base30"

      Rückgabewert string[]

      Die aktuelle Signatur.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Dieses Datenformat erzeugt aus der aktuellen Signatur ein SVG-Bild (SVG XML text). Alle Striche werden von Rauschen befreit und geglättet. Dieses Format stellt einen Kompromiss zwischen "einfach zum Anschauen" und "hochgradig skalierbar" dar. Die meisten aktuellen Browser unterstützen direkt das Anschauen von SVG-Bildern und zudem kann dieses Format grenzenlos skaliert und für den Druck aufbereitet werden. Die Daten liegen als schlichter Text (plain text) vor und können daher einfach übertragen und gespeichert werden.

      Parameter

      • method: "getData"
      • dataFormat: "image/svg+xml" | "svg"

      Rückgabewert ["image/svg+xml", string]

      Die aktuelle Signatur.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Ahnliche Funktionalität wie das Datenformat "svg", mit dem Unterschied, dass der SVG XML text als Base64 komprimiert wird. Obwohl die meisten Browser nun über native Base64-Enkodierer verfügen (btoa()), gibt es einige Browser wie den Internet Explorer, welche dies darüber nicht verfügen. Für solche Browser wird daher eine eigene software-seitige Implementierung von btoa() benutzt, falls diese Funktion nicht zur Verfügung steht.

      Parameter

      • method: "getData"
      • dataFormat: "svgbase64" | "image/svg+xml;base64"

      Rückgabewert ["image/svg+xml;base64", string]

      Die aktuelle Signatur.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Dieses Format ist ähnlich dem Format native, aber in seine Bestandteile zerlegt, sodass der Mime-Type und die Daten separate Einträge in einer Feldstruktur sind, ähnlich wie beim Format svg.

      Das Datenformat sieht beispielsweise wie folgt aus:

      ["image/png;base64","i123i412i341jijalsdfjijl234123i..."]

      Da der Bildexport vom Browser-Support abhängt und mehr Daten als notwendig zurückliefert, wird dieses Format nur zum Testen und zur Entwicklung empfohlen.

      Parameter

      • method: "getData"
      • dataFormat: "image" | "image/png;base64"

        Name des Datenformats der zurückgelieferten Daten.

      Rückgabewert ["image/png;base64", string]

      Die aktuelle Signatur.

    • Liefert die aktuellen Strichdaten der gezeichneten Unterschrift zurück.

      Parameter

      • method: "getData"

        Name der aufzurufenden Methode.

      • dataFormat: string

        Datenformat, in dem die zurückgelieferten Daten formatiert sein sollen.

      Rückgabewert any

      Die aktuelle Signatur.

    • Parameter

      • method: "setData" | "importData"

        Name der aufzurufenden Methode.

      • dataObject: { x: number[]; y: number[] }[]

        Daten der Unterschrift, die gesetzt werden soll.

      • dataFormat: "native"

        Name des Datenformats der zurückgelieferten Daten.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Parameter

      • method: "setData" | "importData"

        Name der aufzurufenden Methode.

      • dataObject: string[]

        Daten der Unterschrift, die gesetzt werden soll.

      • dataFormat: "base30" | "image/jSignature;base30"

        Name des Datenformats der zurückgelieferten Daten.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Typenparameter

      • T extends string = string

      Parameter

      • method: "setData" | "importData"

        Name der aufzurufenden Methode.

      • dataObject: [T, any]

        Daten der Unterschrift, die gesetzt werden soll. Das Datenformat wird aus dem ersten Element des Felds genommen. Das zweite Element stellt die eigentlichen Daten dar.

      • OptionaldataFormat: T

        Optional. Wenn gegeben, muss es mit dem ersten Eintrag des Felds des Parameters dataObject übereinstimmen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Parameter

      • method: "setData" | "importData"

        Name der aufzurufenden Methode.

      • dataObject: any

        Daten der Unterschrift, die gesetzt werden soll. Muss in dem angegebenen Format formattiert sein.

      • dataFormat: string

        Datenformat der Daten.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Listet alle Plugin auf, die zum Exportieren beziehungszweise zum Importieren der Unterschriftsdaten zur Verfügung stehen.

      Parameter

      • method: "listPlugins"

        Name der aufzurufenden Methode.

      • category: "import" | "export"

        Kategorie der zurückzulieferenden Plugins, entweder import oder export.

      Rückgabewert string[]

      Eine Liste mit allen Plugins der gegebenen Kategorie.

    • Markiert das Canvas als schreibgeschützt und deaktiviert die jSignature-Schalftflächen.

      Parameter

      • method: "disable"

        Name der aufzurufenden Methode.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Hebt den Schreibschutzt des Canvas auf und aktiviert die jSignature-Schalftflächen.

      Parameter

      • method: "enable"

        Name der aufzurufenden Methode.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Prüft, ob seit der Initialisierung eine Eingabe am Unterschriftenfeld getätigt wurden.

      Parameter

      • method: "isModified"

        Name der aufzurufenden Methode.

      Rückgabewert boolean

      true, falls die Unterschrift geändert wurde, andernfalls false.

    • Parameter

      • method: "getSettings"

        Name der aufzurufenden Methode.

      Rückgabewert JSignature.Settings

      Die derzeitigen Einstellungen der jSignature-Instanz.

    • Setzt einen anderen Wert für die gegebene Einstellungen.

      Dies ermöglicht es etwa, Einstellungen wie die Strichbreite oder die Linienfarbe zu ändern. Das dritte Argument legt fest, ob die Unterschrift sofort mit der Einstellungen aktualisiert werden soll. Das sofortige Anwenden der Einstellungen funktioniert derzeit nur mit einigen Einstellungen wie derFarbe.

      Typenparameter

      Parameter

      • method: "updateSettings"

        Name der aufzurufenden Methode.

      • name: K

        Name der zu änderenden Einstellung.

      • value: JSignature.Settings[K]

        Neuer Wert der Einstellung.

      • OptionalapplyImmediately: boolean

        Wenn true, wird die geänderte Einstellungen sofort auf die aktuelle Unterschrift angewendet. Wenn false, wird der neue Wert der Einstellung nur auf künftigen Striche angewendet.

      Rückgabewert JSignature.Settings[K]

      Der neue Wert der Einstellung.

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TType extends string
      • TData

      Parameter

      • events: TType

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • selector: string

        A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

      • data: TData

        Data to be passed to the handler in event.data when an event is triggered.

      • handler: TypeEventHandler<TElement, TData, any, any, TType>

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TType extends string
      • TData

      Parameter

      • events: TType

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • selector: null

        A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

      • data: TData

        Data to be passed to the handler in event.data when an event is triggered.

      • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Parameter

      • events: string

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • selector: string

        A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

      • data: any

        Data to be passed to the handler in event.data when an event is triggered.

      • handler: (event: JQueryEventObject) => void

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      Deprecated. Use JQuery.Event in place of JQueryEventObject.

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TType extends string

      Parameter

      • events: TType

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • selector: string

        A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

      • handler: false | TypeEventHandler<TElement, undefined, any, any, TType>

        A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      Example: Click any paragraph to add another after it. Note that .on() allows a click event on any paragraph--even new ones--since the event is handled by the ever-present body element after it bubbles to there.

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>on demo</title>
      <style>
      p {
      background: yellow;
      font-weight: bold;
      cursor: pointer;
      padding: 5px;
      }
      p.over {
      background: #ccc;
      }
      span {
      color: red;
      }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      </head>
      <body>

      <p>Click me!</p>
      <span></span>

      <script>
      var count = 0;
      $( "body" ).on( "click", "p", function() {
      $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
      });
      </script>

      </body>
      </html>

      Example: Display each paragraph&#39;s text in an alert box whenever it is clicked:

      $( "body" ).on( "click", "p", function() {
      alert( $( this ).text() );
      });

      $( "body" ).on( "click", "a", function( event ) {
      event.preventDefault();
      });

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TType extends string
      • TData

      Parameter

      • events: TType

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • data: TData

        Data to be passed to the handler in event.data when an event is triggered.

      • handler: TypeEventHandler<TElement, TData, TElement, TElement, TType>

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      function myHandler( event ) {
      alert( event.data.foo );
      }
      $( "p" ).on( "click", { foo: "bar" }, myHandler );

    • Attach an event handler function for one or more events to the selected elements.

      Parameter

      • events: string

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • selector_data: any

        @param selector_data

        • selector — A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
        • data — Data to be passed to the handler in event.data when an event is triggered.
      • handler: (event: JQueryEventObject) => void

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      Deprecated. Use JQuery.Event in place of JQueryEventObject.

      Example: Click any paragraph to add another after it. Note that .on() allows a click event on any paragraph--even new ones--since the event is handled by the ever-present body element after it bubbles to there.

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>on demo</title>
      <style>
      p {
      background: yellow;
      font-weight: bold;
      cursor: pointer;
      padding: 5px;
      }
      p.over {
      background: #ccc;
      }
      span {
      color: red;
      }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      </head>
      <body>

      <p>Click me!</p>
      <span></span>

      <script>
      var count = 0;
      $( "body" ).on( "click", "p", function() {
      $( this ).after( "<p>Another paragraph! " + (++count) + "</p>" );
      });
      </script>

      </body>
      </html>

      Example: Display each paragraph&#39;s text in an alert box whenever it is clicked:

      $( "body" ).on( "click", "p", function() {
      alert( $( this ).text() );
      });

      $( "body" ).on( "click", "a", function( event ) {
      event.preventDefault();
      });

      function myHandler( event ) {
      alert( event.data.foo );
      }
      $( "p" ).on( "click", { foo: "bar" }, myHandler );

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TType extends string

      Parameter

      • events: TType

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • handler: false | TypeEventHandler<TElement, undefined, TElement, TElement, TType>

        A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      Example: Display a paragraph&#39;s text in an alert when it is clicked:

      $( "p" ).on( "click", function() {
      alert( $( this ).text() );
      });

      $( "form" ).on( "submit", false );

      $( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      });

      $( "form" ).on( "submit", function( event ) {
      event.stopPropagation();
      });

      $( "div" ).on( "click", function( event, person ) {
      alert( "Hello, " + person.name );
      });
      $( "div" ).trigger( "click", { name: "Jim" } );

      $( "div" ).on( "click", function( event, salutation, name ) {
      alert( salutation + ", " + name );
      });
      $( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>on demo</title>
      <style>
      p {
      color: red;
      }
      span {
      color: blue;
      }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      </head>
      <body>

      <p>Has an attached custom event.</p>
      <button>Trigger custom event</button>
      <span style="display:none;"></span>

      <script>
      $( "p" ).on( "myCustomEvent", function( event, myName ) {
      $( this ).text( myName + ", hi there!" );
      $( "span" )
      .stop()
      .css( "opacity", 1 )
      .text( "myName = " + myName )
      .fadeIn( 30 )
      .fadeOut( 1000 );
      });
      $( "button" ).click(function () {
      $( "p" ).trigger( "myCustomEvent", [ "John" ] );
      });
      </script>

      </body>
      </html>

      $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
      $( this ).toggleClass( "active" );
      });

    • Attach an event handler function for one or more events to the selected elements.

      Parameter

      • events: string

        One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      • handler: (event: JQueryEventObject) => void

        A function to execute when the event is triggered.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      Deprecated. Use JQuery.Event in place of JQueryEventObject.

      Example: Display a paragraph&#39;s text in an alert when it is clicked:

      $( "p" ).on( "click", function() {
      alert( $( this ).text() );
      });

      $( "form" ).on( "submit", false );

      $( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      });

      $( "form" ).on( "submit", function( event ) {
      event.stopPropagation();
      });

      $( "div" ).on( "click", function( event, person ) {
      alert( "Hello, " + person.name );
      });
      $( "div" ).trigger( "click", { name: "Jim" } );

      $( "div" ).on( "click", function( event, salutation, name ) {
      alert( salutation + ", " + name );
      });
      $( "div" ).trigger( "click", [ "Goodbye", "Jim" ] );

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>on demo</title>
      <style>
      p {
      color: red;
      }
      span {
      color: blue;
      }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      </head>
      <body>

      <p>Has an attached custom event.</p>
      <button>Trigger custom event</button>
      <span style="display:none;"></span>

      <script>
      $( "p" ).on( "myCustomEvent", function( event, myName ) {
      $( this ).text( myName + ", hi there!" );
      $( "span" )
      .stop()
      .css( "opacity", 1 )
      .text( "myName = " + myName )
      .fadeIn( 30 )
      .fadeOut( 1000 );
      });
      $( "button" ).click(function () {
      $( "p" ).trigger( "myCustomEvent", [ "John" ] );
      });
      </script>

      </body>
      </html>

      $( "#cart" ).on( "mouseenter mouseleave", function( event ) {
      $( this ).toggleClass( "active" );
      });

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TData

      Parameter

      • events: TypeEventHandlers<TElement, TData, any, any>

        An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

      • selector: string

        A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

      • data: TData

        Data to be passed to the handler in event.data when an event occurs.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TData

      Parameter

      • events: TypeEventHandlers<TElement, TData, TElement, TElement>

        An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

      • selector: null

        A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

      • data: TData

        Data to be passed to the handler in event.data when an event occurs.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Parameter

      • events: TypeEventHandlers<TElement, undefined, any, any>

        An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

      • selector: string

        A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Typenparameter

      • TData

      Parameter

      • events: TypeEventHandlers<TElement, TData, TElement, TElement>

        An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

      • data: TData

        Data to be passed to the handler in event.data when an event occurs.

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

    • Attach an event handler function for one or more events to the selected elements.

      Parameter

      • events: TypeEventHandlers<TElement, undefined, TElement, TElement>

        An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).

      Rückgabewert this

      <a href="https://api.jquery.com/on/">https://api.jquery.com/on/</a>

      1.7

      <!doctype html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <title>on demo</title>
      <style>
      .test {
      color: #000;
      padding: .5em;
      border: 1px solid #444;
      }
      .active {
      color: #900;
      }
      .inside {
      background-color: aqua;
      }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      </head>
      <body>

      <div class="test">test div</div>

      <script>
      $( "div.test" ).on({
      click: function() {
      $( this ).toggleClass( "active" );
      }, mouseenter: function() {
      $( this ).addClass( "inside" );
      }, mouseleave: function() {
      $( this ).removeClass( "inside" );
      }
      });
      </script>

      </body>
      </html>

    • Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.

      Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein neues wiederholbares Element erzeugt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.

      Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion global für jedes dynamische Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.

      // Neu hinzugefügte Formularfelder mit cob2auto initialisieren (Autovervollständigung)
      $('FORM.xm-form').on("addRow", function(_, data) {
        data.container.find(".XSelect").cob2auto();
      });

      Parameter

      • event: "addRow"

        Der Name des Ereignisses, also addRow.

      • callback: (this: HTMLElement, event: TriggeredEvent, data: { container: JQuery }) => void

        Rückruffunktion für das Ereignis beim Hinzufügen eines Elements. Sie erhält als Parameter das auslösende Ereignis (meistens click) und den Container mit dem dynamisch erzeugten Element.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

      Use XUtil.on instead with the XUtilCallbacks.addRow | addRow callback.

    • Muss direkt auf das Formularelement (FORM.xm-form) aufgerufen werden.

      Erlaubt die Registrierung einer globalen Rückruffunktion, wenn ein wiederholbares Element entfernt wurde. Ein wiederholbares Element erlaubt dem Nutzer, eine oder mehrere Kopien zu erzeugen, etwa zur Eingabe von mehreren E-Mail-Adressen.

      Im Gegensatz zur Rückruffuntkion, die mittels dynamic registriert werden kann, wird diese Rückruffunktion global für jedes wiederholbare Formularfeld im Formular aufgerufen. Das ist etwa nützlich, wenn ein Element über den Designer wiederholbar geschaltet wird und nicht direkt mittels JavaScript.

      // Beim Entfernen eines Elements die Versandkosten neu berechnen
      $('FORM.xm-form').on("delRow", function(_, data) {
        recalculateVersandkosten();
      });

      Parameter

      • event: "delRow"

        Der Name des Ereignisses, also delRow.

      • callback: (this: HTMLElement, event: TriggeredEvent, data: { container: JQuery }) => void

        Rückruffunktion, wenn ein dynamisches Element entfernt wurde. Sie erhält als Parameter das auslösende Ereigniss (meist click) und den (nicht mehr im DOM eingehängten) Container mit dem entfernten dynamischen Element.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

      Use XUtil.on instead with the XUtilCallbacks.delRow | delRow callback.

    • Erlaubt es, eine Rückruffunktion zu registrieren, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.

      Parameter

      • event: "ready"

        Der Name des Ereignisses, also ready.

      • callback: (this: HTMLElement) => void

        Rückruffunktion, welche aufgerufen wird, sobald dass Formular vollständig dargestellt und initialisiert wurde.

      Rückgabewert JQuery

    • Entfernt das kleine rote Sternchen neben dem Leittext eines Formularfelds, welches angibt, ob es sich bei dem Formularfeld um ein Mussfeld handelt.

      Derzeit ist dieses Sternchen mittels eines SPAN-Elements mit der Klasse required-star umgesetzt, dies kann sich allerdings ändern.

      <span class="required-star">*</span>

      Beispiel:

      // Entfernt das Sternchen vom Leittext des Formularfelds "tfName".
      $('input[name=tfName]').removeStar();

      Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das Eingabefeld leer, werden daher weiter Fehlermeldungen angezigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte die Funktion setRequired benutzt werden.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Diese Methode ist veraltet und sollte nicht mehr benutzt werden, dass sie Formular anfällig für XSS-Angriffe (cross-site scripting) macht.

      Es können etwa XUtil.getFormParam|$.xutil.getFormParam und JQuery-Methoden wie JQuery.text|$.fn.text genutzt werden, um Daten aus URL-Parametern in das Formular einzufügen.

      Ersetzt im HTML eines Formularelement (innerHTML) Ausdrücke einer bestimmten Form mit Werten aus den URL-Parametern der aktuellen URL, über die das Formular aufgerufen wurde.

      Ausdrücke der folgenden Form, wobei KEY für den Namen des URL-Parameters steht, werden ersetzt:

      {KEY}

      Für jeden URL-Parameter wird das erste Auftreten obigen Ausdrucks durch den Wert des URL-Parameters KEY ersetzt. Angenommen, ein Formular wird aufgerufen über die URL

      http://localhost/formcycle/form/provide/1?name=Welt

      Im Formular gibt es ein Textfeld mit dem Namen tfGruss und dem Label Hello, {name}!:

      // Ersetzt im innerHTML-String des div-Container-Elements "{name}" durch "{world}".
      $("[xn='tfGruss']").replaceParams();

      Somit lautet das Label des Eingabefelds nun Hallo, Welt!.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

      Diese Methode ist veraltet und sollte nicht mehr benutzt werden, dass sie Formular anfällig für XSS-Angriffe (cross-site scripting) macht.

    • Ändert den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Die folgenden Datentypen stehen zur Verfügung:

      • dateDE: Erlaubt nur Datumsangaben nach dem deutschen Format (TT.MM.JJJJ), z.B. 22.05.1990.
      • email: Erlaubt nur gültige (internationale) E-Mail-Adressen, z.B. james@john.org or θσερ@εχαμπλε.ψομ.
      • integer: Erlaubt nur Ganzzahlen, also Zahlen ohne Komma, z.B. 3, 0 oder -21.
      • ipv4: Erlaubt nur gültige IP4-Adressen, z.B. 127.0.0.1 oder 10.42.42.13.
      • money: Erlaubt nur gültige Geldbeträge, also Zahlen mit genau zwei Nachkommastellen, z.B. 2,00, -3,95, 0,00 oder 897345,38.
      • number: Erlaubt nur Zahlen, mit oder ohne Komma. Z.B: 0.03, -99.2 oder 42.
      • onlyLetterNumber: Erlaubt nur Buchstaben, Zahlen und Leerzeichen.
      • onlyLetterSp: Erlaubt nur Buchstaben und Leerzeichen.
      • phone: Erlaubt nur gültige Telefonnummern, z.B. 0234995483 oder +49 351 4459654.
      • plzDE: Erlaubt nur gültige deutsche Postleitzahlen, also genau fünf Ziffern, z.B. 02349. Prüft nicht, ob es solch eine Postleitzahl tatsächlich in Deutschland gibt.
      • posinteger: Erlaubt nur positive Ganzzahlen, z.B. 0, 3 oder 123.
      • posmoney : Erlaubt nur gültige, positive Geldbeträge mit genau zwei Nachkommastellen, z.B. 0,00 oder 2,34.
      • posmoneyOptionalComma: Erlaubt nur gültige, positive Geldbeträge, mit oder ohne Nachkommastellen, z.B. 0,00, 0, 3,4 oder 3.
      • regexp: Erlaubt es dem Formularersteller, einen eigenen regulären Ausdruck füri die Validierung einzugeben.
      • text: Wendet keine Einschränkungen an und erlaubt jede Eingabe.
      • time: Erlaubt nur gültige Zeitangaben in dem Format hh:mm, z.B. 22:05 or 03:42.
      • url: Erlaubt nur gültige URLs, welche das Protokoll enthalten müssen, z.B. http://example.com oder https://www.james.org.

      Beispiel:

      // Prüft nun, ob eine gültige E-Mail-Adresse eingegeben wurde.
      $('[name="tfMail"').setDataType("email")

      Beim Datentyp date wird ein Kalender zur Auswahl des Datums angezeigt. Wenn der Datentyp auf ein Datum gesetzt wurde und nun der Datentyp per JavaScript geändert wird, erscheint immer noch ein Kalender. Wenn der Datentyp im Designer auf einen anderen Wert gesetzt wurde und nun per JavaScript auf ein Datum geändert wird, erscheint kein Kalender. Falls notwendig, muss hier direkt jQuery.fn.datepicker gerufen werden.

      Der Datentyp kann auch direkt im XIMA formcycle-Designer eingestellt werden.

      Derzeit werden die HTML-Attribute type und vdt genutzt, dies wird sich allerdings ändern.

      Parameter

      • dataType: string

        Der neue Datentyp für das Eingabefeld.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt den Datentypen eines Texteingabefelds (einzeiliges Eingabefeld oder mehrzeiliges Eingabefeld). Es kann nun ein beliebiger Wert eingegeben werden. Es wird nicht mehr validiert, ob es sich um einge gültige E-Mail-Adresse, Postleitzahl etc. handelt.

      Beispiel:

      // Prüft nun nicht mehr, ob eine gültige E-Mail-Adresse eingegeben wurde.
      $('[name="tfMail"').setDataType()

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Markiert ein Formularfeld als ungültig und setzt die Fehlermeldung.

      Die Fehlermeldung erscheint nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die Fehlermeldung angezeigt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden validiert wird. Mittels der Funktion validate kann die Validierung angestoßen werden, um die Fehlermeldung sofort anzuzeigen.

      // Markiert das Eingabefeld als ungültig und setzt die Fehlermeldung.
      $('[name="tfName"').setError("Ungültiger Name.");
      // Validiert das Eingabefeld und zeigt die Fehlermeldung an.
      $('[name="tfName"').validate();

      Derzeit wird das HTML-Attribut error genutzt, dies kann sich aber ändern.

      Parameter

      • errorMessage: string

        Die Fehlernachricht, die am Element angezeigt werden soll.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Markiert das Formularfeld als gültig und entfernt die Fehlermeldung.

      Die Fehlermeldung verschwindet nicht sofort. Erst, wenn der Nutzer mit dem Formularfeld interagiert, wird die Fehlermeldung entfernt, etwa bei einem blur- oder change-Ereignis; oder wenn das Formular wie beim Absenden validiert wird. Mittels der Funktion validate` kann die Validierung angestoßen werden, um die Fehlermeldung sofort zu entfernen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert die Mussfeldgruppe des Formularelements. Es können sich mehrere Formularelemente in einer Mussfeldgruppe befinden. Ein Formularelement ist nur dann gültig, wenn wenigstens ein Element aus der Mussfeldgruppe ausgefüllt wurde und einen Wert hat.

      Diese Funktion ändert nicht, ob das Formularelement selbst ein Mussfeld ist, zum Beispiel:

      Das Formularfeld tf1 wurde bereits im Designer als Mussfeld markiert, das Feld tf2 nicht. Nun wird diese Funktion benutzt, um die Mussfeldgruppe beider Felder auf "Gruppe1" zu setzen. Ist das Feld tf1 noch leer, so wird eine Fehlermeldung angezeigt, auch wenn im Feld tf2 ein Wert eingetragen wurden. Daher sollte im Designer das Feld tf1 nicht als Mussfeld markiert werden. Sonst muss dies nachträglich mittels der Funktion setRequired nachgeholt werden:

      // Fügt Textfeld "tf1" der Mussfeldgruppe "gruppe1" hinzu.
      $('[name=tf1]').setGroupReq("gruppe1");

      // Fügt Textfeld "tf2" der Mussfeldgruppe "gruppe1" hinzu.
      $('[name=tf2]').setGroupReq("gruppe1");

      // Entfernt die Markierung von Textfeld "tf1" als Mussfeld.
      $('[name=tf1]').setRequired(false);

      Die Mussfeldgruppe kann auch direkt im XIMA formcycle-Designer gesetzt werden.

      Derzeit nutzen Mussfeldgruppen das HTML-Attribut vgr, dies wird sich allerdings ändern.

      Parameter

      • groupreq: string

        Name der Mussfeldgruppe, die auf das Element gesetzt werden soll.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Mussfeldgruppen an dem Formularfeld.

      Falls das Formularfeld zudem als Mussfeld markiert werden soll, kann die Funktion setRequired genutzt werden.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert die Höchstanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.

      Dieses Grenze kann auch direkt im XIMA formcycle-Designer gesetzt werden.

      // Es können nun höchstens drei Checkboxen am Feld "selTermine" angehakt werden.
      $('[name=selTermine').setMaxCheckBox(3)

      Derzeit wird das HTML-Attribut `vcmx genutzt, dies wird sich allerdings ändern.

      Parameter

      • maxCheckBox: number

        Die Höchstzahl an Optione, die ausgewählt werden darf.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Einschränkung an die Höchstzahl an auswählbaren Optionen eines Mehrfachauswahlfelds.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen), die eingegeben werden dürfen.

      // Der Nutzer darf nicht mehr als neun Zeichen im Feld "tfId" eingeben.
      $('[name="tfId"').setMaxLength(9)

      Die Höchstlänge kann auch direkt im XIMA formcycle-Designer geändert werden.

      Derzeit wird das HTML-Attribut vmxl genutzt, dies wird sich allerdings ändern.

      Parameter

      • maxLength: number

        Höchtzahl (inklusiv) an erlaubten Zeichen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Einschränkung an die Höchstlänge eines Eingabefelds, also die maximale Anzahl an Zeichen, die eingegeben werden dürfen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert an einem nummerischen Eingabefeld die höchste erlaubte Zahl, die eingegeben werden darf.

      // Im Feld "tfAnzahl" muss eine Zahl kleiner oder gleich 9 eingegeben werden.
      $('[name="tfAnzahl"').setMaxValue(9);

      Der Höchstwert kann auch direkt XIMA formcycle-Designer gesetzt werden.

      Derzeit wird das HTML-Attribut vmx genutzt, dies kann sich aber ändern.

      Parameter

      • maxValue: number

        Der Höchstwert (inklusive), der für das Eingabefeld erlaubt ist.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt an einem nummerischen Eingabefeld die Einschänkung an die höchste erlaubte Zahl, die eingegeben werden darf.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert die Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.

      // Wenigstens eine Checkbox muss am Auswahlfeld "selTermine" ausgewählt werden.
      $('[name=selTermine').setMinCheckBox(1);

      Die Mindestanzahl kann auch direkt im XIMA formcycle-Designer gesetzt werden.

      Derzeit wird das HTML-Attribut vcmn genutzt, dies wird sich allerdings ändern.

      Parameter

      • minCheckBox: number

        Die geringste Anzahl (inklusiv) an Optione, die am Auswahlfeld ausgewählt werden müssen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Einschränkung der Mindestanzahl an erlaubten ausgewählten Optionen eines Mehrfachauswahlelements.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert die Höchstlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.

      // Der Nutzer muss wenigstens zwei Zeichen in das Eingabefeld "tfId" eingeben.
      $('[name="tfId"').setMinLength(2);

      Die Höchstlänge kann auch direkt im XIMA formcycle-Designer geändert werden.

      Derzeit wird das HTML-Attribut vmnl genutzt, dies wird sich allerdings ändern.

      Parameter

      • minLength: number

        Mindestanzahl (inklusiv) an erlaubten Zeichen, die eingegeben werden müssen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Einschränkung an die Mindestlänge eines Eingabefelds, also die minimale Anzahl an Zeichen, die eingegeben werden müssen.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt oder ändert an einem nummerischen Eingabefeld die geringste erlaubte Zahl, die eingegeben werden darf.

      // Im Feld "tfAnzahl" muss ein Wert größer oder gleich zwei eingegeben werden.
      $('[name="tfAnzahl"').setMinValue(2);

      Diese Untergrenze kann auch direkt im XIMA formcycle-Designer eingestellt werden.

      Derzeit wird das HTML-Attribut vmn genutzt, dies wird sich allerdings ändern.

      Parameter

      • minValue: number

        Der geringste Wert (inklusiv), der für das Eingabefeld erlaubt ist.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt an einem nummerischen Eingabefeld die Einschänkung an die geringste erlaubte Zahl, die eingegeben werden darf.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt den Namen des Formularfelds, mit dem der Wert dieses Formularfelds übereinstimmen muss.

      Gibt es beispielsweise die beiden Formularfeld "tfNutzername" und "tfNutzernameWiederholung", so wird ein Fehler angezeigt, wenn im Feld "tfNutzernameWiederholung" ein anderer Wert eingegeben wird als im Feld "tfNutzername".

      // Wiederholung der E-Mail muss gleich der eingegebenen E-Mail sein
      $('[data-name=tfMailWdh]').setMustEqual("tfMail");

      Die Anwendung dieser Funktion ist nur für Textfelder und Textareas gedacht und könnte deshalb bei der Benutzung mit anderen Formularelement-Typen zu Fehlern führen.

      Diese Einstellung kann auch direkt im XIMA formcycle-Designer festgelegt werden.

      Derzeit wird das HTML-Attribut veq verwendet, dies wird sich allerdings ändern.

      Parameter

      • name: string

        Name des refernzierten Formularfelds, mit dem der Wert dieses Felds übereinstimmen muss.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Entfernt die Einschränkung, dass der Wert dieses Formularfelds mit einem anderen Formularfeld übereinstimmen muss.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Stellt ein, ob das Formularfeld ein Mussfeld ist. Ein Mussfeld ist ungültig, wenn kein Wert eingeben wurde.

      // Der Nutzer muss im Feld "tfMail" eine (gültige) E-Mail-Adresse eingeben.
      $('[data-name=tfMail').setRequired(true);

      Die Markierung als Mussfeld kann auch direkt im XIMA formcycle-Designer vorgenommen werden.

      Derzeit wird das Attribut vr genutzt, dies wird sich allerdings ändern.

      Parameter

      • required: boolean

        Wenn true, wird das Formularfeld als Mussfeld markiert. Wenn false, ist es kein Mussfeld mehr.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion erlaubt es, diese Abhängigkeit zu ändern.

      Um beispielsweise ein Eingabefeld für den Straßennamen nur dann als Mussfeld zu schalten, wenn im Feld "selAdressart" die Option "Anschrift" (und nicht "Postfach") ausgewählt ist:

      // Mussfeld nur, wenn "Anschrift" und nicht "Postfach" ausgewählt ist
      $('[data-name="tfStrasse"]').setRequiredIf("selAdressart", 1, "Anschrift");

      Diese Einstellung kann auch direkt im XIMA formcycle-Designer vorgenommen werden.

      Derzeit werden die HTML-Attribute vrif_c und vrif_v genutzt, dies wird sich allerdings ändern.

      Die folgenden Werte sind für die Art der Überprüfung erlaubt:

      • 0 (hat einen Wert) Dieses Formularfeld ist Mussfeld, wenn das andere Formularfeld nicht leer ist (hierbei wird der Wert des Parameters value nicht relevant).
      • 1 (stimmt überein) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds mit dem gegebenen Wert übereinstimmt.
      • 2 (stimmt nicht überein) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfeld nicht mit dem gegebenen Wert übereinstimmt.
      • 3 (regulärer Ausdruck) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds auf den regulären Ausdruck passt (hierbei enthält der Parameter value den regulären Ausdruck als Zeichenkette).
      • 4 (kleiner als) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds kleiner als der gegebene Wert ist.
      • 5 (größer als) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds größer als der gegebene Wert ist.
      • 6 (zwischen) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds zwischen zwei Werten liegt (hierbei hat der Parameter value das Format x-y, also z.B. 1-23).
      • 7 (kleiner oder gleich) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds kleiner oder gleichem dem gegebenen Wert ist.
      • 8 (größer oder gleich) Dieses Formularfeld ist Mussfeld, wenn der Wert des anderen Formularfelds größer oder gleichem dem gegebenen Wert ist.
      • 9 (keinen Wert hat) Dieses Formularfeld ist Mussfeld, wenn das andere Formularfeld keinen Wert hat.

      Parameter

      • name: string

        Der Name des Formularfelds, von dessen Wert es abhängen soll, ob dieses Feld ein Mussfeld ist.

      • Optionaltest: number

        Die Art des Vergleichs, wie der Wert des anderen Formularfelds geprüft wird. Siehe oben für Details. Wenn nicht gegeben, ist der Standardwert 0.

      • Optionalvalue: string | number

        Wert für den Vergleich, mit dem das andere Formularfeld verglichen wird. Standardwert ist die leere Zeichenkette.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Ein Formularfeld kann so eingestellt werden, dass es nur dann ein Mussfeld ist, wenn ein anderes Formularfeld einen bestimmten Wert hat. Diese Funktion entfernt diese Abhängigkeit.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Fügt das kleine rote Sternchen neben dem Leittext eines Formularfelds hinzu oder entfernt es. Dieses Sternchen gibt an, ob es sich bei dem Formularfeld um ein Mussfeld handelt.

      Derzeit ist dieses Sternchen mittels eines SPAN-Elements mit der Klasse required-star umgesetzt, dies kann sich allerdings ändern.

      <span class="required-star">*</span>

      Beispiel:

      // Entfernt das Sternchen vom Leittext des Formularfelds "tfName".
      $('input[name=tfName]').showStar(false);
      // Fügt das Sternchen dem Leittext des Formularfelds "tfName" hinzu.
      $('input[name=tfName]').showStar(true);

      Diese Funktion beeinflusst nur das Aussehen, ändert aber nicht, ob das Formularfeld ein Mussfeld ist. Ist das Eingabefeld leer, werden daher weiter Fehlermeldungen angezigt. Um zu ändern, ob das Feld ein Mussfeld ist, sollte die Funktion setRequired benutzt werden.

      Parameter

      • show: boolean

        true um das Sternchen anzuzeigen, false um es auszublenden.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Bildet die Summe aller Formularfelder, wobei versucht wird, den Wert jedes Formularfelds als Zahl zu interpretieren. Diese Methode sollte nur auf Textfelder und Textareas angewendet werden. Besonders nützlich ist diese Methode für wiederholte Elemente, wenn die Werte aller dynamisch erzeugten Felder addiert werden sollen. Es sollte beachtet werden, dass bei wiederholten Formularfeldern die einzelnen Eingabefelder über das Attribut data-org-name und nicht über name selektiert werden sollten.

      // Bildet die Summe aller dynamisch erstellten Kopien des Textfelds mit dem Namen "tfZahlungsbetrag".
      var sum = $("[data-org-name='tfPayment']").sum();

      Rückgabewert number

      Die (nummerische) Summe der Werte aller selektieren Formularfelder.

    • Validiert das Formularfeld und alle in ihm enthaltenen Formularfelder.

      Eine Fehlernachricht wird an allen Elementen angezeigt, die ungültig sind. Ungültig sind Mussfelder, die nicht ausgefüllt wurden, sowie Felder, welche falsch ausgefüllt wurden (z.B. ungültige E-Mail-Adresse).

      Standardmäßig wird die Validierung nur ausgeführt, wenn der Nutzer den Wert des Formularfelds ändert und es wieder verlässt (blur bei Eingabefeldern beziehungsweise. change bei Checkboxen). Zudem wird auch beim Versuch, das Formular abzusenden, validiert.

      Ein Anwendungsfall für diese Funktion beseteht darin, ein Eingabefeld jedesmal zu validieren, wenn der Nutzer ein Buchstaben eingibt oder eine Taste auf der Tastatur drückt. Dies sollte mit Bedacht eingesetzt werden, da es bei großen Formularen auf aufwendigen Validierungen zu Performanzproblemen kommen kann.

      // Validiert das Eingabefeld "tfId" bei jedem Tastendruck
      $("[data-name='tfId']").on("keydown", function(event) { $(event.target).validate(); });

      // Überprüft das gesamte Formular
      var isFormValid = $(".xm-form").validate();

      Parameter

      • Optionalsilent: boolean

        Optional, Standardwert false. Wenn true, wird keine Fehlernachricht an invalide Elemente angefügt. Kann etwa nützlich sein, wenn nur geprüft werden soll, ob ein Element valide ist, ohne den Nutzer davon in Kenntnis zu setzen.

      Rückgabewert boolean

      true, wenn alle validierten Formularfelder gültig sind, false otherwise.

    • Entfernt das gegeebene Validationsattribut von dem Formularfeld. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.

      Parameter

      • validationAttributeName: string

        Name des zu entfernenden Validationsattributs.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Setzt das Validationsattribut für das Formularfeld auf den gegebenen Wert. Dies ist eine Low-Level-Methode, es sollte eine der spezifischeren Methoden für Validationsattribute genutzt werden, wie etwa setRequired.

      Parameter

      • validationAttributeName: string

        Name des zu ändernden Validationsattributs.

      • value: unknown

        Neuer Wert für das Validationsattribut. Wenn undefined, wird das Validationsattribut entfernt.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    • Zeigt das Formularfeld an oder versteckt es. Diese Funktion sollte statt den JQuery-Funktionen hide und show verwendet werden, da sie auch einige XIMA formcycle-spezifische Attribute aktualisiert.

      Ist ein Formularfeld versteckt, so ist es nie ungültig und kann somit auch nie das Absenden eines Formulars verhindern.

      Achtung: Diese Methode ändert nur den Sichtbarkeitszustand von genau dem Element, auf das sie gerufen wird. Soll etwa nicht nur das Eingabefeld, sondern auch das dazugehörige Label mit ausgeblendet werden, kann wie folgt vorgegangen werden:

      // Macht das Eingabefeld "tfNachname" unsichtbar.
      $("[data-name='tfNachname']").getContainer().visible(false);

      Parameter

      • show: boolean

        If true, shows the form field. If false, hides the form field.

      Rückgabewert JQuery

      Diese JQuery-Instanz zum Verketten von Befehlen.

    Einstellungen

    Member-Sichtbarkeit

    Auf dieser Seite

    Methoden