JavaScript - Loading contents from one div to another

**kbjradmin** · 08-08-2009 08:21 PM

i'm trying to make a page that uses javascript to change the content in the main area of the page. i wrote this function:

Code:

function changeContent( value )
{
    var content = document.getElementById("content");
    var source = document.getElementById(value);
    content.innerHTML = ( source.defaultHTML || source.innerHTML );
    if ( ! source.defaultHTML )
    {
        source.defaultHTML = source.innerHTML;
    }
    source.innerHTML = "";
}

but it keeps returning the error 'source is null'. i can't figure out why the source would be null. the function changeContent is called on page load with the string "home" for value.

Here's the markup if it helps:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?php include('config.php'); ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <!--Data Tags-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <title>PseudoFrame Template</title>
    
    <!--File Includes-->
        <!--Cascading StyleSheets-->
            <link rel="stylesheet" type="text/css" href="style.css" />
        <!--JavaScript-->
            <script type="text/javascript" src="pseudoframe.js"></script>    

</head>

<body>

    <div id="header">
    </div>
    
    <div id="menu">
        <ul>
            <li><a href="#home" rel="frame">Home</a></li>
            <li><a href="#about" rel="frame">About</a></li>
            <li><a href="#contact" rel="frame">Contact Us</a></li>
            <li><a href="#affiliates" rel="frame">Affiliates</a></li>
        </ul>
    </div>
    
    <div id="content">
        <!--
            Content is dynamically inserted here based on the current page.
        -->
    </div>
    
    <div id="footer">
    </div>
    
    <!--
        START PAGE CONTENT DIVS
    -->
    
    <div id="home" class="contents">
        <h1>Home</h1>
    </div>
    
    <div id="about" class="contents">
        <h1>About</h1>
    </div>
    
    <div id="contact" class="contents">
        <h1>Contact Us</h1>
    </div>
    
    <div id="affiliates" class="contents">
        <h1>Affiliates</h1>
    </div>
    
    <!--
        END PAGE CONTENT DIVS
    -->
    
</body>

</html>

please help.

**misson** · 08-08-2009 08:58 PM

That's not quite enough information. We need to actually see how changeContent is called. Please include enough JS (make sure it generates the error) to make your example testable and post a link to a live page.

**kbjradmin** · 08-08-2009 09:06 PM

the function is called with:

Code:

function pageLoad()
{
    changeContent("home");
}
window.onload = pageLoad();

right now the page is on my computer, but i'll upload it and post back when it's up.

edit:
ok, it's up: http://www.kbjrweb.com/pseudoFrame/
just ignore the links, i've haven't gotten around to setting them up yet; still trying to get the function to work at all...

**teamg1** · 08-08-2009 09:28 PM

I looked at your example. Do you want a different web page to load when you click each item?

I have done this with frames, and it makes everything a lot easier once you create your "master frame", or are you committed to doing the frame content with javascript?

**kbjradmin** · 08-08-2009 09:36 PM

the entire point is that i'm trying to accomplish the same concept as frames without having to actually use frames.

**misson** · 08-09-2009 12:59 AM

The first error in the live page is that the initialization script calls changeContents("home") (plural), but the function in pseudoframe.js is called changeContent (singular). Once you fix this, notice that #content is successfully changed to the contents of #home, suggesting the problem doesn't lie there. The culprit is contentLinks. That the problem might be someplace other than where you were looking is the reason I asked for a complete example and a live page.

There are two problems in contentLinks. The first is a design flaw: you don't want to call changeContent for each anchor, you want to define a handler that will call changeContent. The second error is that the href property of an HTMLAnchorElement is an absolute URI. You'll either need to extract the fragment identifier from the absolute URI using (e.g.) regular expressions, or use getAttribute.

Code:

function changeContent( value ) {
  ...
}

function contentChanger(id) {
	return function(evt) {
		changeContent(id);
	}
}

function contentLinks()
{
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName('a');
	for (var i = 0; i < anchors.length; i++)
	{
		var anchor = anchors[i];
		if (anchor.getAttribute('href') && anchor.getAttribute('rel') == 'frame')
		{
			anchor.onclick = contentChanger(anchor.getAttribute('href').substr(1));
		}
	}
}

There are still larger issues to consider: when is it acceptable to apply the technique you're developing, how it plays with browser history and bookmarking, how it uses network resources and how it degrades.

**VPmase** · 08-09-2009 01:13 AM

It would be a lot easier if you just used arrays. I'll make a script for ya real quick showing you what I mean.

Edit- Done
Demo: http://saumpro.x10hosting.com/EsamTe...edoframes.html

Script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="links"><a href="#links" onclick="changeContent(1);">Home</a><br /><a href="#links" onclick="changeContent(2);">About Us</a><br /><a href="#links" onclick="changeContent(3);">Contact</a><br /><a href="#links" onclick="changeContent(4);">Affiliates</a></div>
<div id="content">BLAH!</div>
<script type="text/javascript">
var contentlist = new Array();
contentlist[1] = "Home!";
contentlist[2] = "About Us!";
contentlist[3] = "Contact!";
contentlist[4] = "Affilates!";
var contentbox = document.getElementById("content");

function changeContent(x){
	contentbox.innerHTML = contentlist[x];
}

changeContent(1);
</script>
</body>
</html>

**descalzo** · 08-10-2009 11:41 AM

Code:

 
function contentLinks()
{
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName('a');
 for (var i = 0; i < anchors.length; i++)
 {
  var anchor = anchors[i];
  if (anchor.getAttribute('href') && anchor.getAttribute('rel') == 'frame')
  {
   anchor.onclick = changeContent(anchor.href.substr(1));
  }
 }
}

Why are you using this to try to set onclick handlers for the links instead of putting them in the HTML?

It will not work.

1. As been pointed out, anchor.href gives you http://www.kbjrweb.com/pseudoFrame/#home not just #home.
You would need something like

Code:

  index_after_symbol = anchor.href.indexOf( '#');
  text_after_hash_symbol = anchor.href.substr( index_after_symbol );

2. When you programically assign to anchor.onclick, you have to give it a function. You are giving it the result of running a function , changeContent(anchor.href.substr(1)) .

PS. When you hard code the onclick, remember to add "return false". ie

Code:

"<a href="#links" onclick="changeContent(1); return false;">Home</a>

That keep the address bar from adding '#links'

**misson** · 08-10-2009 01:46 PM

Originally Posted by descalzo

Why are you using this to try to set onclick handlers for the links instead of putting them in the HTML?

Generally speaking, there are three reasons: separation of behavior from structure, making the page degrade gracefully when JS isn't available (the HTML page is designed to work w/o JS, and scripts add functionality), and to reduce code repetition.

Originally Posted by descalzo

PS. When you hard code the onclick, remember to add "return false". ie
...
That keep the address bar from adding '#links'

I recommend letting the address change. It can be used to make the page work with browser history and bookmarks.

@kbjradmin: rather than using document.getElementsByTagName(), you might want to use document.links. It has wider support on older browsers (if you're worried about getElementsByTagName not being defined) and probably won't involve a function call or DOM traversal (depending on implementation). It's also slightly more readable.

**descalzo** · 08-10-2009 01:59 PM

Ok, here is my version....

Code:

<html >
<head>

        <title>PseudoFrame Template</title>
        <link rel="stylesheet" type="text/css" href="style.css" />

<script>

function changeContent( value )
{
                //  SAME AS YOUR CURRENT CODE
	var content = document.getElementById("content");
	var source = document.getElementById(value);
	content.innerHTML = ( source.defaultHTML || source.innerHTML );
	if ( ! source.defaultHTML )
	{
		source.defaultHTML = source.innerHTML;
	}
	source.innerHTML = "";
}

// A FUNCTION TO MAKE A FUNCTION TO PASS TO  anchor.onclick

function make_onclick( word ){
        
        function call_changeContent(){
             changeContent( word );
             return false;  // THIS KEEPS THE LINK FROM BEING FOLLOWED
         }
        return call_changeContent ;  // RETURN THE FUNCTION -- NAME WITHOUT ()
}

function contentLinks()
{
    if (!document.getElementsByTagName) return;
        var anchors = document.getElementsByTagName('a');
        for (var i = 0; i < anchors.length; i++)
        {
            var anchor = anchors[i];
            if (anchor.getAttribute('href') && anchor.getAttribute('rel') == 'frame')
            {  
                        //  anchor.href returns the entire URL not just #yadda
                indx = anchor.href.indexOf( '#' ) ;
                tail = anchor.href.substr( indx + 1 ) ;
                anchor.onclick = make_onclick( tail ) ; 
             }
         }
}

    function init(){
        changeContent("home");
        contentLinks();
    }
      // NOTE: YOU PASS A FUNCTION -- THE NAME WITHOUT THE ()
    window.onload = init ;

</script>

</head>

<body>

	<div id="header">
	</div>
	
	<div id="menu">
		<ul>
			<li><a href="#home" rel="frame">Home</a></li>
			<li><a href="#about" rel="frame">About</a></li>
			<li><a href="#contact" rel="frame">Contact Us</a></li>
			<li><a href="#affiliates" rel="frame">Affiliates</a></li>
		</ul>
	</div>
	
	<div id="content">
		<!--
			Content is dynamically inserted here based on the current page.
		-->
	</div>
	
	<div id="footer">
	</div>
	
	<!--
		START PAGE CONTENT DIVS
	-->
	
	<div id="home" class="contents">
		<h1>Home</h1>
	</div>
	
	<div id="about" class="contents">
		<h1>About</h1>
	</div>
	
	<div id="contact" class="contents">
		<h1>Contact Us</h1>
	</div>
	
	<div id="affiliates" class="contents">
		<h1>Affiliates</h1>
	</div>
	
	<!--
		END PAGE CONTENT DIVS
	-->

</body>

</html>

Edit:

Originally Posted by misson

Generally speaking, there are three reasons: separation of behavior from structure, making the page degrade gracefully when JS isn't available (the HTML page is designed to work w/o JS, and scripts add functionality), and to reduce code repetition.

But do any of those apply in this situation?

Degrade with out JS? As it is, nothing works on his page without JS. The links should not be #home, etc, they should be to a page that displays that content if there is no JS.

Reduce code repetition? He has to code the onLoad function to adjust the links. He has to code the fuction to make the fuction for onclick. He could avoid all that by just putting onClick="changeContent( 'div-name' )" in each link in the page.

Thread: JavaScript - Loading contents from one div to another

LinkBack

Thread Tools

Display

JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Re: JavaScript - Loading contents from one div to another

Similar Threads

drop down menus with JavaScript disabled?

javascript and external javascript files problem

A question about javascript files

XML and Javascript

Posting Permissions