Du bist nicht angemeldet.

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

1

Dienstag, 27. Juli 2010, 16:38

prototypeJS/observe

ich hätt da gern mal ein kleines problem, und zwar folgendes:

http://chillerlan.net/stuff/observe.html

HTML

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
26
27
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" dir="ltr">
<head>
	<title>Prototype observe</title>
	<script type="text/javascript" src="js/prototaculous/prototype.js"></script>
</head>
<body>
	<table id="records">
		<thead>
			<tr><th id="blah" colspan="2">No record clicked</th></tr>
		</thead>
		<tbody>
			<tr class="blubb" id="1"><td>1</td><td>First record</td></tr>
			<tr class="blahblubb" id="2"><td>2</td><td>Second record</td></tr>
			<tr class="blubb" id="3"><td>3</td><td>Third record</td></tr>
		</tbody>
	</table>
	<script type="text/javascript">

		$$('.blubb','.blahblubb').invoke('observe', 'click', function(event) {
			$('blah').update("You clicked record #" + this.readAttribute('id'));	
		});

	</script>
</body>
</html>


das beispiel funktioniert soweit, sobald ich aber den inhalt der tabelle (bzw. des containers in meinem fall) mittels

Javascript-Quelltext

1
$('records').update(content);

aktualisiere, funktioniert der observer nicht mehr auf dem aktualisierten element (#records im beispiel).

kann mich bitte wer aufklären, woran das liegt und wie ich abhilfe schaffen kann?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Smiley™« (27. Juli 2010, 16:43)


Lord Antodias

Chefentwickler
GWCom-Team

Wohnort: München

Charaktername (GW2): Antodias

Gilde (GW2): Community Guild [GWC]

Heimwelt: Flusufer / Riverside

  • Private Nachricht senden

2

Dienstag, 27. Juli 2010, 16:54

Wenn du auf $('records') das "update" anwendest, wird der ganze Inhalt da drin ersetzt. Sprich die Elemente, die drin sind, werden entfernt und neue hinzugefügt, und diese neue haben dann auch kein observe auf sich ;)

Entweder musst du jedes Element einzeln wieder observen, nach dem du update durchgeführt hast oder du updatest die einzelnen Elemente. Zumindest fällt mir auf Anhieb nichts anderes ein :-/

Lukaso

Projektleiter
GWCom-Team

Beruf: Softwareentwickler

  • Private Nachricht senden

3

Dienstag, 27. Juli 2010, 16:55

Durch das Update wird der Inhalt der Tabelle gelöscht und dabei auch die DOM-Elemente wo der EventListner angehängt wurde. Du musst nach jedem Update die Events neu anhängen.

Edit: Grrr :brainsnake:
Developer-Blog: Änderungen von Build Creator 1.1.2 auf 1.1.4 sowie neue Webseitenfeatures
GWCom.de auf YouTube
Remember: Java is to JavaScript as Ham is to Hamster!

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

4

Dienstag, 27. Juli 2010, 17:03

sprich: ich müsste das observe-script eigentlich zusammen mit dem update() laden - soweit war ich auch schon.
der haken an der sache ist, dass der container am anfang eigentlich leer ist, ich aber den observer benötige um eben den inhalt da rein zu zaubern...
wie aber mach ich das am geschicktesten, ohne den observer doppelt zu definieren? --> henne-ei-problem... ?(

Lord Antodias

Chefentwickler
GWCom-Team

Wohnort: München

Charaktername (GW2): Antodias

Gilde (GW2): Community Guild [GWC]

Heimwelt: Flusufer / Riverside

  • Private Nachricht senden

5

Dienstag, 27. Juli 2010, 17:05

Was für einen Inhalt willst du genau reinfriemeln? Die gerade schon drin vorhandenen Zeilen?

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

6

Dienstag, 27. Juli 2010, 17:08

ok, mal in vollem umfang: http://chillerlan.net/stuff/cal-final.php ;)

ich lade den kalender momentan über ein onclick="", möchte aber eigentlich gern jegliche onclicks aus dem teil rausbekommen, und das ganze ausschliesslich über die observe-funktion laden...

Lukaso

Projektleiter
GWCom-Team

Beruf: Softwareentwickler

  • Private Nachricht senden

7

Dienstag, 27. Juli 2010, 17:09

ohne den observer doppelt zu definieren?
Mach z.B. ne Methode attachEvents(). Du könntest aber auch versuchen dir das Eventbubbling zu nutze zu machen. Die meisten Events feuern die Childelemente als Ergebnis bei einem Event auch wenn du das Event an ein Parentelement angehängt hast. Somit könntest du das Event an #blah anhängen welches ja nicht gelöscht wird. Mit up() könntest du die Zelle/Spalte/Zeile rausfinden.

Normalerweise regt mich das Eventbubbling immer auf, aber hier könnte es mal nützlich sein :).
Developer-Blog: Änderungen von Build Creator 1.1.2 auf 1.1.4 sowie neue Webseitenfeatures
GWCom.de auf YouTube
Remember: Java is to JavaScript as Ham is to Hamster!

Lord Antodias

Chefentwickler
GWCom-Team

Wohnort: München

Charaktername (GW2): Antodias

Gilde (GW2): Community Guild [GWC]

Heimwelt: Flusufer / Riverside

  • Private Nachricht senden

8

Dienstag, 27. Juli 2010, 17:13

Ah ok, ja du wirst nicht drum herum kommen, jedem Element einzeln ein observe zu verpassen. außerdem wirst du das in loadCal machen müssen, da <script>-Blöcke die per update eingespielt werden, meines Wissens nach nicht drauflos funktionieren ;)

Edit: der Vorschlag von Lukaso ersparrt dir das mit den einzelnen Elementen ;)

Lukaso

Projektleiter
GWCom-Team

Beruf: Softwareentwickler

  • Private Nachricht senden

9

Dienstag, 27. Juli 2010, 17:16

außerdem wirst du das in loadCal machen müssen, da <script>-Blöcke die per update eingespielt werden, meines Wissens nach nicht drauflos funktionieren ;)
Die Methode update() parst den Inhalt und eval()'t die Skripte (nur) Inlineskripte.
Developer-Blog: Änderungen von Build Creator 1.1.2 auf 1.1.4 sowie neue Webseitenfeatures
GWCom.de auf YouTube
Remember: Java is to JavaScript as Ham is to Hamster!

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

10

Dienstag, 27. Juli 2010, 17:24

da <script>-Blöcke die per update eingespielt werden, meines Wissens nach nicht drauflos funktionieren ;)

Edit: der Vorschlag von Lukaso ersparrt dir das mit den einzelnen Elementen ;)


script-tags werden mit einem update ausgeführt, aber lukasos vorschlag muss ich dann erst noch dechiffrieren - meine JS-Kenntnisse sind ungefähr so gut wie meine französisch-kenntnisse ;)

hier übrigens die überarbeitete variante mit dem observer - funktioniert halt im moment nur beim ersten versuch ;)
http://chillerlan.net/stuff/cal-observe.php

da kommt mir grad noch ne idee... muss ich mal ausprobieren :D


€:

muhahaha, es funktioniert tatsächlich - wieso umständlich, wenns auch einfach geht: http://chillerlan.net/stuff/cal-observe.php

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
	function observer(){
		$$('.cal-days','.cal-control','.cal-menu-item').invoke('observe', 'click', function(event) {
			new Ajax.Request('cal-observe.php?rpc=calendar',{
				method:'post',
				parameters:{data:this.readAttribute('id')},
				onSuccess:function(request){
					var txt = request.responseText.evalJSON(true);
					$('box-'+txt.id).update(txt.cal);
				}
			});
		});
	}


HTML

1
<script type="text/javascript">observer();</script>


aber nochmal vielen dank für die mühe, die ich euch gemacht hab - ohne die wäre ich nicht so schnell auf diese idee gekommen... ;)

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Smiley™« (27. Juli 2010, 17:38)


Lord Antodias

Chefentwickler
GWCom-Team

Wohnort: München

Charaktername (GW2): Antodias

Gilde (GW2): Community Guild [GWC]

Heimwelt: Flusufer / Riverside

  • Private Nachricht senden

11

Dienstag, 27. Juli 2010, 17:57

Ok, also quasi eine Funktion mit 'ner Sicherheitslücke^^

Schieb mal das observer(); einfach in das onSuccess und gut ist ;)

Kein Ding, immer wieder gern ;)

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

12

Donnerstag, 29. Juli 2010, 12:12

Ok, also quasi eine Funktion mit 'ner Sicherheitslücke^^


du meinst wegen dem <script>-tag da, oder? war ja nur versuchsweise... ^^
aber so gesehen dürfte man ja eigentlich garkeine scriptsprachen verwenden ;)

übrigens für diejenigen, die es interessiert - das was da auf der php-seite werkelt und den kalender generiert - in der "minified" version:

PHP-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function cal($x=null){
    $u=($x==null||empty($x))?time():$x//unix timestamp
    $z=mktime(date('H',$u),date('i',$u),date('s',$u),date('m',$u),1,date('Y',$u)); //first day of the month
    $w=date('w',$z); //day of week
    $a=($w==0)?6:$w-1//date('w') returns 0 for sunday, but we usually start the week at monday
    $r=ceil(($a+date('t',$z))/7); //total rows
    $c='<table>';
    for($i=0,$j=($a*-1);$i<$r;$i++){ //$i = table-rows/weeks, $j = startday negative
        $c.='<tr><td><b>'.date('W',$z+($i*60*60*24*7)).'</b></td>'//week number
        for($k=0;$k<=6;$k++,$j++){ //$k = table-cells/weekdays
            $c.='<td>'.date('j',$z+($j*60*60*24)).'</td>';
        }
        $c.='</tr>';
    }
    $c.='</table>';
    return $c;
}

Lukaso

Projektleiter
GWCom-Team

Beruf: Softwareentwickler

  • Private Nachricht senden

13

Donnerstag, 29. Juli 2010, 12:54

"minified" version
Wozu minimiert man überhaupt PHP-Code 8|? Traffic spart man dadurch nicht ... wird nur unleserlich (aber den Code kommentieren :D).
Developer-Blog: Änderungen von Build Creator 1.1.2 auf 1.1.4 sowie neue Webseitenfeatures
GWCom.de auf YouTube
Remember: Java is to JavaScript as Ham is to Hamster!

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

14

Donnerstag, 29. Juli 2010, 16:07

Wozu minimiert man überhaupt PHP-Code 8|?

einfach nur aus spass an der freude - wollte halt mal schaun, wie wenig nötig ist, um einen kleinen dauerkalender zu bauen... (~410 byte ohne kommentare, spaces und zeilenumbrüche) im grunde aber nur ums unleserlich zu machen - meine vollständige version sieht sicherlich nicht so aus ;)

bin damals mal über dieses hier gestolpert, was mir aber noch zuviel war (und auch nicht so dolle funktioniert hat) - und ein for-loop hat doch stil, nech?

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Smiley™« (29. Juli 2010, 16:16)


Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

15

Mittwoch, 22. September 2010, 21:05

so, heute bin ich mal wieder etwas zum basteln gekommen... gerade bin ich dabei, soweit es geht jegliche inline-events aus meinem html zu verbannen und den prototype-observer stattdessen einzubauen.
der xhtml-strict-kompatibilität zuliebe habe ich damals ja jegliche target="_blank" gegen ein inline-event in der form onclick="window.open(this.href);return false;" getauscht, was ja auch wie erwartet funktioniert.
nun bin ich aber auf die dumme idee gekommen, das halt einfach über eine css-klasse mit dem observer zu steuern, auch alles schön und gut:

Javascript-Quelltext

1
2
3
4
5
function extLink(){
	$$('.ext-href').invoke('observe','click',function(event){
		window.open(this.readAttribute('href'));
	});
}

jetzt ist das einzige problem, dass das angegebene link sowohl in einem neuen tab/fenster geöffnet wird, als auch im ursprungs-fenster.
frage: wie kann ich das unterbinden? ein oncklick="return false;" auf den entsprechenden links schafft dem zwar abhilfe, ist ja aber nicht sinn der sache...^^

/OT: der code braucht wohl auch mal etwas neue farbe... ;)

Lukaso

Projektleiter
GWCom-Team

Beruf: Softwareentwickler

  • Private Nachricht senden

16

Mittwoch, 22. September 2010, 21:11

Einfach ein "Event.stop(event);" in die Eventfunktion einfügen.
Developer-Blog: Änderungen von Build Creator 1.1.2 auf 1.1.4 sowie neue Webseitenfeatures
GWCom.de auf YouTube
Remember: Java is to JavaScript as Ham is to Hamster!

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

17

Mittwoch, 22. September 2010, 21:18

haha, danke, das hat geholfen! :)

etwas die apidocs lesen kann natürlich auch nicht schaden, kam aber grad nicht auf die idee... schande über mich...^^

18

Mittwoch, 22. September 2010, 21:23

Hat jetzt nicht mit dem Code zu tun, ABER Lukaso ändern die Farben, da bekommt man ja Augenkrebs !!!
Besonders das Blau beim PHP und das Rot beim JS Code sind übel.

Grüße

Smiley™

Teilzeit-Kammerjäger (5)

  • »Smiley™« ist der Autor dieses Themas

Wohnort: respawning...

Beruf: code masher, BOFH

Charaktername (GW2): Victori Nox

Gilde (GW2): Veterans of Lions Arch [LA]

Heimwelt: Ring of Fire

  • Private Nachricht senden

19

Dienstag, 8. Januar 2013, 19:45

Zitat

Die letzte Antwort auf dieses Thema liegt mehr als 838 Tage zurück.

Cool, deshalb muss ich den Fred nochmal ausgraben und Antworten, um das Rätsel aufzulösen...

Über oben genanntes Problem stolpere ich immerwieder, und die Lösung ist doch so einfach - Event.stop(event); alleine hat übrigens in den meisten Fällen, eben auch bei dem Kalender nicht geholfen. Wald und Bäume und so... :D

Javascript-Quelltext

1
2
3
4
5
$('element').stopObserving().observe('click',function(event){/*...*/});

//oder:

$$('.class').invoke('stopObserving').invoke('observe','click',function(event){/*...*/});

http://api.prototypejs.org/dom/Element/stopObserving/

Ähnliche Themen

Seitennavigation
Honored Fansite
Guild Wars Honored Fansite