CODEWITHSUNDEEP
phphtmlbuttonclick
ProdigyDoo
ProdigyDoo

Reputation: 7

On Button Click Reference a Different html file

I have been searching for hours and probably because of my limited java knowledge, I'm a little but stuck..

I'm developing a website and I want to make things as easy to change as possible. I want the users to load the home page, and then by clicking on different buttons, the html "main content" of the page will change accordingly.

My reasoning for this is that I want to keep everything really clean and simple, so that if i want to update the Index page's format, I will only have to update one page..

Im assuming i need java for this..

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prodigy Doo Design</title>
<link href="template/style.css" rel="stylesheet" type="text/css" />
</head>

<body>


<?php include('template/header.php'); ?>
<div class="pad50px900wide"><!--Padding after headder--></div>
<?php include('template/nav.php'); ?>

<!--*****************************
********* BODY CONTENT***********
******************************-->
<div class="bodyContent"><?php include('text.html'); ?></div>
<!--*****************************
******END OF BODY CONTENT********
******************************-->

<?php include('template/footer.php'); ?>

</body>

The part that is very heavily indicated as the "BODY CONTENT" is the part i want to change.. i was thinking i could somehow say:

if home button click -> include 'home.html'

if about button click -> include 'about.html' ... ...

I just dont know how to put this into code..

you can view what i'v got so far here http://pddtest.webuda.com/ (if you didnt know, when you display the source code for the site in most browsers, it will load reference files as if they were all together in the first place, so it might be easier to understand what im trying to do)

Sorry if I'm a little vague, any help would be really apreciated, iv been crawling the interwebs for ages and i know this is probably fairly simple

Upvotes: 0

Views: 3478

Answers (4)

drayn
drayn

Reputation: 303

I think what you're trying to achieve is a base template, where only the main content changes. Which means editing the base template (or page if you want to call it), edits all the other pages.

For this all you need is some basic PHP, where you send the file name in a GET variable with the response.

<a href="index.php?file=about">About</a>

And wherever your includes are, you just add this variable to the php extension:

<?php include ($file.".php"); ?>

And of course don't forget to check if the variable is in the request. This is a very basic way, and may not be safe but it's a good application of basic php.

Hope this will help.

Upvotes: 1

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

There are multiple ways of achieving this,here are 3 simple ways without reloading index.html:

  • Using iFrames: make index.html contain all your buttons and an iFrame called PageContent On click of every button call a JS function which simply changes the src attribute of PageContent to the relevant html.
  • Using Client -Side JS: make index.html contain all your buttons.ALso include the content of all the related pages into hidden DIVs. On click of each button hide all the other "option DIVS" and show only the relevant DIV.
  • Using AJAX: make index.html contain all your buttons and an DIV called PageContent On click of every button call a JS function which simply hits the server, gets the content for the page which is linked to the button and renders it into the DIV using innerHTML.

Upvotes: 0

Matt
Matt

Reputation: 7040

I think you need to read up on the basics of what javascript, HTML and PHP are; this way you should be able to get this on your own and be a better developer.

Javascript is client-side scripting. What that means is that your javascript code is interpreted by the user's browser. This can cause issues when certain browsers interpret your javascript differently.

PHP is server-side scripting. It will behave the same no matter what browser your users are browsing from. As long as the same data is passed in, the functions will behave in a consistent manner. It sends HTML (or other data, but that's a bit more advanced) to the client.

HTML is markup. All it does is tell the browser how to display the data you've returned from the server.

Combine these three and you get a better idea of how they interact with each other. If something on your page can be "dynamic" in the background, but static (unchanging) once the user is viewing it, use PHP. If something relies on user input to change dynamically without the page refreshing, you're going to need to implement some sort of javascript.

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

You've already got PHP includes happening so that means you're cutting down on the amount up updating needing done to your pages and changing something in your header , footer etc will change it all throughout your site.

It would be better to simply have seperate pages i.e. index.php, about.php (your pages would have to be .php rather than .html as you are using php within the pages for your includes) and link to those pages just using regular links.

This method would also be better for SEO.

If you really wanted to do it the way you're originally talking about you could use the jQuery load() method.

More info here: http://api.jquery.com/load/

Upvotes: 0

Related Questions