Dynamisches nachladen von Inhalten

A

alter_anfaenger

New member
Hallo Leute, ich bräuchte nochmals eure Hilfe:

Bei unten folgenden Code bekomme ich immer die Fehlermeldung: screen_webs.jpg

screen_webs.jpg

Hier mein Schnipsel:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seite</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
 
<script language="JavaScript"
            type="text/javascript">

$(document).ready(function(){
    var hash = window.location.hash.substr(1);
 
    $('a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#xcontent').load(toLoad);
        }
    });
 
    var clickEvent = function ()
    {
        var toLoad = $(this).attr('href')+' #content';
        window.location.hash = $(this).attr('href')
                               .substr(0, $(this).attr('href').length - 5);
 
        $('#xcontent').hide('fast', loadContent);
        $('#load').remove();
        $('#load').fadeIn('normal');
 
        function loadContent() {
            $('#xcontent').load(toLoad, '', showNewContent)
        }
        function showNewContent() {
            $('#xcontent a').click(clickEvent);
            $('#xcontent').show('normal', hideLoader);
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
    };
 
    $('a').click(clickEvent);
 
});

</script>

</head>
 
<body>
 

  <div id="wrapper">
  
    <div id="menue">
      <ul id="nav">
        <li><a href="news.php">Home</a></li>
        <li><a href="contact.php">Link2</a></li>
      </ul>
    </div>
 
    <div id="content">
      <div id="ueberschrift"> Home <br /></div>
    
      Text und ein Link <a href="impressum.php">Link</a> </div>
     
  </div>
 
</div>
 
 
</body>
</html>

Wo liegt der Fehler!

DANKE Euch!

Gruss E.
 
Zuletzt bearbeitet:
Du hast ganz einfach vergessen jquery einzubinden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Bist du dir sicher das du mit XHTML arbeiten möchtest... das ist eine Qual.

<span id="strich">
ID is a unique identifier.

- - - Aktualisiert - - -

Ich habe doch gerade noch 2 Id's mit "stich" gesehen warum änderst du den code ab, wenn den schreib doch ein Grund für die Änderung.
Statt den Content zu löschen hättest Du das Attribut id einfach durch class ersetzen müssen.
 
Das ist nicht notwendig, wichtiger ist mir, das das js funktioniert:
Muss ich das hier :
HTML: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">

....

</script>

im header einfügen?
 
Zuletzt bearbeitet von einem Moderator:
Ja genau, du musst bevor du jquery verwendest, es auch einbinden.
also <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 muss in den Head.

$(document).ready(function()
das $ Zeichen ist meistens ein Hinweis das es sich um jquery handelt. Deswegen steht bei der Fehlmeldung "$ ist not defined."

Hast du alles richtig gemacht sollte der Fehler weg sein.

Wenn JS immer noch nicht ausgeführt wird dann liegt es an den doofen xhtml.
XHTML ist sehr sehr strict. Also wenn Du schreibst <td></TD>, dann ist das in XHTML ein Syntaxfehler... Dokument wird nicht dargestellt.
Bei JS wird das noch grusliger, wenn Du schreibst if(1<2), dann ist das auch ein Syntaxfehler weil, der XHMTL Parser versucht jede sich öffnende Spitze Klammer < als HTML zu interpretieren. 2 ist kein HTML Tag also Syntax Fehler. Dafür gibt es in XHTML die CDATA Tags oder Blöcke, die weisen den Parser drauf hin "Ah jetzt kommt JS".


Am besten baust den head so auf:
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Seite</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css"></style>

Das ist dann reguläres HTML 5.0. Von XHTML würde ich erstmal die Finger lassen.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben