Content Switcher

[Jacko2007]

I've been working on this site on and off for a while and I've finally got round to finishing it off, I know it's not the greatest site in the world but it's what the owner want.

How can I go about changing the contents of a page without refreshing from within a separate div tag.

To see what I'm trying to do take a look at [url]http://www.english-kitchen-portugal.com/test/menu.htm[/url]

I've tried JQuery solutions but I can't seem to get them to work.

[Fatal-Error]

This will use jQuery to load up the apropriate page, basicly, give each of your hyperlinks an ID (the filename of the page you want to apear) and replace the content class in this line "$('.content').html(data);" with wherever you want that the page in question to appear.

<script>
$('body').ready(function(){
	$('.welcome .links a').click(function() {
		$pagename = $(this).attr('id');
		$.ajax({
		  url: 'includes/'+$pagename+'.php',
		  success: function(data) {
		  $('.content').html(data);
		  }
		});
	});
});
</script>

[editline]28th November 2010[/editline]

You used dreamweaver right, remove the   from each of your empty table cells.

[Jacko2007]

It's still not displaying content I think I may have added it in wrong, can you take another look for me?

I've removed the &nbsp's too.

[Fatal-Error]

Try it this way, you need to give your anchor tags an ID though, so the hyperlink that goes to breakfast must have the id "breakfast"

<script>
$('body').ready(function(){

	$('.welcome .links #breakfast').click(function() {
		$('.additional').html("Breakfast menu");
	});

	$('.welcome .links #dinner').click(function() {
		$('.additional').html("Dinner menu");
	});

});
</script>

[StankyJoe]

I'm pretty sure I ate at that restaurant when I was in Albufeira last summer.

Remember to serve your pages through a static method, for users with javascript disabled, and search engine spiders.

[Jacko2007]

[QUOTE=Fatal-Error;26356834]Try it this way, you need to give your anchor tags an ID though, so the hyperlink that goes to breakfast must have the id "breakfast"

<script>
$('body').ready(function(){

	$('.welcome .links #breakfast').click(function() {
		$('.additional').html("Breakfast menu");
	});

	$('.welcome .links #dinner').click(function() {
		$('.additional').html("Dinner menu");
	});

});
</script>

[/QUOTE]

I must be stupid because I can't get this to work at all. Am I missing something really obvious?

[editline]28th November 2010[/editline]

[QUOTE=StankyJoe;26357252]I'm pretty sure I ate at that restaurant when I was in Albufeira last summer.

Remember to serve your pages through a static method, for users with javascript disabled, and search engine spiders.[/QUOTE]

How did you find your visit?

[Fatal-Error]

<a href="#breakfast">Breakfast</a>
This, needs to be this.
<a href="#breakfast" id="breakfast">Breakfast</a>

[compwhizii]

[QUOTE=Fatal-Error;26359065]<a href="#breakfast">Breakfast</a>
This, needs to be this.
<a href="#breakfast id="breakfast">Breakfast</a>[/QUOTE]

[html]<a href="#breakfast" id="breakfast">Breakfast</a>[/html]

[Fatal-Error]

Stupid mistake on my part...

[Jacko2007]

I don't understand where it's trying to pull the content from now, is it from within the file?

[Bugster]

Or maybe this

<script>
$(document).ready(function(){

	$('.welcome .links #breakfast').click(function() {
		$('.additional').load("URL FOR CONTENT");
	});

	...
        //Additional ones of those for each page
        ...
});
</script>

[editline]28th November 2010[/editline]

Or maybe this

<script>
$(document).ready(function(e){
        e.preventDefault()
	$('.welcome .links').click(function() {
		$('.additional').load($(this).attr("href")+" .additional");
	});

});
</script>

That should load whatever the link's href is, but only the .additional part of it

[Fatal-Error]

.html("Breakfast menu");

Sets the contents of an element to "Breakfast menu" or whatever else you define in there.
I suggest you start playing around with jQuery, it will help you get your head around it.