Jump to content

Creating A New Url When Loading External Html Files


Recommended Posts

Hi,This is my first post and I did search for a similar topic but I'm not exactly sure what I should be looking for.Basically, I have implemented a JQuery load function which alters the content of a selected <div>The problem with this is that the only URL even seen is "home.html" which means if I want to link to or redirect to the ABOUT page for example, it's not possible.This is some example code of what I am using.

...<head>...function loadContent(id, dTitle) {	$("#contentArea").hide("slow", function() {$(this).load(id, '', function() {$(this).slideDown("slow");});});	document.title = dTitle;}</head><body onload="loadContent('home.html', 'Home page');">....<a href="java script:loadContent('home.html', 'Home page');">Home</a><a href="java script:loadContent('about.html', 'About page');">About</a><a href="java script:loadContent('contact.html', 'Contact page');">Contact</a>...<div id="contentArea"></div>...</body></html>

An example of the different pages might be:

<h1>Home</h1><p>This is the home page and the URL is the same even if you are looking at the About or Contact pages</p>

I have only have a small amount of experience with PHP, I have been trying to use the JQuery.get("php_page.php", {var1: "value"}),but if I'm honest I'm like a headless chicken.Any help would be greatly appreciated,Thanks.

Link to comment
Share on other sites

If you're going to load pages through ajax then not being able to bookmark the pages is a limitation you'll have to deal with. One technique is to use the hash portion of the URL to store that information. You can change the hash portion without refreshing the page. You would have to add code that checks for the hash portion and loads the appropriate content for it. e.g.:home.html#abouthome.html#contact etc

Link to comment
Share on other sites

Thanks very much for the pointersI've managed to get the separate links......EDITED OUT.....The API for the plugin ishttp://www.asual.com/jquery/address/docs/#api-referencebut I'm not very good at using it!OK, I managed to fix the onload problem like this...

$.address.change(function(event) {	var link = event.value;	// alert(link);	if (link == "/") {		link = 'home.html';		$("#contentArea").load(link);		document.location.href = '#home.html';	}  	$("#contentArea").load(link); });

However I again have a problem re-directing to a specific page.After submitting a form I want to redirect to the same page. I successfully change the URL, and the code above recognises that the URL has changed(The alert tells me the new hash) but the page loads with no content (in the div contentArea).

mysql_close($con);echo "<script language='javascript'>window.location.href='http://www.my_site.com/home.html#chat.php'</script>";//header('Location: http://www.my_site.com/home.html#chat.php'); I tried this but it didn't work either.?>

EDIT: It might be worth adding that when I refresh the page, it remains on the same content, also I can type the URL to locate the specific contenti.e. www.my_site.com/homt.html#chat.php takes me to the chat content

Edited by ls206
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...