Simple Problem With Links and Div

Question

ichigo_cool -4 Junior Poster

13 Years Ago

I've been spending a long time trying to figure this out but just can't.

I've made a complete layout using CSS and XHTML; combining id styles with divs. I can't, for the life of me, figure out how to use the menu I've made to have the content of the links appear in the content div instead of changing the whole page...Something like

<div id="content">
I want the content from info.htm to appear here!
</div>

I hope this helps understand, it's not my real code but I thought it would help explain what I'm trying to do... Thank you very much for your help.

javascript

2 Contributors
20 Replies
364 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

There are essentially two ways to achieve what you want - IFRAME or AJAX.

IFRAME will most probably do what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function loadContent(url){
	var content = document.getElementById('content');
	if(content){ content.src = url; }
	return false;
}
</script>
</head>

<body>

<div id="menu">
<a href="http://www.alldaytime.co.uk/calc/" onclick="return loadContent(this.href);">Info</a>
</div>

<iframe id="content" src="" width="550" height="400"></iframe>

</body>
</html>

AJAX is more suitable for getting data or HTML snippets rather than whole pages. As AJAX only works, in its simplest form, with pages in the same domain as the parent page, it's hard to post a working example. Try here.

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Can you post a summary version of your code again.

Airshow 416 WiFi Lounge Lizard

13 Years Ago

I need a bit more than that - ie. how those jQuery $(...) statements are called.

Airshow 416 WiFi Lounge Lizard

13 Years Ago

That looks odd to me. You would normally build a page server-side with php include statements. Is there a reason why you're not doing it that way?

Airshow 416 WiFi Lounge Lizard

13 Years Ago

It would be something like this:

<?php
$path_to_includes = '../what/ever/';
?>
<div id="header"><?php include($path_to_includes."header.php"); ?></div>
<div id="navigation"><?php include($path_to_includes."home-navigation.php"); ?></div>
<div id="login"><?php include($path_to_includes."home-login.php"); ?></div>
<div id="content"><?php include($path_to_includes."home-signup.php"); ?></div>
<div id="footer"><?php include($path_to_includes."footer.php"); ?></div>

There will probably be a load more markup but this should give you the right idea.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ichigo_cool -4 Junior Poster · Answer 1 · 2011-01-03T02:53:26+00:00

Well I fixed the problem using jQuery's load function. However, whenever the page is refreshed, the content div returns to where it was originally placed when I want it to refresh whatever page they're currently viewing in the content div. Again, it's causing me a lot of trouble to find a solution.

ichigo_cool -4 Junior Poster · Answer 2 · 2011-01-03T04:17:15+00:00

layout:
<div id="navigation">
</div>
<div id="content">
</div>

function to load a page in content area:
$("#content").load(page);

initializing the sources for each div
$("#navigation").load("home-navigation.php");
$("#content").load("home.php");

just separated the div and jquery. jquery is in the head and it initializes the source of each div. Now say I click updates on the navigation bar it changes the content in #content. However if I refresh the page #content is reverted back to home.php instead of staying as updates.php

I want to refresh the page and have everything in #content to stay the same instead of changing back to home.php :)

ichigo_cool -4 Junior Poster · Answer 3 · 2011-01-03T04:26:48+00:00

<li><a onClick="loadPage('home-signup.php')">Sign up</a></li>
  <li><a onCLick="loadPage('updates.php')">News</a></li>
  <li><a onClick="loadPage('home-information.php')">Information</a>
for navgating..


 function initialize()  {
      $("#header").load("header.php");
      $("#navigation").load("home-navigation.php");
      $("#login").load("home-login.php");
      $("#content").load("home-signup.php");
      $("#footer").load("footer.php");
    }

$(initialize) is in the head section linked through an external js file so when the page is loaded these are automatically put into the divs. I hope I gave you proper information this time

ichigo_cool -4 Junior Poster · Answer 4 · 2011-01-03T04:31:43+00:00

It's the only way I figured out how to. :/ I'm having a bit of trouble and that was the only way it worked for me. How would I do it with a php include? Example?

ichigo_cool -4 Junior Poster · Answer 5 · 2011-01-03T04:36:51+00:00

Well, I feel like an idiot. I tried that a while ago and it didn't work but now it does. Terribly sorry for that, but it seems like my problem still remains the same. If I refresh the page it returns to loading the original file containted in the content div.

ichigo_cool -4 Junior Poster · Answer 6 · 2011-01-03T04:40:07+00:00

and with the php include how do you set it to load only in the #content div :S

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2011-01-03T04:48:15+00:00

Then, construct the navigation links like this:

<li><a href="#" onClick="return loadPage('home-signup.php')">Sign up</a></li>
<li><a href="#" onCLick="return loadPage('updates.php')">News</a></li>
<li><a href="#" onClick="return loadPage('home-information.php')">Information</a></li>

And loadPage like this:

function loadPage() {
  $("#content").load(page);
  return false;
}

The secret lies in returning false from the function, then returning that returned value from each of the onclick functions.

This suppresses the natural hyperlink behaviour which would othersise occur after loadPage returns. I'm pretty certain that's what was causing your #content to revert to home.php.

Airshow

ichigo_cool -4 Junior Poster · Answer 8 · 2011-01-03T04:59:51+00:00

well all the links work perfectly now, thank you very much. And I don't need the initialize function anymore. When I refresh the page it still reverts to the original content. Since when the page is loaded content has the include home-signup.php. I clicked on the Updates page so that in the content div it refered to updates.php and then refreshed, but the content div went back to home-signup.php :/

ichigo_cool -4 Junior Poster · Answer 9 · 2011-01-03T05:19:08+00:00

from main page:
<body>

</body>

from navigation bar:
<li><a href="#" onClick="return (loadPage('home-signup.php'))">Sign up</a></li>
<li><a href="#" onClick="return (loadPage('updates.php'))">News</a></li>

to load pages:
function loadPage(page) {
$("#content").load(page);
return false;
}

When links are clicked, they all work perfectly fine in the #content section.
If I refresh the page, the code from the main page which assigns the php includes to each div is run and the div content is equal to home-signup.php instead of the link that I would have clicked before, such as updates.php

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2011-01-03T05:20:10+00:00

Refreshing will always revert the page back to its original state unless you introduce:

a mechanism to remember the page's state each time #content is loaded
an action to recreate that state after refresh.

Essentially there are two ways to do this - client-side (cookie/javascript) or server-side (php/session or php/database).

Two questions will help identify the way ahead:

Do you need the remembered state to span sessions (eg. id the user shuts down his computer then returns to your site tomorrow)?
Do you use a database (mySQL or similar)?

Airshow

ichigo_cool -4 Junior Poster · Answer 11 · 2011-01-03T05:21:39+00:00

I'll be using a mySQL database with this website, yep.

ichigo_cool -4 Junior Poster · Answer 12 · 2011-01-03T05:23:29+00:00

The first question I don't think applies since the user can log in and out and I only want the content section to remain the same when they refresh while they're on the site; when they log in the next day it can go back to normal as in start with home-signup and then it can change again when they click the links again

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 13 · 2011-01-03T05:44:26+00:00

OK, then in each of your content pages (home-signup.php, updates.php, home-information.php etc.) you can simply get the php $_SESSION to remember the name of that particular page (eg. $_SESSION). In your main page, you need to include that remembered last_page or a default:

<?php
$path_to_includes = '../what/ever/';
$last_page = (isset($_SESSION['last_page'])) ? $_SESSION['last_page'] : 'home-signup.php';
?>
...
<div id="content"><?php include($path_to_includes . $last_page); ?></div>
...

PHP sessions need to be kept alive from page to page by propogating a session id. You may or may not need to do this, I'm not an expert. You can ask in Daniweb's PHP forum or do some background reading here.

Airshow

ichigo_cool -4 Junior Poster · Answer 14 · 2011-01-03T05:46:34+00:00

Okay, I have a bit more PHP to learn then but I'm starting to understand more. Thank you so, so much for your help.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 15 · 2011-01-03T05:53:05+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

:cool: