1 Replies - 2227 Views - Last Post: 08 December 2012 - 05:36 PM

#1 HappyLibrary  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 01-March 09

Load another site page into a DIV (without iFrames)

Posted 08 December 2012 - 05:14 PM

Hi there,

I've tried looking up some threads about this but they all suggest iFrames or go beyond the scope of my understanding. I'm making my first site in a few years and have a sidebar menu and a content div. I am trying to have it so that if you click a menu link, the div contents are changed to whatever is in "home.php" or "about.php". When I used to make sites I'd wind up copying and remaking every page including the full-layout and the menu, but I really know that's not the way to go and I'm trying to focus on dynamic web development now.

I'm still not too sure if this is the way to go about it but I've spent the past week learning the basics of PHP and MySQL and now it's looking like I'll need some jQuery/AJAX? Any threads mentioning this though jump too far into it. Am I supposed to use PHP, jQuery, JS, AND AJAX? I'm trying to use innerHTML with JS but it looks like this isn't the best way to do it - I also cant' find an innerHTML method that specifically would load "myPage.php" into my content div. I'm just wondering if I'm even doing this the right way? In terms of industry standards, what is the accepted way to dynamically load content these days for a site with a few pages built in Notepad++? I just want to make sure I'm starting off on the right foot as this is the field I'd like to go into. I'm good with the basics of HTML and CSS, I just haven't looked too much at this side of things before.

Posted Image


I've also tried these instructions here (Ajax Tabs Content Script (v 2.2) with the following code and it just opens each page individually still:

<!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" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<meta name="author" content="" />

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>my site</title>


<script type="text/javascript">

function updateContent(page){
    document.getElementById('content').innerHTML = "test";
}

var countries=new ddajaxtabs("countrytabs", "content")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>


</head>

	<body>
<script src="jquery.js"></script>
		<div id="wrapper">
			<div id="content">
				content
				<hr>
				test
				<?php
					echo "Test";
				?>
				
			</div> <!-- end #content -->

			<div id="sidebar">
				<div id="fixed">
										
						<ul id="countrytabs">
							<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
							<li><a href="home.php" rel="content">Tab 2</a></li>
							<li><a href="about.php" rel="content">Tab 3</a></li>
						</ul>
				
				<br />
				my shoutbox will go here
				</div>
			</div> <!-- end #sidebar -->
		</div> <!-- End #wrapper -->

	</body>
</html>




Any help would be appreciated - again from a near-beginner's perspective if possible :( Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: Load another site page into a DIV (without iFrames)

#2 HappyLibrary  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 01-March 09

Re: Load another site page into a DIV (without iFrames)

Posted 08 December 2012 - 05:36 PM

Hi all, apologies for the double post, but the 2nd post here seems to have done it:

http://www.dreaminco...5&#entry1474355

I was leaving out
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


Grr! I guess I should really learn Ajax then if I want to do anything useful in the web development world... ?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1