The JavaScript Source: Ajax : Ajax Navigation2

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

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. [Note: This is an edited version of the original script.]

My Navagation links

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

Notes

Created by: Ultimater
Web Site: http://invisionfree.com/forums/Black_Forest_Boards
Posted: December 6, 2006

Source Code

Paste this source code into the designated areas.

External file

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

/* Ultimater's edited version of:
   http://jibbering.com/2002/4/httprequest.html
   to serve IE7 with XMLHttpRequest instead of ActiveX */

var xmlhttp=false;
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 	try {
 		 xmlhttp = new XMLHttpRequest();
 	} catch (e) {
 		 xmlhttp=false;
 	}
}

/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
if (!xmlhttp){
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
}
@end @*/

if (!xmlhttp && window.createRequest) {
	try {
		xmlhttp = window.createRequest();
	} catch (e) {
		xmlhttp=false;
	}
}

/* Ultimater's edited version of:
   http://javascript.internet.com/ajax/ajax-navigation.html */

var please_wait = "Please wait...";

function open_url(url, targetId) {
  if(!xmlhttp)return false;
    var e=document.getElementById(targetId);if(!e)return false;
    if(please_wait)e.innerHTML = please_wait;
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange = function() { response(url, e); }
    try{
      xmlhttp.send(null);
    }catch(l){
    while(e.firstChild)e.removeChild(e.firstChild);//e.innerHTML="" the standard way
    e.appendChild(document.createTextNode("request failed"));
  }
}

function response(url, e) {
  if(xmlhttp.readyState != 4)return;
    var tmp= (xmlhttp.status == 200 || xmlhttp.status == 0) ? xmlhttp.responseText : "Ooops!! A broken link! Please contact the webmaster of this website ASAP and give him the following error code: " + xmlhttp.status+" "+xmlhttp.statusText;
    var d=document.createElement("div");
    d.innerHTML=tmp;
    setTimeout(function(){
      while(e.firstChild)e.removeChild(e.firstChild);//e.innerHTML="" the standard way
      e.appendChild(d);
    },10)
}

Head

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


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

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>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

My Navagation links

Notes

Source Code

External file

Head

Body

User Comments

34. From: Andy
04/23/2008 15:35:52

32. From: Bobby
11/09/2007 16:36:29

33. From: Lee (Admin)
11/13/2007 11:58:22

30. From: Aikido
ASPX Pages
09/25/2007 09:54:25

31. From: Lee (Admin)
11/06/2007 11:54:03

28. From: miguel
Firefox
09/19/2007 20:20:25

29. From: Lee (Admin)
11/06/2007 11:44:37

26. From: rikard lassenius
06/11/2007 06:40:22

27. From: Lee (Admin)
06/12/2007 15:17:59

25. From: mostafa
When two calls are made
05/15/2007 04:02:47

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

My Navagation links

Notes

Source Code

External file

Head

Body

User Comments

34. From: Andy04/23/2008 15:35:52

32. From: Bobby11/09/2007 16:36:29

33. From: Lee (Admin)11/13/2007 11:58:22

30. From: AikidoASPX Pages09/25/2007 09:54:25

31. From: Lee (Admin)11/06/2007 11:54:03

28. From: miguelFirefox09/19/2007 20:20:25

29. From: Lee (Admin)11/06/2007 11:44:37

26. From: rikard lassenius06/11/2007 06:40:22

27. From: Lee (Admin)06/12/2007 15:17:59

25. From: mostafaWhen two calls are made05/15/2007 04:02:47

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

34. From: Andy
04/23/2008 15:35:52

32. From: Bobby
11/09/2007 16:36:29

33. From: Lee (Admin)
11/13/2007 11:58:22

30. From: Aikido
ASPX Pages
09/25/2007 09:54:25

31. From: Lee (Admin)
11/06/2007 11:54:03

28. From: miguel
Firefox
09/19/2007 20:20:25

29. From: Lee (Admin)
11/06/2007 11:44:37

26. From: rikard lassenius
06/11/2007 06:40:22

27. From: Lee (Admin)
06/12/2007 15:17:59

25. From: mostafa
When two calls are made
05/15/2007 04:02:47