Lookup Inputelemente mit Javascript ansprechen

Im Webumfeld kann die Eingabe von Lookupwerten durch das Kommando HTML-Eingabefeld unterstützt werden. Die Eingabe wird basierend auf dem Feldtyp des Zielfelds angepasst. Wird ein Lookupfeld als Zielfeld ausgwählt so entstehen in einem HTML-Block drei Eingabefelder.
Grundsätzlich ist die Handhabung dieser Felder etwas komplexer, da Werte in diesen Eingabefeldern immer gegen die Datenbank geprüft werden müssen. Die Eingabe des Benutzers sowie die Validierung muss asynchron vom Server überprüft werden.

Eingabefelder (HTML-Input-Elemente):

  • Eingabefeld, das dem Benutzer angezeigt wird. (Anzeigefeld) Dieses Eingabefeld erhält die eventuell im Kommando angegebene HTML-ID. Grundsätzlich ist es empfehlenswert immer eine ID im Kommando anzugeben. Dieses ist das einzig sichbare Eingabefeld. Neben diesem Feld wird auch das Lupensymbol, zur Öffnung der Lookupkomponte (Dialog zur Lookupauswahl) angezeigt. Zusätzlich kann die Eingabe des Benutzers durch das Autocomplete-Widget unterstützt werden.

  • Eingabefeld, das den eigentlichen Lookupschlüssel enthält. (ID-Feld) Dieses Feld wird nicht angezeigt. Dieses Feld besitzt als HTML-ID den Namen des im Brick angegeben Feldes (Variablenname). Wurde vom Benutzer ein korrkter Wert im Anzeigefeld angegeben, bzw. ein Lookup ausgewählt, so wird in diesem Feld der eindeutige Lookup-Schlüssel gehalten. Dieses Feld wird an den Server geschickt.

  • Eingabefeld, das den Suchbegriff enthält. Dieses Feld wird nicht angezeigt.  Dieses Feld besitzt als HTML-ID, die ID des ID-Felds mit dem Postfix "_SEARCH". Dieses Feld enthält den Suchbegriff, der als letzter dem Server geschickt wurde, um den Lookup zu validieren bzw. zu vervollständigen.

Abbonierbare Ereignisse:

  • dle-lookup-value-set. Ereignis, das auf allen drei Eingabefeldern ausgelöst wird, sobald durch die Autocomplete-Funktion ein gültiger Lookupwert gesetzt wurde.

  • dle-lookup-accepted: Ereignis, das auf dem ID-Feld ausgelöst wird, sobald über die Lookupkomponente (Dialog) vom Benutzer ein gültiger Lookupwert ausgewählt wurde.

  • Zusätzlich können natürlich Standardereignise wie z.B.  "change","blur", "focus" usw. verwendet werden.

ACHTUNG: Ereignisse am ID-Feld können erst registriert werden, nachdem das Feld vom DLE-Javascript erzeugt wurde. Dafür gibt es das Ereignis dle-pageUpdate-finished, welches am document ausgelöst wird.

ACHTUNG: Die HTML-ID des ID-Felds wird mit dem technischen Namen der Variable gesetzt. Dieser technische Name setzt sich immer aus Paketname:Feldname oder Paketname:Datenobjektname.Feldname zusammen. Als Paketname können natürlich auch LOCAL oder GLOBAL in Frage kommen. Doppelpunkte und Punkte können in CSS-Selektoren bei jQuery angegeben werden, aber nur wenn sie durch zwei Backslashes escaped werden.

 

Beispielbrick:

Inhalt des Javascript-Aufrufs:

jQuery(document).on("dle-pageUpdate-finished",function(){
jQuery("#DLE\\:DLEUSER\\.USER_IDC").on("dle-lookup-value-set",function(){
var val = jQuery(this).val();
alert("Selected Lookup: "+val);
});
});
jQuery("#lookupFieldId").on("dle-lookup-accepted",function(){
var displayVal = jQuery(this).val();
var val = jQuery("#DLE\\:DLEUSER\\.USER_IDC").val();
alert("Selected Lookup Display: "+displayVal +"\n Selected LookupValue: "+val);
});