Ajax Navigation2

JavaScriptSource Staff Dec 6, 2006

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

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://www.javascriptsource.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>

Leave a Response

(34 comments)

22. From: Erick[br /][br /]I have the exact same problem![br /][br /]Script works fine for static sites. But the caching is a pain for dynamic sights!

Andy Apr 23, 2008

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 13, 2007

This seems to only work for pages that exist on your own database. Is there a way to get it to work for external sites?[br /][br /]I have only tested this on FF2.0.0.9

Bobby Nov 9, 2007

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Nov 6, 2007

Not sure what you mean. It works fine for me using FF 2.0.0.9. Each time I click a link, it loads the page only once.

Lee Nov 6, 2007

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