jQuery Abfolgeproblem

[bobby]

Moin,

Ich hab folgendes Abfolgeproblem. Ich habe Tabellenzellen mit Inputs. Wenn ich in die Inputs reingehe, erscheint ein Div und ein paar Flaggen zur Sprachenauswahl. Nun möchte ich, dass, wenn der Focus von dem Input runtergeht, dass dieses per Ajaxrequest abgesendet wird.

Dies soll aber nicht geschehen, wenn die Flaggen gedrückt wurden.

Wie kann ich das richtig anordnen, da sich die einzelnen Bedingungen immer wieder gegenseitig aufheben

ich habe dies über eine Variable versucht, diese wird aber innerhalb der click-Function gesetzt und ist außen nicht verfügbar. Also, wie kann ich das lösen?

$(this).focusout(function(e){
            var flagclicked=false;
            $(this).parent().children('.translatebox').children('img').click(function(){
                $(this).focus();
                flagclicked=true;
            });
            console.info(flagclicked);
            // Wenn sich der Inhalt geändert hat
            if(tmp !== $(this).val() && flagclicked==false){
                /**
                 * Änderung absenden
                 */
                $.get(basedir+'admin/translateadmin.htm?view=save',function(e){
                   console.info(e);
                });
            }
            tmp='';
            if(flagclicked==false)
            {
                $(this).unbind('focusout');
                $(this).parent().children('.translatebox').remove();
            }
        });

Gruß Bobby

[dedlfix]

Tach!

Wenn ich in die Inputs reingehe, erscheint ein Div und ein paar Flaggen zur Sprachenauswahl. Nun möchte ich, dass, wenn der Focus von dem Input runtergeht, dass dieses per Ajaxrequest abgesendet wird. Dies soll aber nicht geschehen, wenn die Flaggen gedrückt wurden.

Verliert das Input den Fokus nicht schon, sobald eine Flagge geklickt wird? Im Input können sie ja nicht sein, denn Input hat keinen Inhalt.

Wie kann ich das richtig anordnen, da sich die einzelnen Bedingungen immer wieder gegenseitig aufheben

Entwirren des Codes wäre gut. Die Eventhandler sollten nicht innerhalb eins anderen Eventhandlers zugewiesen werden, sondern generell den Elemente, spätestens direkt nach ihrer Erzeugung. Weiterhin kannst du, wenn du den Zustand nicht direkt aus den Elementen selbst oder deren Umgebung holen kannst, ihn über jQuerys data() im Element oder einem passenden in dessen Umgebung zuweisen. Daraufhin gilt wieder Paragraf 1, dass du den Zustand aus den Elementen ... lesen kannst.

Ein Zustand wäre, dass irgendeine Flagge geklickt wurde (Momentmal, Flaggen für Sprachen? Das passt hinten und vorn nicht zusammen. Da gibt es jede Menge Überschneidungen in beide Richtungen, die das System uneindeutig machen.) Jedenfalls muss das Klicken der Flagge den Zustand setzen, so dass beim Verlieren des Fokus (also falls das nicht sowieso schon kein zielführender Weg ist) dieser abgefragt werden kann, um daraufhin ent- oder -weder zu ajaxen.

ich habe dies über eine Variable versucht, diese wird aber innerhalb der click-Function gesetzt und ist außen nicht verfügbar. Also, wie kann ich das lösen?

Wenn die Variable im falschen Scope liegt, ist sie unbrauchbar, wie du gesehen hast. Wenn du den Zustand nicht irgendwo anders permanent erhalten kannst, dann häng die Information mit data() an ein Element.

dedlfix.

[Gunnar Bittersmann]

@@bobby

ein paar Flaggen zur Sprachenauswahl.

Flaggen stehen nicht für Sprachen.

LLAP 🖖

[bobby]

Moin,

@@bobby

ein paar Flaggen zur Sprachenauswahl.

Flaggen stehen nicht für Sprachen.

ihr Mißversteht mein Ansinnen... ich möchte hier nicht I18N im eigentlichen Sinne umsetzen, sondern habe eine Maske in der ich Quellvariablen in verschiedenen Sprachen anzeigen lassen möchte. Das heißt ich möchte ein Input zum Eingeben einer Variable in einer bestimmten Sprache und drüber eine Box mit Quelltext, den es zu übersetzen gilt. Und dieser ist in verschiedenen Sprachen verfügbar

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

ein paar Flaggen zur Sprachenauswahl.

Flaggen stehen nicht für Sprachen.

ihr Mißversteht mein Ansinnen... ich möchte hier nicht I18N im eigentlichen Sinne umsetzen, sondern habe eine Maske in der ich Quellvariablen in verschiedenen Sprachen anzeigen lassen möchte. Das heißt ich möchte ein Input zum Eingeben einer Variable in einer bestimmten Sprache und drüber eine Box mit Quelltext, den es zu übersetzen gilt. Und dieser ist in verschiedenen Sprachen verfügbar

Was hat das damit zu tun, dass Flaggen nicht für Sprachen stehen?

LLAP 🖖

[bobby]

Moin,

Was hat das damit zu tun, dass Flaggen nicht für Sprachen stehen?

es sind versierte Nutzer und Mißverständnisse ausgeschlossen. Und außerdem hat dies nichts mit dem eigentlichen Problem zu tun.

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

es sind versierte Nutzer und Mißverständnisse ausgeschlossen.

Dass Nutzer an ein GUI gewohnt sind, heißt nicht unbedingt, dass dieses auch gut wäre.

Und außerdem hat dies nichts mit dem eigentlichen Problem zu tun.

Du bist doch schon lange genug hier mit dabei um zu wissen, dass du solche Hinweise oberdrauf bekommst.

LLAP 🖖

[bobby]

Moin,

es sind versierte Nutzer und Mißverständnisse ausgeschlossen.

Dass Nutzer an ein GUI gewohnt sind, heißt nicht unbedingt, dass dieses auch gut wäre.

Dazu gibt es eine gute und umfangreiche Dokumentation ;)

Und außerdem hat dies nichts mit dem eigentlichen Problem zu tun.

Du bist doch schon lange genug hier mit dabei um zu wissen, dass du solche Hinweise oberdrauf bekommst.

Na klar weiß ich das. Nur wäre eben eine Lösung für das eigentliche Problem gut. ;)

Gruß Bobby

[Gunnar Bittersmann]

@@bobby

es sind versierte Nutzer und Mißverständnisse ausgeschlossen.

Dass Nutzer an ein GUI gewohnt sind, heißt nicht unbedingt, dass dieses auch gut wäre.

Dazu gibt es eine gute und umfangreiche Dokumentation ;)

**Prust** Ein GUI, das eine Dokumentation erforderlich macht, ist mit Sicherheit kein gutes.

LLAP 🖖

[bobby]

Moin,

Da ich kein Designer bin, dies ganze nur Backend ist und ich kein Budget zum großartigem Designen habe sondern alles recht rudimentär sein soll, denke ich, ist das in ordnung. Was mir aber immer noch nicht beim eigentlichen Problem hilft.

;)

@@bobby

es sind versierte Nutzer und Mißverständnisse ausgeschlossen.

Dass Nutzer an ein GUI gewohnt sind, heißt nicht unbedingt, dass dieses auch gut wäre.

Dazu gibt es eine gute und umfangreiche Dokumentation ;)

**Prust** Ein GUI, das eine Dokumentation erforderlich macht, ist mit Sicherheit kein gutes.

LLAP 🖖

Gruß Bobby

[Mitleser]

**Prust** Ein GUI, das eine Dokumentation erforderlich macht, ist mit Sicherheit kein gutes.

Jawoll!!! Wenn Adobe dahingehend nicht so dermaßen versagt hätte, hätte ich mir meine Photoshop-Bücher nie kaufen brauchen!

[dedlfix]

Tach!

Nur wäre eben eine Lösung für das eigentliche Problem gut. ;)

Dann musst du mal konkret werden und mitteilen, was du beispielsweise zu meinem Vorschlag noch für Hinweise brauchst, um eine Lösung zu finden.

dedlfix.

[bobby]

Moin,

Dann musst du mal konkret werden und mitteilen, was du beispielsweise zu meinem Vorschlag noch für Hinweise brauchst, um eine Lösung zu finden.

das nützt mir leider nix. Ich habe 2 Events, die ich in Einklang bringen muss. Folgende Fälle seien dazu erklärt

1. ich bin in einem Input fokusiert
2. ich "entfokusiere" das Input. Hierbei soll geprüft werden ob auf ein bestimmtes Element geklickt wurde. Je nachdem ob Ja oder nein, soll eine entsprechende Funktion ausgeführt werden.

Ich hoffe die Erklärungen sind so, dass man was damit anfangen kann. Dabei ist erstmal völlig irrelevant ob es Flaggen sind oder nicht. Es könnten auch Bananen und Äpfel als Icon sein.

Struktur im HTML

<tr>
    <td>
        <div class="translatebox">
            <img src="bild1.gif"/>
            <img src="bild2.gif"/>
        </div>
        <input name="XXX"/>
    </td>
</tr>

Gruß Bobby

[dedlfix]

Tach!

Ich habe 2 Events, die ich in Einklang bringen muss.

Das scheint mir aber die nicht zielführende Herangehensweise zu sein. Statt die Events hin- und herzuschubsen solltest du in den Eventhandlern schauen, was Phase ist. In AngularJS würde das recht einfach gehen, da hat man mit dem Controller einen Scope, der sich über mehrere HTML-Elemente legt und zentral Daten ablegen kann. Da du hier aber kein Angular verwendest, musst dir du den Zustand "Banane geklickt" anderswie merken. Ist denn das überhaupt möglich, dass du auf die Banane klickst, bevor das Input seinen Fokus verliert? Oder kommt das Fokus-Verlieren immer vor dem Obst-Klick-Event, so dass du da noch gar nicht wissen kannst, dass deswegen der Focus entschwand? Vielleicht wird es einfacher, wenn du einen Button nimmst, statt Focus-Verlieren, dann weißt du mit ziemlicher Sicherheit, ob du den oder das Obst geklickt hast.

dedlfix.

[bobby]

Moin,

Das scheint mir aber die nicht zielführende Herangehensweise zu sein. Statt die Events hin- und herzuschubsen solltest du in den Eventhandlern schauen, was Phase ist. In AngularJS würde das recht einfach gehen, da hat man mit dem Controller einen Scope, der sich über mehrere HTML-Elemente legt und zentral Daten ablegen kann. Da du hier aber kein Angular verwendest, musst dir du den Zustand "Banane geklickt" anderswie merken. Ist denn das überhaupt möglich, dass du auf die Banane klickst, bevor das Input seinen Fokus verliert? Oder kommt das Fokus-Verlieren immer vor dem Obst-Klick-Event, so dass du da noch gar nicht wissen kannst, dass deswegen der Focus entschwand? Vielleicht wird es einfacher, wenn du einen Button nimmst, statt Focus-Verlieren, dann weißt du mit ziemlicher Sicherheit, ob du den oder das Obst geklickt hast.

standardmäßig behandelt jQuery IMMER zuerst das "Focusout" vor dem Clickevent. Dies habe ich mit .bind getestet... Mit Focusin wird erst das "Obst" eingeblendet... und soll mit Focusout und nicht auf das Obst geklickt ausgeblendet werden. Mit bind bekomm ich zumindest beide Events angezeigt. Mir würde im Prinzip die Info fehlen, wann das "letzte" Event vorbei ist, um dann zu prüfen ob ein Klick auf ein bestimmtes Element durchgeführt wurde.

Mit anderen Worten, ich habe Klick und focusout und das Input sowie die Bilder mit bind zusammengeführt. Mir fehlt wirklich nur die Prüfung nach dem "letzten" Event

Gruß Bobby

[dedlfix]

Tach!

standardmäßig behandelt jQuery IMMER zuerst das "Focusout" vor dem Clickevent. Dies habe ich mit .bind getestet... Mit Focusin wird erst das "Obst" eingeblendet... und soll mit Focusout und nicht auf das Obst geklickt ausgeblendet werden. Mit bind bekomm ich zumindest beide Events angezeigt. Mir würde im Prinzip die Info fehlen, wann das "letzte" Event vorbei ist, um dann zu prüfen ob ein Klick auf ein bestimmtes Element durchgeführt wurde.

Du bekommst das Problem nicht innerhalb eines Eventhandlers gelöst, weil deine Events nacheinander kommen und nicht etwa ineinandergeschachtelt.

Vielleicht geht es so: der focusout startet ein setTimeout(). Das Klickevent löscht dieses mit clearTimeout(). Wird es nicht gelöscht, läuft die Funktion los, die setTimeout() übergeben bekommen hat. Die id, die du vom setTimeout()-Aufruf zurückbekommen hast, musst du irgendwo global ablegen oder noch besser, alles was zur Aufgabenlösung gehört in eine IIFE packen.

dedlfix.

[bobby]

Moin,

Vielleicht geht es so: der focusout startet ein setTimeout(). Das Klickevent löscht dieses mit clearTimeout(). Wird es nicht gelöscht, läuft die Funktion los, die setTimeout() übergeben bekommen hat. Die id, die du vom setTimeout()-Aufruf zurückbekommen hast, musst du irgendwo global ablegen oder noch besser, alles was zur Aufgabenlösung gehört in eine IIFE packen.

Das hört sich gut an.. ich habe nur Probleme mit dem lösen und erneuten Setzen der Eventhändler. Da ja sonst doppel Focusin geschaltet wird. Kann man prüfen ob ein Eventhandler bereits registriert ist?

Gruß Bobby

[dedlfix]

Tach!

ich habe nur Probleme mit dem lösen und erneuten Setzen der Eventhändler.

Warum machst du denn das? Der Grund dazu geht aus der Aufgabenstellung nicht hervor. Ich würde grundsätzlich (versuchen), Eventhandler für ein Element gleich nach dessen Erzeugen (wenn du es selbst machst, oder im DOM-Ready wenn es bereits im HTML steht) zu setzen und dann nicht weiter "dran rumzufummeln". Ob der Handler dann zur Auslösezeit seine Aufgabe erledigt oder vorzeitig auf ein return trifft, kann man ja anhand von Daten in Variablen oder ähnlichem steuern.

dedlfix.

[bobby]

Moin,

Ich würde grundsätzlich (versuchen), Eventhandler für ein Element gleich nach dessen Erzeugen (wenn du es selbst machst, oder im DOM-Ready wenn es bereits im HTML steht) zu setzen und dann nicht weiter "dran rumzufummeln".

Gernau so mach ichs jetzt... musste halt nur irgendwie feststellen (durch die zeitverzögerung des settimeout) welche Box mit Symbolen geöffnet ist (ob die zum jeweiligen Elemnt passt) das klappt nun wie gewünscht.

Gruß Bobby

[bobby]

Moin,

ich habe nur Probleme mit dem lösen und erneuten Setzen der Eventhändler. Da ja sonst doppel Focusin geschaltet wird. Kann man prüfen ob ein Eventhandler bereits registriert ist?

Das habe ich auch gelöst, durch prüfen auf Voorhandensein verschiedenster Elemente . Klappt nun wunderbar. Danke für die Hilfe

Gruß Bobby