..Or something.

Maybe I'm just doing it wrong. Here's the code:

<div id="top"><a href="index.php">Home</a> | <a href="otherpage.php">Other Page</a></div>
<div id="container">
<script type="text/javascript">
$('#top a').click(function(){  
        var pageURL=$(this).attr('href');
    $('#container').fadeOut(100);
    $('#container').load(pageURL '#container');
    $('#container').fadeIn(400);
    return false;
});
</script>
</div>

So what I want it to do is when you click a link in the #top div, it would fade out the current page, load up the URL you clicked on (but just the #container div) and fade back in with the new content.

Problem is, it doesn't want to load up just the container. Either you have to load the entire page, not just the contents of the container div. But when I run that code, it also displays the #top div, indicating that it's loading the entire page, not just the container.

How can I get it to just load the container? I can do what I want it to by using

    $('#container').load('otherpage.php #container');

but as soon as I put in the pageURL variable it decides not to work :\.

I've tried everything, seriously. I've been at this for a half hour now. Somebody please help :P

Thanks,

-PG

There's a couple of holes I can poke in your logic.

1. You're asking jQuery to read the contents of otherpage.php#container into #container, same #id.

2. Your jQuery snippet handling all this in IN thispage#container!

Try using a different ID in otherpage.php and move your jQuery snippet out of thispage#container.

[edit] Don't forget to wrap your snippet in a call to jQuery().ready(function() { }); [/edit]

Silly you! You forgot a comma in this line, and your script is crashing, not getting to the "return false", and so the link is not being stopped (you're being redirected... check your browser url as it changes)

$('#container').load(pageURL, '#container'); // <--- note the comma after pageURL.

Ah, I've tried the comma thing, I noticed it too.

I have moved the script out of container, and have put it in right after #top. With the comma it works, but it still doesn't grab just #container. Without the comma it crashes.

Right, I noticed that it's not parsing out the container bit. A little research on jQuery.com shows that it should be the following:

$('#container').load(pageURL + ' #container');

This tells the load function to pull 'ABC.html #container', which is properly referencing the fragment in the URL.

Hmm, I've tried that too. I'll try it again and check back with you later

From the notes for jQuery.load():-

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Do you think jQuery could to insert the other #container and contents into an element by the same id name? It's an obvious DOM conflict and will throw jQuery targeting out the window. As I mentioned before, change either #content id to some other unique name.

metho, it's not a DOM conflict, because they're separate Document instances. His code should work fine.

smoseley have you tried to get jQuery to produce invalidly nested element id's?

Does not work:

<script type="text/javascript">
var pageVar = 'jquery.load.htm';
jQuery('#content').load(pageVar + ' #content');
</script>

The resulting (invalid) html would be:

<div id="content"><div id="content">External page #content html</div><div>

The following works fine; the only difference is changing the ids to unique values (likewise in the webpages), as required in a healthy dom.

<script type="text/javascript">
var pageVar = 'jquery.load.htm';
jQuery('#target').load(pageVar + ' #source');
</script>

Physicsguy, you might also have to use 'jQuery' instead of '$', depends on the version of jQuery you're using.

Yes, I tried it, and the following DOES work for me...

Further, I've added animation overflow handling to make the code function as intended:

index.html content

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var loader;
        $('#top a').bind("click", function(){  
            var outTime = 100;
            var inTime = 400;
            var pageURL = $(this).attr('href');
            $('#container').stop(true, true);
            $('#container').fadeOut(outTime);
            window.clearTimeout(loader);
            loader = window.setTimeout(function() {
                $('#container').load(pageURL + ' #container');
                $('#container').fadeIn(inTime);
                loading = false;
            }, outTime);
            return false;
        });
    });
    </script>
</head>
<body>
    <div id="top">
        <a href="index.html">Home</a> | <a href="otherpage.html">Other Page</a>
    </div>
    <div id="container">
        <h1>This is my homepage</h1>
        <p>What do you think???</p>
    </div>
</body>
</html>

otherpage.html content

<html>
<head>

</head>
<body>
    <div id="top">
        <a href="index.html">Home</a> | <a href="otherpage.html">Other Page</a>
    </div>
    <div id="container">
        <h1>This is my OTHER page</h1>
        <p>What does your momma think dude?!!</p>
    </div>
</body>
</html>

Thanks very much you guys! That's what I needed, and thanks for fixing the animation bug, smoseley. And thanks metho for your help

metho, I see what you're saying now... the following selector fixes the double #container problem by selecting the decendents in the target doc:

$('#container').load(pageURL + ' #container *');

Originally Posted by metho

Physicsguy, you might also have to use 'jQuery' instead of '$', depends on the version of jQuery you're using.

That's not correct.

If you use jQuery you are using the library in noConflict mode, e.g. like this:

[code]
jQuery.noConflict();

jQuery(document)ready(){

// crap code here k?

});

Reference : http://api.jquery.com/jQuery.noConflict/

Knit picker.

It's not a good idea to give people wrong informations if they want to learn!

That's how I think. If you think I am a "Knit picker", okay... then I am a "Knit picker" for you.

But I am right, and if he (one day) needs to know the noConflict mode... then he will remember my post...

If not ... Google is your friend

Yeah - ur right. But it's early am and I'm tired, sick of working, and the post ur picking at was another midnight oil burning night. The point I wanted to make was to use jQuery instead of $ in case of a conflict. Instead it came out that way due to the cooked noodle state I'm in some late nights.

Not in the carebear mood tonight.

<pedantic>
And anyway it's nit picker ("nit" being a term for the eggs of head lice)
</pedantic>

Knit picker would maybe imply a nervous habit of pulling at strands in woollen clothing.

you have way too much spare time.

Originally Posted by chrishirst

<pedantic>
And anyway it's nit picker ("nit" being a term for the eggs of head lice)
</pedantic>

Knit picker would maybe imply a nervous habit of pulling at strands in woollen clothing.

That was pure awesome. Grammar Nazis FTW!

ROFL ... that was fun