I'm a bit new to javascript and ajax so bear with me. I am trying use an ajax function to replace content in a div when I click on a link. I keep getting the error "ajaxpage is not defined". ajaxpage is my function in the js. This is some example code that I found at the following link: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm Any help is much appreciated.
Link code:
<a href="javascript:ajaxpage('about.html', 'content');">About</a>
Head:
<script type=”text/javascript” src="/js/ajax.js"></script>
Div to be replaced
<div id="content">
</div>
ajax.js file:
< script type = "text/javascript" >
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var bustcachevar = 1
//bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects = ""
var rootdomain = "http://" + window.location.hostname
var bustcacheparameter = ""
function ajaxpage(url, containerid) {
var page_request = false
if (window.XMLHttpRequest)
// if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject) {
// if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e) {}
}
}
else
return false
page_request.onreadystatechange = function() {
loadpage(page_request, containerid)
}
if (bustcachevar)
//if bust caching of external page
bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
page_request.open('GET', url + bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1))
document.getElementById(containerid).innerHTML = page_request.responseText
}
function loadobjs() {
if (!document.getElementById)
return
for (i = 0; i < arguments.length; i++) {
var file = arguments[i]
var fileref = ""
if (loadedobjects.indexOf(file) == -1) {
//Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js") != -1) {
//If object is a js file
fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css") != -1) {
//If object is a css file
fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref != "") {
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects += file + " "
//Remember this object as being already added to page
}
}
}
< /script>/
UPDATED:
I did a demo for you here: http://jsfiddle.net/sg552sg552/wsSCF/8/ , I think it works.
p.s. I suggest you use jQuery.ajax, or jQuery.load. this is a demo of jQuery's version: http://jsfiddle.net/sg552sg552/YAUeA/12/
for more details see jQuery's official doc : http://api.jquery.com/load/
----------------- OLD answer ----------------------- have you ever referred the "ajax.js" file in your page? e.g.
<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
</head>
<!-- body div... -->
</html>