Ajax Navigation

JavaScriptSource Staff Jul 24, 2006

General

Use this script instead of frames. When a visitor clicks on a specific link, the content of that link is inserted into the page without a refresh. When a page doesn't exist, a user-friendly error message is given.

My Navagation links

Go to page 1
Go to page 2
Go to page 3
Go to page 4
Broken Link

Notes

Created by: Michael
Web Site: http://www.posters-bestellen.nl

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: ajax_navagation.js

var please_wait = null;

function open_url(url, target) {
 	if ( ! document.getElementById) {
  		return false;
 	}

 	if (please_wait != null) {
  		document.getElementById(target).innerHTML = please_wait;
 	}

 	if (window.ActiveXObject) {
  		link = new ActiveXObject("Microsoft.XMLHTTP");
 	} else if (window.XMLHttpRequest) {
  		link = new XMLHttpRequest();
 	}

 	if (link == undefined) {
  		return false;
 	}
 	link.onreadystatechange = function() { response(url, target); }
 	link.open("GET", url, true);
 	link.send(null);
}

function response(url, target) {
 	if (link.readyState == 4) {
	 	document.getElementById(target).innerHTML = (link.status == 200) ? link.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the fallowing errorcode: " + link.status;
	}
}

function set_loading_message(msg) {
 	please_wait = msg;
}

Head

Paste this code into the HEAD section of your HTML document.

<script type="text/javascript" src="ajax_navagation.js"></script>

  set_loading_message("Please wait while the page is opening....");

Body

Paste this code into the BODY section of your HTML document

<table>
<tr>
<td valign=top width=150>
<H5>My Navagation links</H5>
<a href="javascript:void(0)" onclick="open_url('page-1.html','my_site_content');">Go to page 1</a><br>
<a href="javascript:void(0)" onclick="open_url('page-2.html','my_site_content');">Go to page 2</a><br>
<a href="javascript:void(0)" onclick="open_url('page-3.html','my_site_content');">Go to page 3</a><br>
<a href="javascript:void(0)" onclick="open_url('page-4.html','my_site_content');">Go to page 4</a><br>
<a href="javascript:void(0)" onclick="open_url('xxxx.html','my_site_content');">Broken Link</a><br>
</td>
<td valign=top>
<div id="my_site_content">
</div>
</td>
</tr>
</table>

Leave a Response

(43 comments)

Joe,[br /]In order to help you we would need to see the script. Your question will be better handled if you post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Jan 16, 2009

I tried using this to load several different image galleries and it was unsuccessful. Did not get a error, it just simply ignored any javascript that was brought in. I would say this is just used for standard html and not any page.... fooie still have to use iframes.

Joe Dec 3, 2008

Erhan,[br /]Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 18, 2008

First of all, I want to thank you so much for this script. It is really fabulous ajax script. Let me tell you my problem. It works really good in firefox and IE7 on my localhost. But when I upload it and try to test it thoruh internet, it works in FF, but not in IE :( what could the problem would be? what do you think?[br /]Regards.[br /]Erhan.

erhan Nov 9, 2008

This is very nice example.Though its look simple it shows the differnt use of AJAX .Very ice and proper code.

sunita Sep 16, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details