kostenloser Webspace werbefrei: lima-city


JQuery: Javascript von geladenen Inhalt funktioniert nicht

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    all-web

    all-web hat kostenlosen Webspace.

    Heyho
    Analg zum Theard http://www.lima-city.de/thread/layoutkonzept-portfolio-zum-bewerten versuche ich mich nun mit der Umsetzung des Layouts. Der aktuelle Stand der Programmierung findet Ihr unter http://testing.globals.ch/newpage/. Grundsätzlich läuft die Umsetzung super, beachtet bitte den unübersichtlichen ref="/tag/code">Code nicht, dieser wird noch bereinigt.

    Leider aber habe ich ein Problem: In den per AJAX nachgeladenen Inhalten funktioniert das enthaltene Javascript nicht, oder nur teilweise.

    Es funktioniert so:
    - Es bestehen zwei container #header und #content, welche bei einem Seitenaufruf mit der funktion .get() aktualisiert werden
    - Ich habe eine Funktion geschrieben, die beide container aktualisiert, den Loading-Screen steuert und anschliessend wieder einblendet.
    - Ein link wird mithilfe folgendem code umgeleitet:
    $("#nav_startseite").click(function(){blendfrage ("index.php", "#nav_startseite", "close"); return false; });
    (#nav_startseite ist die ID des links, index.php die zu ladende datei und close eine anweisung für das Menü).
    -Funktion blendfrage(), ich habe diese hier ein wenig zur lesbarkeit gekürzt.
    function blendfrage(datei, quelle, subnav) {
    			//�berpr�fung ob die Seite schon geladen wurde!
    			if(datei != act) { 
    				//Ausblenden
    				
    				$('#loadscreen').fadeIn(200);
    				//Titel animieren
    				$("#header").fadeOut(100, function() {
    					$.get("lay_header.php", { "import": "1", "get": quelle }, function(data){
    						$("#header").html(data);
    						$("#header").fadeIn(200);
    					});
    				});
    				
    				$("#content").fadeOut(400, function() {
    					//Animation abgeshclossen
    						$.get(datei, { "import": "1" }, function(data){
    							//Daten schreiben
    							$("#content").html(data);
    							$.getScript("res/script_content.js");
    							$('#loadscreen').fadeOut(500);
    							//Wieder einblenden
    							$("#content").fadeIn(1000);
    							act = datei;
    						});
    						
    						});
    						
    			};
    		};

    Wie ihr seht, wird mit $.getScript("res/script_content.js"); ein weiteres js-file nachgeladen, in welchem des javascript-inhalt für die geladene Seite enthalten ist. Laut google wird so gewährleistet, dass das geladene script im neuen content aktiv ist.

    NUR: Die funktion blendfrage kann ich im geladenen inhalt nicht ausführen. Wenn ich ein link wie oben geschrieben umleiten versuche, navigiert der browser normal zu der seite, als wäre nichts hinterlegt. Weiss jemand, weshalb dies so ist? Auch z.B. funktioniert der Schaukasten nach einem aufruf über das Menü/AJAX nciht mehr.

    Thx & Grüsse

    Beitrag zuletzt geändert: 7.3.2011 11:16:56 von all-web
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    du baust das javascript anscheinend mit .html ein, das ist leider falsch^^
    du musst das ganze per dom einfügen, damit es auch ausgeführt wird. wenn du also ein JS file nachläst dann vllt über diese funktion:

    function nachLaden() {
              var oScript = document.createElement("script");
              oScript.src = "example1.js";
              document.body.appendChild(oScript);
            }


    damit erzeugst du am ende des documents:
    <script src="example1.js"></script>
    welches dann interpretiert wird im normalfall und der code geladen + ausgeführt wird.

    das ist mein informationsstand.
    ansonsten für den notfall

    vlt hilfts dir =) vllt hat jemand anders auch ne bessere idee :-D
  4. t*****b

    ggamee schrieb:
    du baust das javascript anscheinend mit .html ein, das ist leider falsch^^
    du musst das ganze per dom einfügen, damit es auch ausgeführt wird. wenn du also ein JS file nachläst dann vllt über diese funktion:


    Das macht ja $("#content").html(data), darum kann das nicht der Grund sein.

    Wie rufst du die Funktion blendfrage() aus dem geladenen HTML auf? Direkt per OnClick-Event im Link? Ansonsten müsstest du den neuen Links erst wieder das Event hinzufügen.
  5. g****e

    optimiert sehe das ganze vllt so aus:

    function nachLaden(scriptname) {
              var oScript = document.createElement("script");
              oScript.src = scriptname + ".js";
              document.body.appendChild(oScript);
    }
    
    function loadNewContent( ... ) {
        $(...).fadeOut();
        $(...).ajax(newcontent);
        var array = $('#GETSCRIPTS').html().split('|');
        for ( i=0 ; i < array.length ; i++ ) {
            nachLaden( array[i] );
        }
        $('#GETSCRIPTS').remove();
        $(...).fadeIn();
    }


    #GETSCRIPTS ist ein display:none; container in dem nachgeladenen scriptnamen für die jeweilige seite. ist aber nur ein kleiner rohbau.

    optimal ists aber nicht. lad lieber alles auf einmal bei seitenbesuch, sofern es nicht zuviel ist.
  6. kochmarkus

    Co-Admin Kostenloser Webspace von kochmarkus

    kochmarkus hat kostenlosen Webspace.

    Wenn du einen Event Handler, wie click für eine bestimmte Klasse/ID definierst und später durch nachladen neue Element mit der gleichen Klasse hinzukommen funktioniert dafür der Handler nicht. Handler funktionieren nur für Element die zum Zeitpunkt des einrichtens des Handlers schon auf der Seite sind.

    Du musst die live() Option verwenden damit Event Handler auch für nachgeladene Sahen funktionieren.
    z.B.
    $("#nav_startseite").live("click", function(){blendfrage ("index.php", "#nav_startseite", "close"); return false; });
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!