Zur Boardunity Forenstartseite
  #1  
Alt 12.10.2005, 21:56
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.639

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
  #2  
Alt 12.10.2005, 22:52
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.639
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

  #3  
Alt 19.10.2005, 19:02
Benutzerbild von Michael Przybyla
Mitglied
 
Registriert seit: 02.2003
Beiträge: 184
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.

  #4  
Alt 19.10.2005, 19:22
Benutzerbild von MrNase
Mitglied
 
Registriert seit: 06.2003
Ort: /
Beiträge: 2.639
So funktionierte es auch nicht.. Habe 3 Stunden rumgetrickst, umgebaut und nun schlussendlich funktioniert es mit den Codehäppchen aus Beitrag #2

  #5  
Alt 19.10.2005, 20:10
Benutzerbild von Michael Przybyla
Mitglied
 
Registriert seit: 02.2003
Beiträge: 184
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.

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

Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25