onclick inset content into div

eon201 · #1 Nov 26th, 2007, 08:43

Hi,

Im attempting to create two buttons in javascript within a page that when clicked put different sets of content into the same div.

So if button a was clicked then content a would load into div.
If button b was clicked then content b would load into div.
And vice versa.

Im a bit lost on how to do this as of yet. Any help would be greatly appreciatted!

Thanks in advance. Eon201

MikeHopley · #2 Nov 26th, 2007, 08:48

The easiest way would be to have both sets of content inside the <div>, but only allow one to be visible at a time (show/hide with document.getElementById("yourID").style.display="n one" or "block").

Er, what the...

That should be "none", not "n one".

eon201 · #3 Nov 26th, 2007, 08:52

Yes I agree. But the content that I am injecting is actually php.
And once I have these two buttons working I will work up to about seven or eight of them.

I really need something that onclick grabs on external php file inludes it and then puts it into the div. Or is this just a messy way of approaching it??

welshstew · #4 Nov 26th, 2007, 08:53

This is just one method to use.

Put this in your header

Code: Select all

function showContent(content)
{
 if(ie4)
 {
  showContentObj=document.all.qiksearch_div;
 }
 if(ns6)
 {
  showContentObj=document.getElementById("qiksearch_div");
 }
 if(ie4||ns6)
 {
  if(showContentObj.innerHTML!=content)
  {
   showContentObj.innerHTML=content;
  }
  else
  {
   showContentObj.innerHTML="";
  }
 }
 if(ns4)
 {
  document.nsdiv.document.write(content);
  document.nsdiv.document.close();
 }
}

then on your buttons put the following link code:

HTML: Select all

<a href="javascript:void(0);" onClick="javascript:showContent('this is the content for button a');"><img src=".buttonA.gif" name="buttonA" width="65" height="15" border="0" alt="Button A"></a>
<a href="javascript:void(0);" onClick="javascript:showContent('this is the content for button b');"><img src=".buttonB.gif" name="buttonB" width="65" height="15" border="0" alt="Button B"></a>

then add the following the where you want the content to be addeed

HTML: Select all

<div id="qiksearch_div" style="width:100%"></div>

*EDIT: sorry just seen your conversation with Mike, bloody slow interent - bain of my life.

eon201 · #5 Nov 26th, 2007, 08:59

Thnaks welshstew.

Ok. So lets say that I put php into the onclick 'content here' part. Is that gonna start to f things up?? I havnt really done much work with php inside javascript before???

eon201 · #6 Nov 26th, 2007, 09:07

Also. how about inserting different contetn into different divs...ie..

If button a is clicked. insert content a 1+2 into divs one + two.
If button b is clicked. insert content b 1+2 into divs one + two.

And vice versa??

There must be a way to do this without hiding/unhiding the content as suggested by Mikehopley and WelshStew.

Has anybody else had experience with this type of ajax style dev??

MikeHopley · #7 Nov 26th, 2007, 09:59

Well, you could always create the content with the DOM. It could be tedious, but it's powerful.

eon201 · #8 Nov 26th, 2007, 10:05

woh! The DOM mehod seems c-r-a-z-y. Think i'd be here for weeks going down that route!!... Perhaps you were right as far as the showcontent method first suggested.

Unofrtunatly WelshStews exaple errors in the code and doesnt work. Can anyone see why or have any other methods??

Thanks again Eon201.

MikeHopley · #9 Nov 26th, 2007, 10:09

I use the DOM to generate certain markup, such as extra styling <div>s within the content. It's not that hard once you get used to it, but it's probably not a good choice for generating large amounts of markup, because you'd need ungodly amounts of javascript.

eon201 · #10 Nov 26th, 2007, 10:11

Unfortunatly Mike there is a huge amount of php/html to inject into the div's so I think I would be Dom(ing) for a long long time. Although thanks for the suggestion. I will have a look into DOM seems powerfull.

Just need to solve this problem I have now asap!

Thanks for the help so far!

MikeHopley · #11 Nov 26th, 2007, 10:31

Hang on. You said:

Quote:

Im attempting to create two buttons in javascript within a page that when clicked put different sets of content into the same div.

And:

Quote:

the content that I am injecting is actually php.

There's a fundamental problem here. PHP is processed on the server, but javascript is processed by the client. PHP needs to be processed before the page is handed to the browser.

You can't "inject" PHP code with javascript, because then it won't be processed by the server (the server is not informed of javascript actions). So for example, using the DOM to create PHP would not work.

Perhaps it would help if you describe why you are doing this. What is the situation? What kind of content?

eon201 · #12 Nov 26th, 2007, 10:40

Ok thanks mike.

Basically what is happening is that I have created a stats display for my website.

It displays information in the form of graphs for the stats.

Im using a series of javascript buttons/links to display the data for different days/weeks.

Working out the results is not a problem.

But by clicking on a button the page needs to display (in certain divs) the results depending on which button you have clicked.

The buttons are created dependant on the date/day of today for instance.

Today the buttons are: Today | Last Monday | Last weeks avg | 26-10-2007 | Last months Avg.

Whilst tomorrow the buttons would be: Today | Last Tuesday | Last weeks avg | 27-10-2007 | Last months avg.

So obviously my problem thus far is changing what data to display dependent on which button is pressed.

Does this make sense?? If not I can try to explain a little clearer!

MikeHopley · #13 Nov 26th, 2007, 10:46

Okay, that makes sense. This is how I would do it:

You need a <div> for each set of content. All <div>s will be on the page immediately, not generated when the buttons are clicked. As well as being simpler to code, this makes the content accessible without javascript (funny how "simple" and "accessible" go together, no?).

You will generate the <div> content using PHP. So PHP creates the page, and javascript hides all of those <div>s (except one). If javascript is off, make sure all the <div>s are visible.

You then use javascript to show/hide the relevant <div>s. You could perhaps use a tabbing navigation style. Simple.

eon201 · #14 Nov 26th, 2007, 11:00

Ok great. So therfore the page has already genertaed the php before the user even gets to see it. But the javascript is just hiding what we dont want to see. That makes sense to me.

Im gonna have to recode some of my php though, as otherwise the results will go all over the shop. But still, this seems like the best method without over complicating things.

One last thing though Mike. Can you see why the code that hides/unhides the divs supplied by Welsh Stew does not work?? I cant work it out!

Does it even give you errors or just me?

Thanks for all the help. eon021

MikeHopley · #15 Nov 26th, 2007, 11:08

Quote:

Originally Posted by eon201

Can you see why the code that hides/unhides the divs supplied by Welsh Stew does not work?

Yes I can.

It doesn't work because, frankly, it's a steaming pile of crud. I'm not trying to belittle welshstew -- he's a skilful and knowledgeable designer -- but in this instance, he's given you garbage. Sorry, but that's the way it is.

The code is a mess of outdated browser detects. You don't need them nowadays (thank god). Avoid using javascript to detect browser versions.

I mean, IE4? You've got to be kidding me. I don't raise a finger for IE5, let alone IE4. Why code for a desperately buggy browser, which has less than 1% market share and falling? IE4 and IE5 are dead, dead, dead.

Simply use DOM methods, like this:

Code: Select all

document.getElementById("div1").style.display = "none"
document.getElementById("div2").style.display = "block"

welshstew · #16 Nov 26th, 2007, 11:27

I agree, I only had 5 mins, so borrowed some old code from a works page (we still ahve users who use ie4 for some strange reason). Now that I look through it is real ugly, and in light of my new DDA project we are going to have to change it anyway. But back to your prob.

There are a number of solutions to do this, so try these and see if they help

http://www.plus2net.com/javascript_t...hide-layer.php
http://www.geocities.com/technofundo.../showhide.html
http://www.dyn-web.com/dhtml/show-hide/
http://www.adesdesign.net/php/tutori.../hide_div.html

Monie · #17 Nov 27th, 2007, 03:03

Good link there Welsh! Maybe it could be useful for me someday...

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
onclick inset content into div