inhalt von html-seiten mit einem link dynamisch laden & anzeigen lassen

baley · 03.07.2012

morgen,

was habe ich bei der abfrage falsch gemacht?:

index.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>INDEX</title>
    <!-- jquery-framework einbinden, datei im gleichen ordner -->
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 
    <!-- eigene javascript-datei für den eigenen js-code -->
    <script type="text/javascript" src="ajax.js"></script>
 
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
    <div id="navigation"> 
        <a href="seite_1.html">seite 1</a> | <a href="seite_2.html">seite 2</a>
    </div>
 
    <div id="content" align="center">
        <p>willkommen auf der startseite!</p>
    </div>
 
</body>
</html>

seite_1.html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Seite1</title>
    <!-- jquery-framework einbinden, datei im gleichen ordner -->
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 
    <!-- eigene javascript-datei für den eigenen js-code -->
    <script type="text/javascript" src="ajax.js"></script>
 
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
 
    <section style="display: block;" id="content">
    <p>sie haben die seite 1 aufgerufen!<p>
    <li> eins </li>
    <div id="content2">TEST</div>
    </section>
 
</body>
</html>

ajax.js:

HTML:

// code direkt nach seitenaufbau starten
$(document).ready(function()
{
   // allen links im div 'navigation' & 'content' eine click()-funktion zuweisen
   // es wird auch auf alle links von der dynamisch nachgeladenen
   // seiten reagiert (solange die seiten in das content-div geladen werden)!
$("#navigation a, #content a").not(".extern").live("click",function()   {
    // das link-ziel jeweils auslesen & zwischenspeichern
    var pageToLoad = $(this).attr("href");
    // varaible für den neuen inhalt
    var pageContent;
 
    // die externe seite laden, der inhalt ist dann in 'data'
    $.get(pageToLoad, function(data)
    {
       // den inhalt zwischenspeichern
       pageContent=data;
 
       // content-div langsam ausblenden
       $("#content").fadeOut("slow", function()
       {
        // wenn das ausblenden fertig ist, inhalt an das content-div übergeben
        $("#content").html(pageContent);
        // content-div langsam wieder einblenden lassen
        $("#content").fadeIn("slow");
 
        // oder in kurzer form (vorzuziehen)
        // $("#content").html(pageContent).fadeIn("slow");
       });
    });
 
    // wichtig! sonst wird der a-link im browser aufgerufen!
    return false;
});
});

style.css:

HTML:

#content
{
    width: 360px;
    border: 2px solid grey;
    padding: 20px;
    background-color: #CCC;
}
#content2{
    
    width: 60px;
    border: 2px solid grey;
    padding: 20px;
    background-color: #DDD;
}

jQuery-1.6.2.min.js und alle anderen dateien liegen im root.

Wenn ich auf den link zu seite_1.html klicke, erscheint der inhalt der seite nicht...

hier sind die dateien:

gruß

jimny1999 · 03.07.2012

AW: inhalt von html-seiten mit einem link dynamisch laden & anzeigen lassen

Dein Beispiel funktioniert bei mir ohne Änderungen, wenn ich es auf einem lokalen Webserver über einen Browser aufrufe. Ohne den Webserver geht's nicht.

mindraper · 03.07.2012

AW: inhalt von html-seiten mit einem link dynamisch laden & anzeigen lassen

hi @TE,

das ginge einfacher mit jQuery's load()-methode. ist aber letztendlich egal.

in deiner seite_1.html ist ein syntaktischer fehler: ein li-tag ohne das zugehörige eltern-tag (ol/ul).

dass es ohne webserver nicht funktioniert ist logisch, denn es greift bei ajax-requests die same-origin-policy. diese setzt sich aus protokoll, server, etc. zusammen. auf dem lokalen file-system gibt es diese bestandteile aber nicht (z. b. kein protokoll), daher funktioniert ein ajax-request i. d. r. nur mit server

gruß

baley · 07.07.2012

AW: inhalt von html-seiten mit einem link dynamisch laden & anzeigen lassen

du hast recht, jetzt gehts...