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?

Your syntax is looking OK at this point so it could perhaps be something else minor that's causing issues. Are you running Firebug to help debug the ajax communication with the server? -- getfirebug.com — T. Stone
– T. Stone, Commented Sep 12, 2009 at 18:43
the firebug console does not report any bugs (with the default settings) — ngmir
– ngmir, Commented Sep 12, 2009 at 19:38
i tried only on FF 3.5. i assumed that if its not working with FF its not working at all :) i will do some tests tomorrow — ngmir
– ngmir, Commented Sep 12, 2009 at 22:07
I still think this didn't work for a simple reason... maybe you're using ".htm" for your file names and the script relies on the file name ending with ".html", hence the .attr('href').length-5 in the script — Mottie
– Mottie, Commented Sep 18, 2009 at 4:51

Sampson · Accepted Answer · 2009-09-12 17:00:48Z

3

You need to prevent the default action of the link:

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

answered Sep 12, 2009 at 17:00

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ngmir Over a year ago

does not have any effect either, but thanks for the fast reply

cllpse · Accepted Answer · 2009-09-12 17:19:10Z

0

Return false. Let jQuery handle stopping the default action:

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

    return false;
});

answered Sep 12, 2009 at 17:19

cllpse

21.8k37 gold badges134 silver badges170 bronze badges

1 Comment

ngmir Over a year ago

i added the full javascript, and as you can see, return false is included - thanks

ngmir · Accepted Answer · 2009-09-12 20:13:35Z

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?

Mottie · Accepted Answer · 2009-09-12 22:22:29Z

0

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

answered Sep 12, 2009 at 22:22

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Comments

ngmir · Accepted Answer · 2009-09-13 11:09:00Z

0

alright, i got it to work with another script.

answered Sep 13, 2009 at 11:09

ngmir

5088 silver badges28 bronze badges

Collectives™ on Stack Overflow

Problem loading content with jquery

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related