Ajax - Dynamic Content mit JS in DIV laden

[nickBee]

Sorry, ausversehen ins falsche Unterforum gepostet, bitte nach "JavaScript, Ajax und mehr" verschieben!

hi,

ich bin absolut am ende und benötige dringend eure hilfe!
Ich möchte bzw. habe eine website erstellt auf der per Ajax dynamisch Content in ein Div geladen werden soll.
Nun habe ich aber das Problem das sich in der test.html welche in das Div geladen werden soll ein Javascript befindet welches beim aufrufen aber nicht ausgeführt wird.
Rufe ich die test.html allein auf funktioniert alles perfekt. Rufe ich die test.html über das Ajax-script im Div auf zeigt er mir zwar den Content aber führt das darin enthaltene Javascript nicht aus.
Dazu muss noch gesagt sein das das Javascript selbst nicht extern sondern direkt im code der test.html liegt, sprich

<script type="text/javascript">
...
...
..
.
</script>

Ausserdam soll auchnoch die lytebox als externes JS per

<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />

ausgeführt werden, könnte ich aber auch in die test.html reinpacken.


Verwendet habe ich ein Ajax-script von http://www.dynamicdrive.com (direktlink auf das script) welches ich im head der index.html aufrufe um per Link die test.html in den Div zu laden

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

Div indem das Content aufgerufen wird:

<div id="loadContent"></div>

Aufgerufen wird die Funktion per Link:

<a href="javascript:ajaxpage('test.html', 'loadContent');">Link</a>

nach langer Googel-suche bin ich dann doch bei eval gelandet, ich verstehe aber nicht wie ich dies in das script selbst einbauen soll.
Ich hoffe jemand kann mir bei meinem Problem helfen, oder gar ein anderes Script empfehlen. Das ganze ist absolutes Neuland für mich.
Sorry für das kilometerlange post, aber ich bin gerade ein bisschen frustriert

Schonmal danke für eure Antworten!
PS: Ich möchte nicht mit iFrame arbeiten da mir sonst der Seitenaufbau zulange dauert, und das ganze ja auch total out ist.

Greetz
nickBee

[nikosch]

ich bin absolut am ende und benötige dringend eure hilfe!

Solchen Müll kannst Du Dir direkt klemmen.

Und via Ajax ein HTML aufrufen? Das klingt ziemlich unsinnig.

[BlackScorp]

benutze jQuery und alles wird schön schau hier

Unbenanntes Dokument musst dir mal im FireBug den Quellcode anschauen, bestimmt hilft es dir weiter

[nickBee]

Solchen Müll kannst Du Dir direkt klemmen.

Und via Ajax ein HTML aufrufen? Das klingt ziemlich unsinnig.

Danke für deine äußerst freundliche Antwort *ironie*, bin nunmal nicht so ein überpro wie du, allerdings hilft mir deine Antwort überhaupt nicht weiter!

@BlackScorp
Vielen Dank, werde mir das ganze mal anschaun.

[fab]

Rufe ich die test.html über das Ajax-script im Div auf zeigt er mir zwar den Content aber führt das darin enthaltene Javascript nicht aus.

Richtig, nachträglich ins DOM eingefügte <script> Elemente werden nicht ausgeführt. Ergo funktioniert das was du vorhast nicht, egal was für ein Framework du fürs AJA"X" benutzt.

Eine allgemeingültige Lösung gibt es da nicht, hängt ganz davon ab, was in deiner test.html steht und was für Skripte da ausgeführt werden sollen

[agrajag]

Richtig, nachträglich ins DOM eingefügte <script> Elemente werden nicht ausgeführt. Ergo funktioniert das was du vorhast nicht, egal was für ein Framework du fürs AJA"X" benutzt.

Es gibt aufjedenfall Frameworks die dir das ohne weiteres erlauben. Bei Prototype gibt es beispielsweise die Option evalScripts: true .... Ich vermute mal bei jQuery und Co gibt es ähnliches...

[fab]

Okay, das war mir nicht bekannt, wieder was gelernt

[mquadrat]

Solchen Müll kannst Du Dir direkt klemmen.

Und via Ajax ein HTML aufrufen? Das klingt ziemlich unsinnig.

Ein bisschen netter wäre sicher auch möglich gewesen. Ob als Aufrufziel des AJAX Calls nun ein PHP, ein HTML oder ein was auch immer genutzt wird ist für das geschilderte Problem ja unerheblich.

Zum Thema: Sofern Lytebox (kenn ich persönlich jetzt nicht) bereits auf einem der bekannten JS Frameworks basiert (z.B. jQuery, Prototype, Mootools) solltest du dieses Framework auch für den AJAX Call verwenden. Bei Moools lässt sich beispielsweise auch per Option festlegen, ob enthaltenes JS ausgeführt werden soll.

[nikosch]

Ob als Aufrufziel des AJAX Calls nun ein PHP, ein HTML oder ein was auch immer genutzt wird ist für das geschilderte Problem ja unerheblich.

Wieso ist das unerheblich. HTML kann immer nur vollständige HTML-Dokumente liefern, während ich mit PHP JSON, JS-Fragemente oder plain text liefern kann.

Rufe ich die test.html allein auf funktioniert alles perfekt. Rufe ich die test.html über das Ajax-script im Div auf zeigt er mir zwar den Content aber führt das darin enthaltene Javascript nicht aus.

klingt für mich absolut so, als könnte das der Grund des Problems sein.

Ein bisschen netter wäre sicher auch möglich gewesen.

Genau. Und weniger Schmacht und ‘ich sterbe gleich, wenn mir nicht jemand mein Problem löst’ ist auch immer möglich. Bei solchen bescheuerten „Disclaimern“ hat man schon im Vporfeld keine Lust mehr zu antworten..