Boardunity & Video Forum - Event.observe mit Prototype

Boardunity & Video Forum (https://boardunity.de/)

- Programmierung und Datenbanken (https://boardunity.de/programmierung-datenbanken-f23.html)

- - Event.observe mit Prototype (https://boardunity.de/event-observe-prototype-t3641.html)

Event.observe mit Prototype

Gestern/Heute schon im Chat angesprochen, leider habe ich noch immer keine Lösung gefunden..

Eigentlich versuche ich nur dieses hier:

Code:

<input type="text" name="stueckzahl" id="stueckzahl" size="30" onkeyup="submitPrice()" />

so umzubauen, dass es Prototype's Ereignisüberwachung benützt.

Ich habe schon ein paar Versuche unternommen:

Code:

    

var stueckzahl2   = $('stueckzahl');

Event.observe(stueckzahl2, 'keyup', submitPrice(), false);

und

Code:

    

var stueckzahl2   = $F('stueckzahl');

Event.observe(stueckzahl2, 'keyup', submitPrice(), false);

Aber das führte immer zu der Fehlermeldung:

Zitat:

Fehler: element has no properties
Quelldatei: http://****/script/prototype.js
Zeile: 1096

Ich weiss echt nimmer was ich machen soll.. :(

Als Hilfe habe ich folgendes verwendet: http://www.sergiopereira.com/articles/prototype.js.html

Der Übersichtlichkeit halber nochmal das ganze, nun aber in der funktionierenden Art und Weise ;)
Diese Funktion:

Code:

   function addEventToObject(obj,evt,func) {

    var oldhandler = obj[evt];

    obj[evt] = (typeof obj[evt] != 'function') ? func : function(ev){oldhandler(ev);func(ev);};

    }

gefolgt von folgendem Konstrukt:

Code:

var changeText = {

    init : function()

        {

        var name = $('name');

        if (name)

            {

            addEventToObject(name,'onblur',changeText.change);

            }    

        },

    change : function()

        {

        var name = $F('name');

        $('ordernotice').innerHTML = name + ', bitte fülle alle Felder aus!';

          }

    };

addEventToObject(window,'onload',changeText.init);

funktioniert endlich *g*

Zur Erklärung:

changeText besteht aus 2 Teilen, einmal 'init' und dann noch der eigentlichen Funktion, in diesem Beispiel ist es 'change'.

init ist dazu da, die Überwachung des Eingabefeldes zu starten.
Dieses:
var name = $('name');
ist eine Funktion von Prototype ersetzt eigentlich:
var name = document.getElementById('name');

und dient dazu zu definieren was genau im Dokument unter Beobachtung gestellt werden soll.

Wenn dieses Element existiert greift folgendes:
addEventToObject(name,'onblur',changeText.change);

Das sagt einfach nur: Bei dem Ereignis 'onblur' auf das Element 'name' angewendet soll die Funktion 'changeText.change' angewendet werden (mehr dazu folgt).
Ein anderes Beispiel wäre:
addEventToObject(name,'onclick',changeText.deletea ll);

Kommen wir nun zu der angesprochenen Funktion 'changeText.change' oder auch einfach nur 'change'.
Wir erinnern uns: diese Funktion wird abgearbeitet nachdem jemand das Textfeld mit der ID 'name' geändert hat.

Bei dieser Funktion steht nun folgendes:
var name = $F('name');
$('ordernotice').innerHTML = name + ', bitte fülle alle Felder aus!';

Das aus der ersten Linie ist sowas wie document.getElementById(); allerdings greift dies auf den Wert zu den man in das Eingabefeld eingegeben hat.
Und:
$('ordernotice').innerHTML = name + ', bitte fülle alle Felder aus!';

bewirkt ganz einfach nur, dass der Inhalt eines Elements mit der ID 'ordernotice' mit dem Text ersetzt werden soll. In meinem Fall steht da nun:
[Der Name der Person die das Formular ausfüllt], bitte fülle alle Felder aus!

Ganz zum Schluss möchte ich nochmal auf folgendes eingehen:
addEventToObject(window,'onload',changeText.init);

Wie man oben schon erkannt hat leitet dies eine Beobachtung ein. In dem Fall wird nun das aktuelle Fenster (window) beobachtet und wenn es geladen hat (ist?!) wird die Funktion changeText.init abgearbeitet welche ja nun die eigentliche Beobachtung startet.

Dies mag nicht der beste/einfachste Weg sein, aber es funktioniert :)

Habe deinen Beitrag ganz vergessen, naja, trotzdem will ich nochmal darauf zurückkommen.

Code:

var stueckzahl2   = $('stueckzahl');

Event.observe(stueckzahl2, 'keyup', submitPrice(), false);

Das obere sollte so aussehen:

Code:

var stueckzahl2   = $('stueckzahl');

Event.observe(stueckzahl2, 'keyup', submitPrice, false);

Evt. bringt dich das ja weiter. ;)

So funktionierte es auch nicht.. Habe 3 Stunden rumgetrickst, umgebaut und nun schlussendlich funktioniert es mit den Codehäppchen aus Beitrag #2 :)

Argh, habe was vergessen ....

Funktioniert es wenn du deinen Code, also das hier ...

Code:

var stueckzahl2   = $('stueckzahl');

Event.observe(stueckzahl2, 'keyup', submitPrice, false);

... in eine Funktion packst, und diese erst ausgeführt wird wenn das onload Event aufgerufen wird?

Also in etwa so:

Code:

function onInit(){ // hier meine Sachen rein von oben ...} Event.observe(window, 'load', onInit);

Frag mich nicht wieso, aber Javascript Code wird wohl grundsätzlich zuerst ausgeführt ... noch bevor das ganze HTML Zeugs geladen wurde. Keine Ahnung ob das stimmt, aber bei mir wars zumindest so. :D

Falls es immer noch nicht gehen sollte, kannst du mir ja die URL zukommen lassen, dann schaue ich mir das mal an.