Mootools variable an function übergeben

[Dynamite]

Nabend,
ich bin gerade zugange mit mootools ein wenig rumzuspielen. Meine Frage ist, ob ich in mootools an eine functione eine variable übergeben kann?

Habe jetzt z.B. diese Funktion:

  
window.addEvent('domready', function(){  
    $('button').addEvent('click', function(e) {  
    e = new Event(e).stop();  
  
    var url = 'test.php?id='id;  
    $('material').innerHTML ='';  
    new Ajax(url, {  
    method: 'get',  
    evalScripts: true,  
    update: $('content')  
    }).request();  
  
    });  
});  

habe jetzt aber mehrere Buttons, die dynamisch aus einer DB erstellt werden. Die eindeutig zu identifizieren ist ja kein Problem, aber wie gebe ich die ID dann an mootools weiter???

Hatte schon überlegt eine Funktion zu basteln, die die variable übernimmt und dann ein fireEvent auslöst, aber es müsste doch auch eleganter gehen, oder?

Könnte natürlich auch per php für jede vorhandene id die jeweilige funktion in einer while-schleife laufen lassen, aber das wäre dann ja wirklich nicht der Sinn der Sache.

Hoffe es gibt jemand der helfen kann

Gutes nächtle
Dynamite

[molily]

habe jetzt aber mehrere Buttons, die dynamisch aus einer DB erstellt werden. Die eindeutig zu identifizieren ist ja kein Problem, aber wie gebe ich die ID dann an mootools weiter???

Du kannst über das Event-Objekt auf das Element zugreifen, bei dem das Ereignis eintrat, also auf den Button, der geklickt wurde. Damit ist eine "Übergabe" der ID nicht nötig, du kannst eine Handlerfunktion mehreren Buttons zuweisen.

Das Event-Objekt hast du ja schon, e.target verweist auf das Zielelement des Events und und e.target.id entsprechend auf dessen id-Attribut.

Mathias

[Dynamite]

Hallo Matthias,
danke erstmal für deine Hilfe, aber so ganz steige ich da noch nicht durch. ich habe jetzt mehrere links, als Bsp. id1,id2,id3,usw.

Hatte es mir jetzt so vorgestellt, das wenn ich auf den link id1 klicke, erstmal darauf reagiert wird, und ich im request dann auch denn wert des Link benutzen kann.

Mit e.target könnte ich die id des gecklickten elementes abfragen, aber wie reagiere ich überhaupt darauf?
normalerweise mache ich es immer so:

  
window.addEvent('domready', function(){  
$('id1').addEvent('click', function(e) {  
//dann code  

aber dann müsste ich ja für jeden Link dieses hinschreiben...

Wie Du wahrscheinlich merkst, bin ich noch ganz neu in Sachen Ajax und Mootools, wäre nett wenn Du mir bei dem Problem nochmal helfen könntest.

Gruß
Dynamite

[molily]

$('id1')
aber dann müsste ich ja für jeden Link dieses hinschreiben...

$(...) gibt dir ein Element anhand einer ID. Jetzt willst du aber mehrere mit unterschiedlichen IDs. Jetzt könntest du mit $$ jedes anhand seiner ID ansprechen:

$$("#eins, #zwei, #drei, #vier") usw.

Das gibt dir eine Liste mit all diesen Elementen. Diese Liste hat die Funktion addEvent, um allen Elementen darin einen Handler zuzuweisen. Beispiel:

$$("#eins, #zwei, #drei, #vier").addEvent("click", function () { alert("clicked!"); })

Die Handler-Funktion könntest du vorher natürlich irgendwo zwischenspeichern, wenn du sie mehrfach verwenden willst:

var clickHandler = function () {
   alert("clicked!");
};
$$("#eins, #zwei").addEvent("click", clickHandler);
// später irgendwo:
$$("#drei, #vier").addEvent("click", clickHandler);

Jetzt der Zugriff auf das geklickte Element und dessen ID über das besagte Event-Objekt:

$$("#eins, #zwei").addEvent('click', function(e) {
   alert("Element with ID " + e.target.id + " clicked!");
});

Eine andere Möglichkeit wäre, allen fraglichen Elementen eine Klasse zu geben. Dann musst du sie nicht einzeln über ihre ID ansprechen, sondern kannst schreiben:

<p id="a" class="interaktiv">...</p>
<p id="b" class="interaktiv">...</p>

$$(".interaktiv").addEvent(...);

$$ erwartet CSS-artige Selektoren zum Ansprechen von Elementen im Dokument, .interaktiv ist einfach der Selektor für alle Elemente mit der Klasse "interaktiv". Eine solche Möglichkeit, um Elemente anzusprechen (und z.B. bei allen gefundenen Elementen Event-Handler zu registrieren), haben mittlerweile alle großen JS-Frameworks und man benutzt sie sehr intensiv.

Mathias

[Dynamite]

Tausend Dank, das war genau das was ich gesucht habe.
Allerdings das mit e.target.id klappt leider nicht. Er gibt keine id zurück.

  
echo "<script type=\"text/javascript\">  
/* <![CDATA[ */  
window.addEvent('domready', function(){  
    $$('.noborder').addEvent('click', function(e) {  
        e = new Event(e).stop();  
 alert(\"Element with ID \" + e.target.id + \" clicked!\");  
  
   });  
  
  
  });  
/* ]]> */  
</script>";  

Die links aus der noborder-Klasse haben alle ein id-Attribut.

Er macht zwar den alert, die Variable ist aber leer.

Habe jetzt auchschon dazu gegoogelt, aber nichts passendes gefunden.
Wäre nett wenn Du Dir das nochmal anschauen könntest.

Gruß
Dynamite

[ChrisB]

Hi,

Allerdings das mit e.target.id klappt leider nicht. Er gibt keine id zurück.

Kann ja auch nicht, wenn du zuvor e mit dem Rueckgabewert der stop-Methode eines neuen Event-Objektes ueberschreibst:

e = new Event(e).stop();
alert("Element with ID " + e.target.id + " clicked!");

MfG ChrisB

[molily]

Kann ja auch nicht, wenn du zuvor e mit dem Rueckgabewert der stop-Methode eines neuen Event-Objektes ueberschreibst:

e = new Event(e).stop();

new Event war wohl mal ein Wrapper, mit dem man browserübergreifend auf das Event-Objekt zugreifen konnte. Der scheint jetzt nicht mehr nötig zu sein (schadet offenbar aber auch nicht), die Nivellierungen laufen automatisch ab und die Handlerfunktion bekommt direkt ein vereinheitlichtes Eventobjekt als Parameter.
Und stop() erlaubt "Chaining", also e.stop() liefert wieder e zurück.
Das müsste also funktionieren.

Mathias

[molily]

e = new Event(e).stop();

new Event() ist nicht mehr notwendig, du kannst einfach e.stop() schreiben.

alert("Element with ID " + e.target.id + " clicked!");

Er macht zwar den alert, die Variable ist aber leer.

Ah, okay. Vermutlich sind diese Links nicht das letztendliche Zielelement des Ereignisses. Dann zeigt target auf ein anderes Element.

http://redaktion.selfhtml.org/selfhtml-preview/javascript/einbindung.html#currenttarget-target

Dann nutze einfach "this", um auf das Element zuzugreifen, bei dem der Event verarbeitet wird:

$$(".klasse").addEvent("click", function (e) { alert(this.id); });

Das Event-Objekt brauchst du dafür nicht unbedingt (Mootools bietet e,currentTarget auch gar nicht an).

Mathias

[Dynamite]

Morgen zusammen,
werde mir das ganze nochmal in Ruhe durchschauen, ist wohl doch nicht so einfach wie gedacht... Aber tausend Dank für die Hilfestellungen. Werde mich dann mal fleißig ans Lernen begeben.

Grüße
Dynamite