0

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
4
Views
8 Years
Discussion Span
Last Post by Thirusha
0

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

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

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
}
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.