JQuery - Dynamischer Content

html.de-Forum JavaScript
1

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]

Seite
Slideshow Image 1 Slideshow Image 2 Slideshow Image 3 Slideshow Image 4
Home
Text und ein Link Link

[/HTML]jQuery - js.js

$(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

2

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.

3

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

4

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:

function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content').show('normal',hideLoader()); }

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);

});[/code]

5

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]

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

   
</div>
[/HTML]
6

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">…</div>
[/code]

Wenn du dir die Firebug-Extension für den Firefox installierst, kannst du das live in der DOM-Ansicht verfolgen.

7

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…