• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JQuery - Dynamischer Content

M

Mando

Neues Mitglied
Hey zusammen,

ich habe mit jQuery ein kleine Funktion die mir dynamisch einen Content (html seite) in ein DIV Container lädt. Funktioniert einwandfrei. Das Problem ist nur wenn ich Links innerhalb diesem DIVContainer verlinke funktioniert diese Funktion nicht mehr und er behandelt es als normalen Link. - öffnet ein ganz nomalen tab anstatt den bestimmten content einzuladen.

Hier mal die Dateien

HTML
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" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css"></style>

<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="gal.js"></script>
</head>

<body>

<div id="divoben"></div>
<div id="schatten">

  <div id="alles">
  <!-- Galerie -->
    <div id="slideshow"> <img src="galslide/image1.jpg" alt="Slideshow Image 1" class="active" /> <img src="galslide/image2.jpg" alt="Slideshow Image 2" /> <img src="galslide/image3.jpg" alt="Slideshow Image 3" /> <img src="galslide/image4.jpg" alt="Slideshow Image 4" /></div>
   <!-- Das Menue - wenn man hier auf den Link klickt wird der Content eingefügt. -->
    <div id="menue">
      <ul id="nav">
        <li><a href="Home.html">Home</a><span id="strich">|</span></li>
        <li><a href="about.html">Link2</a><span id="strich">|</span></li>
      </ul>
    </div>
    <!-- hier ist das DIV in dem der Content landet -->
    <div id="content">
      <div id="ueberschrift"> Home <br /></div>
      <!-- hier ist der Link der auch einen bestimmten inhalt dynamisch rein laden soll -->
      Text und ein Link <a href="about.html">Link</a> </div>
      
  </div>
  
</div>

<div id="divende"></div>
<div id="endeaussen">
  <div id="ende"> </div>
</div>

</body>
</html>
jQuery - js.js
Code: 
$(document).ready(function() {
                           
    var hash = window.location.hash.substr(1);
    var href = $('a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                            
    });

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

});
Wär cool wenn ihr mir helfen könntet.

Grüße und Danke
Mando
 
Du müsstest nach dem Laden neuen Inhalts das entsprechende Click-Event an etwaige neue a-Elemente (und zwar vermutlich nur an diese, am besten per $('.elementWithChangedContent a') oder so) binden beziehungsweise auch noch anderen Code aus document.ready erneut ausführen. Genauer geht gerade nicht.
 
Hey, danke für die schnelle Antwort.
Leider bin ich nicht so der JavaScript Experte. Hab das ganze anhand eines Tutorials gebaut. Wüsste jetzt auch garnicht wo ich da des einbauen sollte. Wäre es vllt sinnvoll die ganze Page mal zu Posten?

Grüße und Danke
Mando
 
Ich habe #content aus der Indexseite in #xcontent umbenannt, da du sonst die ID doppelt vergeben hast.

Nachdem ich ewig überlegt habe, wieso das Kram nicht hinhaut, bemerkte ich das hier:

Code: 
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent[color=red]()[/color])
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader[color=red]()[/color]);
        }

So sollte es gehen:

Code: 
$(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);

});
 
Hey Danke, geht einwandfrei!!
Nur eine Frage. Das DIV heist ja jetzt xcontent und das Div in meinen HTML Dateien von denen ja der Conent kommt heißt einfach nur content.
Versteh ich des dan richtig das den inhalt von dem DIV Content in das Haupt DIV xcontent geladen wird??

Hier noch so eine HTML Datei.
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>mmm... Ajax!</title>


</head>
<body>
    
    <div id="content">
      
      <br /><br />
    Herzlichen Willkommen auf der Homepage meines...
    <a href="leistunga.html">Leistungsspektrum</a> 

       
    </div>


</body>
</html>
 
Ich habe die Dateien lokal schon wieder gelöscht, aber ich glaube, das vollständige div-Element wurde in das Ziel-div kopiert, also:

Code: 
<div id="content">

    [color=red]<div id="content">…</div>[/color]

</div>

Wenn du dir die Firebug-Extension für den Firefox installierst, kannst du das live in der DOM-Ansicht verfolgen.
 
Eine Frage hätt ich noch...und zwar hab ich links die auf eine externe Seite verweisen...diese funktionieren jetzt nicht...ich hab im Code schon en weng rum probiert...aber er versucht jedesmal den Content zu laden dabei will ich ja auf eine neue Seite verweisen.....hab schon versucht diesen Links eine neue ID zu geben...so das die Funktionen da nicht drauf angewendet wird...klappt leider nicht...ich hab auch schon versucht über eine direkt JavaScript Funktion im Link...das ganze zu übergehen..
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben