use buttons to call up web page into a div tag

[shark1956]

Hi,
I am working on a web page that will display a menu into a div tag.
Here is the premise of my idea.
3 div tags.
1st div tag to hold company logo.
2nd div tag is a horizontal menu that holds either buttons or text, example might be: Lunch: Dinner: Drinks: Location:
3rd div tag to display web page.

What I want to be able to do is that when the user clicks for example the Lunch button, it will call up the web page with the lunch menu and place it into the main div tag.

I used this question in JavaScript and got a response to as if I would like the answer in AJAX.
The answer is yes.

Any suggestions?
Thank you,
Paul

 

[feherke]

Hi

Without any error checking to keep it as simple as possible :

[b]function[/b] [COLOR=darkgoldenrod]load[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [b]var[/b] http[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]()[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]'GET'[/i][/green][teal],[/teal]what[teal].[/teal]href[teal],[/teal][b]false[/b][teal])[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal][b]null[/b][teal])[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'content'[/i][/green][teal]).[/teal]innerHTML[teal]=[/teal]http[teal].[/teal]responseText
  [b]return[/b] [b]false[/b]
[teal]}[/teal]

The related HTML would be something like this :

[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"page1.html"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"return load(this)"[/i][/green][b]>[/b]Page 1[b]</a>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"page2.html"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"return load(this)"[/i][/green][b]>[/b]Page 2[b]</a>[/b]

[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"content"[/i][/green][b]></div>[/b]

I let it to you as an exercise to :
[ul]
[li]add compatibility workaround for non-standard compliant browsers[/li]
[li]add fallback if the browser not handles AJAX or JavaScript[/li]
[li]add error handling if the AJAX request fails[/li]
[/ul]
This forum's threads contain codes with all the above.


Feherke.