Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax - Dynamic Content mit JS in DIV laden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ajax - Dynamic Content mit JS in DIV laden

    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
    Code:
    <script type="text/javascript">
    ...
    ...
    ..
    .
    </script>
    Ausserdam soll auchnoch die lytebox als externes JS per
    Code:
    <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

    Code:
    /***********************************************
    * 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:
    Code:
    <div id="loadContent"></div>
    Aufgerufen wird die Funktion per Link:
    Code:
    <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


  • #2
    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.
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      benutze jQuery und alles wird schön schau hier

      Unbenanntes Dokument musst dir mal im FireBug den Quellcode anschauen, bestimmt hilft es dir weiter
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

      Kommentar


      • #4
        Zitat von nikosch Beitrag anzeigen
        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.

        Kommentar


        • #5
          Zitat von nickBee Beitrag anzeigen
          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
          @fschmengler - @fschmengler - @schmengler
          PHP Blog - Magento Entwicklung - CSS Ribbon Generator

          Kommentar


          • #6
            Zitat von fab Beitrag anzeigen
            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...
            Create your own quiz show.

            Kommentar


            • #7
              Okay, das war mir nicht bekannt, wieder was gelernt
              @fschmengler - @fschmengler - @schmengler
              PHP Blog - Magento Entwicklung - CSS Ribbon Generator

              Kommentar


              • #8
                Zitat von nikosch Beitrag anzeigen
                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.

                Kommentar


                • #9
                  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..
                  --

                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                  --

                  Kommentar

                  Lädt...
                  X