Dynamically change body content

Question

How do I dynamically change the body content of an html page when a link is clicked?

So I have 3 html pages that looks like this:

<li><a id="homeContainer" href="#">Home</a></li>
<li><a id="testContainer" href='#'>test</a></li>
<li><a id="pageContainer" href="#">page</a></li>

My div:

<div id='container'>
  </div>

The javascript:

$( document ).ready( function() {
        $( '#testContainer' ).click( function() {
            $( '#container' ).load('test.html');
        });

This works fine if i make for all pages a separate function. But how can I make the javascript function taking a page in the load() function instead of hardcoding it?

[Edit]

I dropped my whole page with everything, html, javascript and css here: jsfiddle

i have googled, i couldnt find any example. show me what you found stranger — Yustme, May 11 '12 at 17:40
@j08691, i tried google, i didn't find any example on how to accomplish this. — Yustme, May 11 '12 at 17:41

score 2 · Answer 1 · answered May 11 '12 at 18:17

2

I would suggest using jquery to change out your body with something else. Include the jquery code with:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

And then do something like this.

<a id='linkThatChangesTheWorld' href=''>Click Me</a>

<script>
$('#linkThatChangesTheWorld').click( function() {
    $('body').html('I want my body this way.');
});
</script>

You can use functions like .prepend() and .append() if you just want to add some html to the body or if you have a specific div that you wish to change address it from its class:

If you have:

<div class='mychange'></div>

then use:

$('.mychange').append('<h2>Check it out</h2>');

Further, if you want to load from another page, you can use .get().

$.get('myhtmlpage.html', function(data) {
    //do something after getting the result
    $('body').html($(data));
});

answered May 11 '12 at 18:17

CaptainBli

4,121
4
39
58

With `$.get()` you can pass parameters on the querystring. You can also use `.post` to do something similar. – CaptainBli May 11 '12 at 18:19
hi captainbli, nice to see someone is taking me serious. I was intrested in the last function, adding text from another page. i would like to do this in a div. what does 'data' contain exactly? – Yustme May 11 '12 at 21:22
1

`data` will contain all of the web page `myhtmlpage.html`. The `get` function will pull from any page even dynamically generated ones. Further, you can use `data.find('#specialSectionID')` to only retrieve the html found in `#specialSectionID` html element. – CaptainBli May 22 '12 at 15:12

ChristopheCVB · Accepted Answer · 2012-05-12T11:29:18.857

1

try :

HTML

<li><a id="homeContainer" href="home.html">Home</a></li>
<li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li>

Javascript

$(document).ready(function()
{
    $( 'li>a[id$="Container"]' ).click(function(event) 
    {
        event.preventDefault();
        var href = $(this).attr('href');
        alert("Loading " + href)
        $('#container').load(href);
        return false;
    });
});

Edit

Try out this JSFiddle using JQuery

edited May 12 '12 at 11:29

answered May 12 '12 at 00:37

ChristopheCVB

7,269
1
29
54

1

Hi, is 'li>a...' a typo? Also, this opens the html page in a new page and not in the div container. And you're using single and double quotes in the href part. Is that on purpose? some more info, the html pages only contain plain text, no html tags. – Yustme May 12 '12 at 10:03
Hi, i posted all my code on jsfiddle, see my first post for the link please. – Yustme May 12 '12 at 10:22
2

@Yustme not a type -> searching all `a` tags direct children of 'li' tag... Have a look to http://api.jquery.com/category/selectors/ – ChristopheCVB May 12 '12 at 11:31
No I meant 'typo', because you used 'li>' and i thought it must be '
'. But you're code in that link worked! thanks + marked!

Yustme

May 12 '12 at 12:06

No prob @Yustme, I mean 'typo' on my last comment. But open that link with documentation on selectors, it is really interesting. – ChristopheCVB May 12 '12 at 12:08

Dynamically change body content

2 Answers2