#1 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 + Multi-Zitat Zitieren
#2 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>" + Multi-Zitat Zitieren
#3 6. März 2009 AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde? hallo, wie gehts das ganz mit query !? + Multi-Zitat Zitieren
#4 6. März 2009 AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde? du meinst jQuery ? + Multi-Zitat Zitieren
#5 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. + Multi-Zitat Zitieren
#6 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 !? + Multi-Zitat Zitieren
#7 9. März 2009 AW: Javascript-Code ausführen, der per Ajax nachgeladen wurde? push + Multi-Zitat Zitieren
#8 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 + Multi-Zitat Zitieren
#9 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");}); + Multi-Zitat Zitieren