Verwendung von Javascript in einer per Ajax erzeugten Seite

alexf812 · 14.02.2008, 09:47

Hallo,

per ajax lade ich in ein div eine Seite...funktioniert auch alles. In dieser Seite möchte ich nun wieder javascript benutzen. jedoch funktioniert das nicht. wenn ich in der erzeugten seite nur ein alert('hallo') reinschreibe, dann wird mir das nicht angezeigt. warum funktioniert das so nicht?

VoltFreeze · 14.02.2008, 10:31

zeig uns doch mal den ajax code und die seite die du mit ajax aufrufst.

alexf812 · 14.02.2008, 11:10

ich benutze mootools... hab mir dort nur mal ein demo angesehen

Code:

$('start').addEvent('click', function(e) {
	e = new Event(e).stop();
 
	var url = "http://localhost/blabla.html";
 
	/**
	 * The simple way for an Ajax request, use onRequest/onComplete/onFailure
	 * to do add your own Ajax depended code.
	 */
	new Ajax(url, {
		method: 'get',
		update: $('log')
	}).request();
});

in der blabla.html steht u.a. drin:

Code:

<script type="text/javascript">
alert('hallo');
</script>

ich bekomme aber kein alert fenster angezeigt. auch nicht wenn ich window.addevent('domready',function(){
alert('hallo');
})

benutze.

alexf812 · 14.02.2008, 12:49

hallo ingozen,

genau das war es...vielen vielen Dank :-)

alexf812 · 15.02.2008, 01:10

Hallo Ingo,

ganz klappt es doch noch nicht... vielleicht könntest du mir nochmal einen Rat geben. Die in der jsonservice.php erzeugten Links, sollten beim überfahren eine alert-box auslösen, jedoch klappt das leider nicht.hier mal meine Dateien:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="mootools-1.11.js"></script>
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
var json = {

	init: function(){
		json.start();
	},
	
	start: function(){
		
		
		new Ajax('jsonservice.php', {
				
				evalScripts: true,
				onComplete: function(req){
					obj = Json.evaluate(req);
					for(key in obj){
					s = String(obj[key]).split(',');
						for(i=1;i<=s.length;i++){
							$(key+'_'+i).innerHTML = s[i-1];
						}
					}	
					
				}
					
		}).request();
		
		
		

	}

}

window.addEvent('domready',function(){
	
	var a = $$('.bla');
	a.each(function(el){
		el.addEvent('mouseenter',function(){
			alert('klappt');
		})
	})
		
})



//window.addEvent('domready', json.init);

</script>
</head>

<body>
<h1>JSON</h1>
<a href="#" onclick="json.init(); return false;">klick</a>
<table border="1">
	<tr>
		<td id="day_1">t1</td><td id="day_2">t2</td>
	</tr>
	<tr>
		<td id="weather_1">w1</td><td id="weather_2">w2</td>
	</tr>
</table>
</body>
</html>

jsonservice.php

Code:

<?php
	require_once('JSON.php');	

	//make a new json parser
	$json = new Services_JSON;

	//decode incoming JSON string
	$jsonRequest = $json->decode(file_get_contents('php://input'));

	//change day
	$jsonRequest->day = array('<a class="bla" href="#">monday</a>','sunday');

	//change weather
	$jsonRequest->weather = array('sun','<a class="bla" href="#">rain</a>');

	//echo the changed jsonRequest
	echo $json->encode($jsonRequest);
?>

steffenk · 15.02.2008, 10:17

das das überhaupt klappt ist ein Wunder, was Du da in jsonservice machst ist ja abenteuerlich.

mach in json eine methode:

Code:

bla: function() {
  var a = $$('.bla');
  a.each(function(el){
  el.addEvent('mouseenter',function(){
    alert('klappt');
  })
}),

und ruf die in onComplete auf.

alexf812 · 15.02.2008, 11:11

hi steffen,

das war auch nur ein test. hatte ein tut gefunden und es etwas verändert.

deine möglichkeit funktioniert.... mein problem, ich möchte die tooltips von mootols benutzen. wenn ich die auf das mouseenter-event anwenden will, dann wird beim ersten drüberfahren nix angezeigt. erst wenn ich erneut über den link gehe klappt es. ich weiss nicht ob es damit zusammenhängt, das innerhalb der tooltips schon das event mouseenter benutzt wird.

alexf812 · 15.02.2008, 11:22

ok... jetzt geht alles.

habe für onComplete eine function, die diese Tooltips anzeigt. Leider geht es nur im FF und nicht im IE6 oder IE7. ich habe ja nur das plugin aus mootools eingebunden.

als fehler kommt immer bezeichner, zeichenfolge oder zahl erwartet...

steffenk · 15.02.2008, 11:29

benutze jslint um dein JS zu prüfen.

alexf812 · 15.02.2008, 15:24

danke für den tip :-)

alexf812 · 15.02.2008, 16:22

hallo Steffen,

du hattest ja vorhin geschrieben, das es ein wunder ist, das das alles klappt, wasi n der jsonservice.php drin steht. wie wäre es denn besser? bzw. wie löst man solche dinge, wie das mit dem link? ich will ja nach dem ajax-request die id mit einem link ersetzen.

steffenk · 15.02.2008, 17:10

naja, ohne Dir jetzt ein komplettes Script zu liefern:

Du solltest es besser strukturieren. D.h. bau Dir Objekte / Klassen. Dann machst Du eine window.addEvent('domready',RegisterObject); In diesem Register.Object hast Du all Deine Eventlistener drin.
Das hat den Vorteil, das Du nach Aktualisierung die Funktion aufrufen kannst und alle Listener wieder initialisiert sind.

onclick="..." sollte man grundsätzlich vermeiden, dafür gibts ja die Eventlistener.

Schau mal in meinen Prototype Workshop, da wird es so gemacht (Prinzip ist das gleiche).

In Deiner jsonservice.php gibts einige Fragezeichen, was soll
$jsonRequest = $json->decode(file_get_contents('php://input')); ? Ich seh nicht das Du irgendwo was übergibst.
In dem nächsten beitrag im Workshop geh ich auf JSON-Techniken ein, das könnter Dir helfen.

alexf812 · 15.02.2008, 20:08

ok ich schau mir das mal an... den php-code habe ich aus einem tutorial. es stand auch so in der doku auf pear.php.net

alexf812 · 15.02.2008, 20:19

dann freu ich mich schon auf die JSON-Techniken... dein Workshop ist gut verständlich, ist ja bei mootools fast alles genauso...

was mich aber doch schon mal interessieren würde, ist das ajax-update und json. ich habe ein div und möchte nach dem update nicht einfach nur einen wert da reinschreiben, sondern einen link... könntest du mir da kurz weiterhelfen? ich will kein komplettes script, aber ich finde auch im netzt nicht so wirklich viel dazu

steffenk · 16.02.2008, 01:16

die einfache Variante?

Code:

new Ajax('ajax.php', {
   method: 'post',
   update: $('blubb')
}).request();
MyEventHandler.registerEvents();

ajax.php

PHP-Code:


			
echo '<a href="#" id="neuerLink">blobb</a>';