How do I change the contents of a <div> with a click(link)?

This site is best viewed in a modern browser with JavaScript enabled.

How do I change the contents of a <div> with a click(link)?

kenub927

I'm attaching an image of what the main content part of my website looks like. How do I change the content in the white box by clicking the links on the right? JQuery? AJAX? How do I do it?
Meaning how do I change the contents of #contentBox by clicking on the links from .sideBar?
[ATTACH]15219[/ATTACH]

Here's my code:

        <div id="content">

    <ul class="sideBar">
    <li><a href="missionStatement.html">Mission Statement</a></li>
    <li><a href="history.html">History</a></li>
    <li><a href="facilities.html">Facilities</a></li>
    <li><a href="schedule.html">Schedule</a></li>
    <li><a href="oneYearProgram.html">Academic Tracks</a></li>
            <ul class="subMenu">
            <li><a href="oneYear.html">One Year Program</a></li></ul>
    </ul>

        <div id="contentBox">
        <h1>Academic Tracks</h1>
        <img src="../mainContent/ravBina.png"/>
        <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
        </div>

The attachments of this post were removed during the platform migration in 2018

WestWeb

I can tell you that one of the JQuery ajax methods will likely work well for you, but it's hard to give an example until we know how the content that you want to load will be stored(separate html files, database, etc)?

kenub927

How should I store them? I just want it to be a little more dynamic than loading to another html file when just that box is changed.
I saw online ways to call a div and fill it into the div on the page but I couldn't get any of it to work.

drunken_dev

Ajax, I know little of it but it is use for changing content on a page/content on a section of a page without refreshing the page.

Sadly I may have to learn about it one day.

Dan

WestWeb

Here is one way you could load div's of content into your page with JQuery's .load() method. The content div's can just be stored in a separate html file for editing like this:
movies.html:

<div id="movie-1">
	<h2>This is Movie 1</h2>
	<p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
</div>


<div id="movie-2">
	<h2>This is Movie 2</h2>
	<p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
</div>


<div id="movie-3">
	<h2>This is Movie 3</h2>
	<p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
</div>

Then your index.html page could load these into a #content div using a basic menu like so:

index.html:

<!DOCTYPE>
<html>
	<head>
		<title>Simple AJAX Test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
	</head>

<body>

	<section id="container">

		<header>
			<h1>Header</h1>
			<nav id="menu">
				<ul>
					<li><a href="movie-1">Movie 1</a></li>
					<li><a href="movie-2">Movie 2</a></li>
					<li><a href="movie-3">Movie 3</a></li>
				</ul>
			</nav>
		</header>


		<section id="content">

			<div id="movie-1">
				<h2>This is Movie 1</h2>
				<p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
			</div>

		</section>

		<footer>
			<p>Copyright &#169; 2012 Ben HartLenn</p> 
			<p>All Rights Reserved</p>
		<footer>

	</section>

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){

			$('#menu ul li a').click(function(){
				$('#content').load('movies.html #' + $(this).attr('href'));
				return false;
			});

		});
	</script>

</body>

</html>

kenub927

thanks a lot. I'm gonna try that.
Is there a way to make it fade in and out so it looks a little more dynamic?

Thanks!

kenub927

I tried it and it's working. One more thing in addition to the fading. Is there a way to make it that after changing the contents of the div, clicking the back button would go back to the last div?

thanks again!

WestWeb

I think there's a way, but I don't have time to test it out right now.

Generally speaking you would just add a hidden(shown on menu item click) back link to your html somewhere like:

html:

<a id="back" href="#">Back</a>

Then hide the #back button at first, because when the page first loads there won't be anywhere to go back to right.

css:

#back { display: none; }

Then you would have to modify the script at the bottom to display the back button when you click a menu item, change the back buttons href value, and add a click event to it similar to the menu item .click() event. It would look something like this:

<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				var c = 1; // counter for back button display


			$('#menu ul li a').click(function(){


				$('#content').load('movies.html #' + $(this).attr('href')); // load new div


                                    if(c == 1)
                                    {
                                    $('#back').fadeIn(); // display back button
                                    c++; // increment var c so back button doesn't try to show every time menu item is clicked
				}                                        

                                    $('#back').attr('href', $(this).attr('href')); // change href of back button

                                    return false;
			});

                            $('#back').click(function(){
                                    $('#content').load('movies.html #' + $(this).attr('href'));
                            });

		});
</script>

This is a completely untested idea, but I think something like this could work out for you.

WestWeb

I read that again when I wasn't rushing and tired, and I totally messed up a very crucial part of the JQuery script. In my original example the back button would just have the currently viewed movie url in it, not the last viewed movie url. Ugh :rolleyes: My bad.

Should be more like this:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		var vis = false;
		var lastUrl;
		$('#menu ul li a').click(function(){
			lastUrl = $('#content .movie').attr('id');

		if(!vis)
                    {
                       $('#back').fadeIn(); 
                       vis = true; 
		}

	        $('#back').attr('href', lastUrl);

		$('#content').load('movies.html #' + $(this).attr('href'));


		return false;
	});

	$('#back').click(function(){
		lastUrl = $('#content .movie').attr('id');

      	        $('#content').load('movies.html #' + $(this).attr('href'));


		$(this).attr('href', lastUrl);


		return false;
            });

});
</script>

Then, going with my example, you would just need to add the .movie class to your content divs like:

<div class="movie" id="movie-2">...

Keep in mind this is a simple back button, that will go back and forth between last view movie, and the currently viewed movie. If you want to actually make the back button go through a history of viewed movies, I recommend that you do some research on "ajax hash history".

parkerfrank32

It changes the div contents like you wanted. Its not vertical but you said that making it wouldn't be a problem. Same script
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

#tablist{
padding: 3px 0;
margin:0;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
margin: 0;
width:150px;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
display:block;
}

#tablist li a:link, #tablist li a:visited{
color: #FFF;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/ Insert Optional Height definition here to give all the content a unified height /
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

a.tab {
background:black;
}

a.tab:active{
background:red;
}
</style>

/********************************************
Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
This notice MUST stay intact for legal use
Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
*********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

gcPadma

I have to display content and form in diffrent div.
I have to call order form within one div but when click on submit button it totally hide.How to fix it?
Could you please give me some hints?

Thanks

DaveyErwin

gcPadma;1448617 wrote:
I have to display content and form in diffrent div.
I have to call order form within one div but when click on submit button it totally hide.How to fix it?
Could you please give me some hints?

Thanks

add onsubmit="return false" ...
<form action="" id="formId" method="post" onsubmit="return false">

gcPadma

but it doesnot work the jquery validation.
Could I post my code?

gcPadma