Vorschlag für input Feld wird nicht übernommen

[Linuchs]

Moin,

seit vier Stunden versuche ich vergeblich, den Fehler zu finden.

Auf der Seite http://remso.eu/?zp=p582 erscheinen nach Eingabe von drei Zeichen Vorschläge von passenden Orten, mit Ajax vom Server geholt. Meine Eingabe ist wörl und es wird richtig Wörlitz vorgeschlagen.

Doch bei Klick darauf wird nichts übernommen und es gibt auch keinen Javascript-Fehler.

Der Ajax-Aufruf und die Übernahme der Vorschläge sollte mit ajax_ort_vorschlaege.js erfolgen. Die function schreibt ihre URL als title="..." in das input-Feld zur Kontrolle.

Das korrespondierende php-Programm wird so aufgerufen:

http://remso.eu/100/p152_ajax_ort_vorschlaege.php?feld_id=such_ort&wert=wörl

und bei jedem Wert steht, was bei onclick gemacht werden soll. Aber es wird nicht gemacht.

Das Konzept hat schon geklappt, es muss irgend eine Kleinigkeit sein.

Wo steckt der Wurm?

Linuchs

[dedlfix]

Tach!

seit vier Stunden versuche ich vergeblich, den Fehler zu finden.

Schön - oder auch nicht - aber was hast du bereits unternommen? Hast du den Debugger in den Entwicklertools verwendet? Breakpoints gesetzt, den Ablauf verfolgt? Das ist der übliche Weg, die Stelle zu finden, die anders abläuft als man es sich vorgestellt hat. Diesen Punkt zu finden, sollte jeder Programmierer beherrschen. Wenn es dann Verständnisprobleme gibt, warum irgendwas auf welche Weise abläuft, wäre das ein Thema für weitere Hilfe.

Wo steckt der Wurm?

Bitte finde das "wo" zunächst mit dem Debugger raus, dafür ist der da.

dedlfix.

[Linuchs]

Hast du den Debugger in den Entwicklertools verwendet?

Nein, habe ich mir just eben angeschaut und kann die .js Datei inhaltlich sehen.

Breakpoints gesetzt, den Ablauf verfolgt?

Wie setzt man Breakpoints im FF?

[dedlfix]

Tach!

Breakpoints gesetzt, den Ablauf verfolgt?

Wie setzt man Breakpoints im FF?

Du suchst dir in den Entwicklertools im Tab Sources (Chrome) oder Debugger (Firefox) die Datei mit dem Code und dann die zu untersuchende Stelle. Links neben der Zeile, da wo die Zeilennummern stehen, klickst du drauf und hast den Breakpoint gesetzt. Löschen geht durch einen weiteren Klick. Es gibt auch eine Liste, in der alle gesetzten Breakpoint aufgeführt sind, über die man sie auch löschen kann.

dedlfix.

[pl]

Moin,

seit vier Stunden versuche ich vergeblich, den Fehler zu finden.

Auf der Seite http://remso.eu/?zp=p582 erscheinen nach Eingabe von drei Zeichen Vorschläge von passenden Orten, mit Ajax vom Server geholt. Meine Eingabe ist wörl und es wird richtig Wörlitz vorgeschlagen.

Bei mir kommt da D-28844 Weyhe wenn ich wör eingebe.

Doch bei Klick darauf wird nichts übernommen und es gibt auch keinen Javascript-Fehler.

Is bei mir auch so.

Der Ajax-Aufruf und die Übernahme der Vorschläge sollte mit ajax_ort_vorschlaege.js erfolgen. Die function schreibt ihre URL als title="..." in das input-Feld zur Kontrolle.

Wa ist das für ein Script? Ist das irgendwo dokumentiert? Werden die Vorschläge in einer datalist abgelegt? Dann sollte auch die Übernahme klappen.

MfG

[pl]

Wa ist das für ein Script? Ist das irgendwo dokumentiert? Werden die Vorschläge in einer datalist abgelegt? Dann sollte auch die Übernahme klappen.

Hab grad gesehen, die Orte deiner Treffer-Response kriegen Funktionen für onClick und onMouseover verpasst. Da onMouseover ja offensichtlich funktioniert, sollte auch das onClick funktionieren. Genau da würde ich mit der Fehlersuche beginnen.

MfG

[dedlfix]

Tach!

Hab grad gesehen, die Orte deiner Treffer-Response kriegen Funktionen für onClick und onMouseover verpasst. Da onMouseover ja offensichtlich funktioniert, sollte auch das onClick funktionieren. Genau da würde ich mit der Fehlersuche beginnen.

Bei der Untersuchung sollte herauskommen, dass der Eventhandler nicht aufgerufen wird. Das lässt sich schwer debuggen, weil der Code beim Erzeugen des Elements direkt ins HTML-Attribut geschrieben wurde und somit nicht im Debugger verfügbar ist. Besser wäre gewesen, den Eventhandler fest zu notieren und nur beim Erzeugen des Elements zuzuweisen. Wie auch immer, die Ursache, dass der Click-Handler nicht mehr aufgerufen werden kann, ist das onblur vom input-Element, das zuerst zieht und die Liste zuklappt, bevor der Klick landet.

dedlfix.

[dedlfix]

Tach!

die Ursache, dass der Click-Handler nicht mehr aufgerufen werden kann, ist das onblur vom input-Element, das zuerst zieht und die Liste zuklappt, bevor der Klick landet.

Nachtrag: Ich hab das zufällig herausgefunden. Das onblur störte mich, weil ich die Liste nicht untersuchen konnte, denn die war weg beim Rechtsklicken. Also hab ich es mal rausoperiert, und siehe da, die PLZ landete nun auch im vorgesehenen Feld.

dedlfix.

[Rolf B]

Hallo dedlfix,

Full ack. Das Dropdown wird im onblur geschlossen und bekommt den click nicht mehr ab.

Dringende Empfehlung: Kein Javascript-Monstrum für die Liste liefern. Zum einen ist ein Event-Handler in onTralala Attributen hier sehr umständlich - du musst ihn an jedes Span einzeln drankleben - und zum anderen hast Du gesehen, wie schlecht das zu debuggen ist.

Wenn's schon fertiges HTML sein soll, dann ohne JavaScript in der Tasche, aber mit data- Attributen (passend mit special chars maskiert):

<span id='such_12770' data-plz='99625' data-ort='Kölleda' data-land='D' data-GPS=','>D-99625 Kölleda</span>

Dazu ein einziger Click-Handler auf das .vorschlaege DIV, der beim Laden der Seite montiert wird. Der bekommt am Werk ein Event-Objekt als Parameter, in diesem Objekt gibt's eine Eigenschaft "target" in dem das geklickte Element zu finden ist.

Daraus kann man die data-Attribute auslesen und die Maske entsprechend bestücken.

Was mir noch besser gefiele, wäre dies: Statt fertigem HTML kannst Du auch ein JSON-serialisiertes Objekt liefern (ja, lieber pl, es könnte auch eine EAV Liste sein 😉). Es könnte diese Struktur haben:

{ "12770": { plz: '99625', ort: "Kölleda", land: "D", GPS: { x: 0, y: 0 } }, … }

und du baust nach Empfang daraus am Client HTML zusammen. Das sollte dann aber kein DIV als Container mit span als Inhalt sein, sondern ein ul mit li darin, die Du entsprechend stylest.

<ul class="vorschläge">
  <li id="such_12770">D-12770 Kölleda</li>
</ul>

reicht. Die li Elemente bitte nicht einzeln in die ul hängen, das kann bei größeren Listen sehr lange dauern. Entweder ein DocumentFragment konstruieren und dann einhängen, oder einen langen String mit dem ganzen HTML-Inneren für das ul Element zusammensetzen und dann das innerHTML des ul setzen.

Der Click-Handler findet bei dieser Lösung bei Click auf ein li ein Attribut ID="such_12770" und greift für den Rest der Daten auf das Json-Objekt zurück.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dazu ein einziger Click-Handler auf das .vorschlaege DIV

Dass man divs nicht clicken kann, sollte inzwischen bekannt sein.

Und dass wer anderes behauptet von mir einen Minuspunkt bekommt, auch.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

na meinetwegen. Ich bin halt im Eifer des Gefechts im Kontext von Linuchsens Seite geblieben 😉

Also Datalist und den Rest dem Browser überlassen? Ich finde das Layout der Datalist für diesen Fall nicht so prickelnd (Chrome zeigt Schlüssel und Klartextwerte im Dropdown an); wenn man nur die Klartextwerte in die Datalist setzt, muss man nachher rückwärts nach der ID suchen (falls man die braucht).

Rolf

[pl]

hi Rolf

Was mir noch besser gefiele, wäre dies: Statt fertigem HTML kannst Du auch ein JSON-serialisiertes Objekt liefern (ja, lieber pl, es könnte auch eine EAV Liste sein 😉). Es könnte diese Struktur haben:

{ "12770": { plz: '99625', ort: "Kölleda", land: "D", GPS: { x: 0, y: 0 } }, … }

Viel zu umständlich. Weil: Für eine datalist (wie ich bereits vorgeschlagen habe) reicht ein gewöhnliches Array 😉

Wenn's ein bischen mehr sein darf, Templating Engines (z.B. Mustache) arbeiten für Loops i.d.R. mit Slices dieser Struktur: [{},{},{}..] also mit einem Array dessen Elemente Objekte sind.

MfG

[Linuchs]

Hallo dedlfix,

die Ursache, dass der Click-Handler nicht mehr aufgerufen werden kann, ist das onblur vom input-Element, das zuerst zieht und die Liste zuklappt, bevor der Klick landet.

Danke, da wäre ich nie drauf gekommen.

Wie wird diese Aufgabe denn anderswo gelöst? Die datalist kann offenbar nur einen Wert übergeben, ich brauche je mehrere.

Linuchs

[dedlfix]

Tach!

Wie wird diese Aufgabe denn anderswo gelöst? Die datalist kann offenbar nur einen Wert übergeben, ich brauche je mehrere.

Ein (eindeutiger) Wert reicht ja auch, um die zugehörigen anderen Werte in einer anderen Datenhaltung identifizieren zu können. Key-Value-Prinzip. Key ist der eindeutige Wert, Value ist das Objekt mit den Daten. Key-Value-Paare können in einem Objekt gespeichert werden. Der Key kann aber auch ein Index in einem Array sein.

dedlfix.

[Gunnar Bittersmann]

@@Linuchs

seit vier Stunden versuche ich vergeblich, den Fehler zu finden.

Auf der Seite http://remso.eu/?zp=p582 erscheinen nach Eingabe von drei Zeichen Vorschläge von passenden Orten, mit Ajax vom Server geholt. Meine Eingabe ist wörl und es wird richtig Wörlitz vorgeschlagen.

Doch bei Klick darauf

Ich habe keine Maus und kann nicht klicken. Wie komme ich mit der Tastatur von dem Eingabefeld zu den Vorschlägen?

Das Konzept hat schon geklappt, es muss irgend eine Kleinigkeit sein.

Nach „Konzept hat schon geklappt“ sieht mir das nicht aus. Aber wenn du Glück hast, ist es wirklich nur eine Kleinigkeit. Vielleicht nur ein EventListener mehr …

LLAP 🖖