[Ajax] Javascript-Code ausführen, der per Ajax nachgeladen wurde?

myth2806 · 7. November 2008

Javascript-Code ausführen, der per Ajax nachgeladen wurde?

Hi,

ja ich habe das Problem dass ich Homepageteile per Ajax nachlade, über die .innerHTML-Eigenschaft irgendwo einbette und dann auch will, dass Javascript-Code der innerhalb von einem <script>-Tag steht (in dem nachgeladenen HTML-Code) auch ausgeführt wird. Das scheint leider nicht zu funktionieren.
Gibt es da eine erklärung für und muss ich wirklich den JS-Code seperat nachladen und per eval() ausführen??

Danke schonmal

Anzeige

Murdoc · 7. November 2008

AW: JavascriptCode ausführen, der per Ajax nachgeladen wurde?

nimm Prototype, oder verwende nen regülären ausdruck.

Code:

var scripts = scriptAusAjax.match(/<script.*>(.*)</script>/gi);
for each(script in scripts) {
 eval(script.replace(/<\/?script.*>/, ''));
}

ka habs schnell hier getippt.

bei Prototype wärs ganz einfach String.evalScripts

Code:

scriptAusAjax.evalScripts();

aber nicht vergessen das "<script>" und "</script>" nicht innerhalb von <script></script> vorkommen darf (zb in strings), das musst du so escapen: "<scr" + "ipt>" - bzw "</scr" + "ipt>"

momastieref · 6. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

hallo,

wie gehts das ganz mit query !?

big-show · 6. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

du meinst jQuery ?

Rufus-Shinra · 7. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

Moin,

mit JQuery ist es fast noch leichter je nach Ajax-Aufruf.

Documentation: http://docs.jquery.com/Ajax

In dem folgenden Beispielt wird ein Ajax-Aufruf an die ajax.php geschickt wenn die Rückantwort Script-Tags enthält werden diese automatisch mitgeparst.
Beispiel:

Code:

$('#content').load('ajax.php?act='+$(this).attr('rel'));

Nun noch ein Beispiel für eine andere Art des Ajax-Aufruf in JQuery.
Beispiel 1

Code:

$.ajax({
 type: "GET",
 url: "ajax.php?act="+$(this).attr('rel'),
 dataType: "script"
});

Beispiel 2

Code:

$.ajax({
 type: "POST",
 url: "ajax.php?act="+$(this).attr('rel'),
 dataType: "xmlDocument"
});

Wie im Beispiel 1 und 2 zu sehen ist verwenden diese Methoden einen dataType.
Über diesen wird zum schluss die Handhabung festgelegt.

So ist es möglich mit Beipiel 1 nur Javascript zu parsen.
Das ganze hat aber die Einschränkung das bei diesem Aufruf kein HTML enthalten sein darf da dieses einen Fehler auslösen würde.

momastieref · 8. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

nabend,

das ist nicht ganz das was ich meinte, ich schreib mal ne neue frage:

index.html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 $(document).ready(function(){
 $("p").click(function(){ 
 $(this).slideUp(); 
 });
 
 $("p").hover(function(){
 $(this).addClass("hilite");
 }, function (){
 $(this).removeClass("hilite");
 });
 
 $("h1").click(function(){
 $.ajax({
 url: "ajax.html",
 dataType: "script",
 success: function(html){
 $("#wrapper").replaceWith(html);
 }
 });
 });
 });
 </script>
 <style>
 p { color:red; margin:5px; cursor:pointer; }
 p.hilite { background:yellow; }
 </style>[CODE][/CODE]
</head>
<body>
 <h1>Test</h1>
 <hr />
 <p>First Paragraph</p>
 <p>Second Paragraph</p>
 <p>Yet one more Paragraph</p>
 <hr />
 <div id="wrapper">Ajax Content</div>
 <hr />
</body>
</html>

ajax.html:

HTML:

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>

das nachladen funktioniert ja, und auch der slideup effect, aller dings nur in dem bereich der in der index.html steht, aber wenn ich dann den den rest per ajax nachlade funktioniert der slideup effect nicht, also im nachgeladen bereich, wie löse ich das !?

momastieref · 9. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

push

myth2806 · 9. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

Intern wird warscheinlich beim ausführen von $("p").onClick(XY) jedes Element mit einem html-onclick-event versehen. Das kann natürlich nur bei denen passieren, die bereits im DOM sind.
Ich würde also diese Zeilen:

Code:

 $("p").click(function(){ 
 $(this).slideUp(); 
 });
 
 $("p").hover(function(){
 $(this).addClass("hilite");
 }, function (){
 $(this).removeClass("hilite");
 });

in eine eigene Funktion packen und einmal am Anfang und einmal beim Nachladen per Ajax ausführen.

Grüße

Rufus-Shinra · 9. März 2009

AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde?

Der Aufbau an sich ist soweit ganz ok.

So sollte es gehen.

Hauptdatei:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript"> 
$(document).ready(function()
{
 $("p").click(
 function()
 { 
 $(this).slideUp(); 
 }
 ); 
 
 $("p").hover(
 function()
 {
 $(this).addClass("hilite");
 }, 
 function ()
 {
 $(this).removeClass("hilite");
 }
 );
 $("h1").click(
 function()
 {
 $.ajax({ 
 url: "ajax.html", 
 dataType: "text/html", 
 success: 
 function(html)
 {
 $("#wrapper").replaceWith(html); 
 }
 }
 
 ); 
 }
 );
});
</script>
<style>
p {
 color:red;
 margin:5px;
 cursor:pointer;
}
p.hilite {
 background:yellow;
}
</style>
</head>
<body>
<h1>Test</h1>
<hr />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<hr />
<div id="wrapper">Ajax Content</div>
<hr />
</body>
</html>

ajax.html

HTML:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
 $("p").hover(function(){$(this).addClass("hilite");},function (){$(this).removeClass("hilite");});
});
</script>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>

myth2806

Das Beschreibt es sehr treffend.
Wobei eine eigene Funktion nicht unbedingt erforderlich ist nur wenn du gleich mehere Binds machen willst.

Code:

function bind_sonstiges()
{
 $("p").hover(function(){$(this).addClass("hilite");},function (){$(this).removeClass("hilite");});
 $("span").hover(function(){$(this).addClass("hilite");},function (){$(this).removeClass("hilite");});
 ...
}

Edit:
die selectierung über die tags ist keine gute idee da alle tags dabei gebunden werden!
du kannst bei jquery per id, class und tag selectieren
empfehlen würde ich folgendes

Code:

 $("#wrapper p").hover(function(){$(this).addClass("hilite");},function (){$(this).removeClass("hilite");});

oder
mit class selector

Code:

 $("#wrapper .p_hover").hover(function(){$(this).addClass("hilite");},function (){$(this).removeClass("hilite");});

Nützliche Suchen

[Ajax] Javascript-Code ausführen, der per Ajax nachgeladen wurde?

Videos zum Themenbereich