If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Load another site page into a DIV

Hi there,

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.

I also think you can pretty much accomplish what you want with php and the include() command too.

Picture this; you *could* have all your HTML, Upto the opening content <div> tag, stored in a common header file (this could include the DOCTYPE, <head> section opening <body> tag and menu etc), and then everything from the closing </div> tag could be stored in a common footer file (the footer bar and closing </body> and </html> tag). Everything in the middle would be the differing content for each particular page.

It would be like breaking your pages into jigsaw pieces - the header and footer file would be jigsaw pieces that you use on every page, so when you make a change, you only edit one file and the change reflects site-wide. The content however, would be specific to each page, so all of your pages could be laid our like this;

Hi - thanks very much for your replies I had tried something similar Beverlyh with include, but was just a bit fed up of copying and pasting and was wondering if there was a more dynamic approach? Is there perhaps a way to change <?php include('contentIWant.html');?> so it would update in place of the DIV?

And thank you molendijk but I probably should have mentioned I wanted to avoid iframes A lecturer of ours heavily encouraged us to avoid them these days.

Hi Bernie, unfortunately any post I try to respond with including code is held back for moderation - I didn't realise this until there now, I thought my previous reply to you from about an hour ago had gone though :/ I tried your link however the links just kept opening in new browser windows - I had left out any reference to including a jQuery.min.js file, I had no idea this was needed as I'd never used it before! However the second post in this thread here let me know that I did indeed need to have that in - and that code actually works pretty well too. Thanks for your help, bit discouraging for new members though that posts containing code have to be approved D: