Change div content with link in another div

Question

i have a menu bar with links which are in the header. when you click the link, i want to just change the content in the main div. i'm thinking of doing it in php, but you will have to reload the page. So i need to do it in javascript, but i dont know javascript.

here is my menu code in the header div:

<ul id="nav">
    <li><a href="#">Enter Information</a></li>
    <li><a href="#">View Records</a></li>
    <li><a href="#">View Upcoming</a></li>
</ul>

And where does the new content come from? Is it already in the page (add that to the code in your question), or from the server, requiring ajax? Does this need to be plain JavaScript, or would you be willing to use a library? — David Thomas, Jul 27 '11 at 20:47
the content will be a form for one link and basically a type of database for the other 2. I have a form.html file for the link for the form. — Emily, Jul 27 '11 at 20:52

Daniel Szabo · Answer 1 · 2011-07-27T21:43:44.577

0

Depending on the type of content, you have a few options available to you. If you need to load a new page into the main content, you can use iframes and some javascript. If you need to load simple text, you can simply use javascript.

Based on your feedback, you'll do something like this (note- I'm shooting from the hip regarding syntax, but this is generally what your code will need to look like):

<a href="#" onclick="UpdateIFrame('mypage.html')">Link 1</a>

<iframe id="MainContent">
</iframe>

<script>
   function UpdateIFrame( newPageAddress ){
     document.getElementById("MainContent").contentWindow.location = newPageAddress;
   }
</script>

edited Jul 27 '11 at 21:43

answered Jul 27 '11 at 20:50

Daniel Szabo

7,181
6
48
65

i basically need to load pages if possible. what is the javascript that i will need? – Emily Jul 27 '11 at 20:53
1

I updated with code. Keep in mind -- this is basic javascript and will accomplish what you want done...but at some point when you've developed a little more, you should use jquery and update the code. – Daniel Szabo Jul 27 '11 at 21:47
Also, someone is eventually going to tell you not to use iframes. I'm going to save them the trouble of argument and link to the already-had debate: http://stackoverflow.com/questions/755795/are-iframes-html-obsolete – Daniel Szabo Jul 27 '11 at 21:56

score 0 · Answer 2 · answered Jul 27 '11 at 20:52

0

If you think about using PHP, I guess that you have to load dynamic content. For this, I advice you to use AJAX

The easiest is to use a framework, like the famous Jquery. Example here

answered Jul 27 '11 at 20:52

Triomen

56
4

Danny · Answer 3 · 2011-07-27T21:01:59.440

0

You don't need any anchor elements. W3 example

<script>
$(document).ready(function() {
    $('.menu').click(function() {
            $("div").load('somecontent.txt');       
    });
});
</script>

<ul>
    <li class="menu">Enter Information</li>
    <li class="menu">View Records</li>
    <li class="menu">View Upcoming</li>
</ul>

edited Jul 27 '11 at 21:01

answered Jul 27 '11 at 20:55

Danny

7,368
8
46
70

But she **would** need **[tag:jquery]**; which isn't mentioned in her question. ***Or*** tagged therein. – David Thomas Jul 27 '11 at 20:56
Very true, maybe I'll try to edit later with a jqueryless example. Thanks for pointing it out. – Danny Jul 27 '11 at 21:03
this code snippet requires jquery, and the snippet is not a good example of how to create a menu. – Jason Jul 27 '11 at 21:03
I will use whatever I need to use. But the only thing i know is html and php – Emily Jul 27 '11 at 21:10

score 0 · Answer 4 · answered Jul 27 '11 at 20:56

0

here i am assuming that you get your content with a function call as content()

var list=document.getElementById('nav');
var links=list.getElementsByTagName('a');
var header=document.getElementById('header');
for (var i=0;i<links.length;i++)
{
links[i].onclick=function() {
header.innerHTML=content();       //here you can use something else to generate the content
}
}

answered Jul 27 '11 at 20:56

lovesh

5,235
9
62
93

I don't think using browser specific javascript is the best way to write a menu system. – Jason Jul 27 '11 at 21:01
@Jason wats browser specific in this? – lovesh Jul 27 '11 at 21:06
in general this style of javascript will lead to a browser specific implementation, especially if one tries to develop a full featured menu system. the power of frameworks like jquery is that they normalize the individual browsers javascript engine, so the developer doesn't have to deal with them. – Jason Jul 27 '11 at 21:14
@Jason i agree this will freak out IE users but will work well for DOM compliant browsers and he didnt say he wanted to use jquery – lovesh Jul 27 '11 at 21:24

score 0 · Answer 5 · answered Jul 27 '11 at 20:59

You want to use jquery to build something like this. If you are serious about building web apps you need to learn how to use it (or a similiar framework like MooTools)

For this particular problem I would use an existing menuing system, here's the first list of jquery based menus that I found, but there are many more.

score -1 · Answer 6 · answered Jul 27 '11 at 20:57

-1

In order to dynamicly load content (e.g. from a server using php/sql) without having to reload the website Ajax is exactly what you need.

Inlineframes (mentioned before), however, should not be used for they are deprecated.

W3schools provides a very basic but straightforward tutorial on Ajax.

answered Jul 27 '11 at 20:57

mweisz

3,899
3
17
16

Or you can put all the markup in one page within
tags that have the attribute style="display: none;" and use javascript to change the display to "block" while simultaneously setting other content areas to "none". That is if your content sections are not very large. Otherwise, dynamic content should be handled as Milten suggests. Also, this is very easily handled either way with a javascript library like jQuery or Prototype.
– Silkster Jul 27 '11 at 21:08

Change div content with link in another div

6 Answers6

Linked