Problem loading content with jquery.

Question

Ahoy everyone,

I try to load content into a div using this tutorial. I am using jquery for this. The problem is that, when i click the link

<a href="about.html" class="panel">Profil</a>

it loads about.html as a seperate page. I tried it with several scripts, but for some reason it looks like

 $("#content").load

does not work at all! I am sure my HTML is valid as i took it nearly 1:1 from the tutorial and only modified the targets.

heres the full javascript;

$(document).ready(function() {

    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#container').load(toLoad)
        } 

    $('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#container').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#container').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

    });
});

What could be possible reasons of this?

Answer 1

You need to prevent the default action of the link:

$("a.loader").click(function(e){
  e.preventDefault();
  $("#content").load(/* Your details here */);
});

Answer 2

Return false. Let jQuery handle stopping the default action:

$(".panel").click(function ()
{
    $("#content").load();

    return false;
});

Answer 3

alright, the problem seems to be in

$('#nav li a').click(function(){
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#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());
    }
    alert("Text");
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    alert("Text 2");
    return false;
    });

because any alert("text") set in there dont show up. does this help you?

Answer 4

Oh I think I see the problem...

From that tutorial page. The index.html, about.html, portfolio.html, contact.html and term.html are all duplicate pages except for the #content portion. So does your about.html contain a <div id="content">, or is it just a page you wanted to load into the content area. If it's the latter, then I would change the "#content" to "body", from:

var toLoad = $(this).attr('href')+' #content';

to

var toLoad = $(this).attr('href')+' body';

Answer 5

alright, i got it to work with another script.