« »

Use this JavaScript 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.

Label: AJAX, navigation, menu, frame, error message, message

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">

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

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;
}
</script>

Copy All x2

<script type="text/javascript">
<!--
/* This script and many more are available free online at
Created by: Michael :: http://www.posters-bestellen.nl */

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

</script>
<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>

Comment (6)
Write

by nguyen quan, 11/11/2008 11:11 PM
Ma nguon nay khong hoat dong duoc

Ma nguon nay khong hoat dong duoc.
Ban kiem tra lai roi post lai len cho moi nguoi cung xem nha

Cam on ban nhieu

by Cao Phong, 12/11/2008 06:11 PM
hiệu ứng chỉ thiếu file nội dung

hiệu ứng hoạt động tốt mà bạn, vấn đề chỉ là không có file nội dung cho nó load mà thui >

; nếu muốn sử dụng thì bạn chỉ cần tạo các file nội dung là ổn

by QuangThai, 17/11/2008 02:11 AM
Code hoạt động tốt

Code hoạt động tốt mà,phải cầm tay chỉ mới chịu sao

by Nguyen Quan, 25/11/2008 02:11 AM
Van khong chay duoc

Chao ban
Mình đã tạo 5 file nội dung nhu trong code (page-1.html, page-2.html, page-3.html, page-4.html, xxxx.html) Dat cung voi trang home nhung van khong chay duoc.

Ban kiem tra lại xem. Neu bạn làm chạy được rồi thì có thể nén toàn bộ code đó rồi gửi lên bằng file nén cho mọi người cùng xem có được không

Xin chân thành cảm ơn bạn nhièu

by Cao Phong, 25/11/2008 06:11 PM
xin lỗi vì đã quên nói với bạn

là các hiệu ứng về AJAX sẽ chỉ hoạt động khi được thực thi thông qua một web server chứ không thể nào chạy offline được, bạn vui lòng upload tất cả các file lên 1 host (localhost) để thử