Member Avatar for vidhyaponnusamy

Hi
I am new to ajax but i have done one simple menu program using ajax i created one index page with menus if i click each menu i want that linked page in the same window now i am getting as a separate window that is i want to refresh only that particular part and not the whole page i will give you the code that i have done please help me out

this is my index.html page were i have my menus

<html>
<head>
<title>My ajax website</title>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="nav">
<a href="home.html" onClick="sendRequest('home.html');">Home</a>
<a href="first.html"onClick="sendRequest('first.html');">First Page</a>
<a href="second.html onClick="sendRequest('second.html');">Second Page</a>
</div>
<br/>
<div id="content">
<script language="Javascript" type="text/javascript">
if ((window.location.href.split("#", 2)[1] == null) || (window.location.href.split("#", 2)[1] == "") || (window.location.href.split("#", 2)[1] == "index")){
sendRequest("index.html");
}else{
sendRequest(window.location.href.split("#", 2)[1] + ".html");
}
</script>
</div>
</body>
</html>
this is my ajax.js

function createRequestObject() {
	var req;

	if(window.XMLHttpRequest){
		// Firefox, Safari, Opera...
		req = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		// Internet Explorer 5+
		req = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		// There is an error creating the object,
		// just as an old browser is being used.
		alert('Problem creating the XMLHttpRequest object');
	}
	return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(webpage) {
	// Open PHP script for requests
	http.open('get', webpage);
	http.onreadystatechange = handleResponse;
	
	http.send(null);
}

function handleResponse() {
	if(http.readyState == 4 && http.status == 200){

		// Text returned FROM the PHP script
		var response = http.responseText;

		if(response) {
			// UPDATE ajaxTest content
			//alert(response);
			document.getElementById("content").innerHTML = response;
		}
	}
}
  • 2 Contributors
  • 3 Replies
  • 213 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Thirusha
Member Avatar for Thirusha

The href attributes are causing it to open in a new window, you can remove them

<a onClick="sendRequest('home.html');">Home</a>
Member Avatar for vidhyaponnusamy

Hi
if i remove the href means it does not work as a link menu or button give some other idea

Member Avatar for Thirusha

if by link menu you mean the cursor doesnt change to a hand, simply and a style to it, you can do it in two ways, by either having a class attribute

in the stylesheet file create a class for example menuClass:

.menuClass{
cursor:pointer;
}

the code would then look like this:

<a class="menuClass" onClick="sendRequest('home.html');">Home</a>

or by "hard-coding" a style to the attribute like this:

<a style="cursor:pointer" onClick="sendRequest('home.html');">Home</a>

I have also noticed that the ajax part of teh code was a bit incorrect

In your sendRequest function, the handleResponse must be called before the open.

Also i dont see a need to have a script in the div, that script is causing errors in IE.You need to put the readyState and status comparisons on different lines, as this too causes and error in IE, so it shoule look something like this:

if(http.readyState == 4){
		if (http.status == 200){
// the rest of the code here
}
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.