PDA

View Full Version : Load AJAX content when needed



MoscowModder
03-03-2009, 06:33 AM
1) Script Title:
AJAX includes script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm

3) Describe problem:
What I want is a script that will only load the content to be included when I click the link that loads the hidden div that's fetched via AJAX. I would like it to load the included content every time it's called for, as it is supposed to change every time it is shown. Does anyone know how this can be accomplished?

Thanks,
-MoscowModder

codeexploiter
03-03-2009, 08:41 AM
A Demo



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
</style>
<script type="text/javascript">

/***********************************************
* Ajax Includes script- 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
***********************************************/
//To include a page, invoke ajaxinclude("afile.htm") in the BODY of page
//Included file MUST be from the same domain as the page displaying it.

var rootdomain = "http://" + window.location.hostname

function ajaxinclude(url,resultElementId) {
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.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request,resultElementId)
}

function writecontent(page_request,resultElementId) {
if (page_request.status == 200) {
if(document.getElementById(resultElementId)){
document.getElementById(resultElementId).innerHTML = page_request.responseText;
}else{
var d = document.createElement('div');
d.id = resultElementId;
d.innerHTML = page_request.responseText;
document.body.appendChild(d);
};
}
}
</script>
</head>
<body>
<form name="f1">
<input type="button" name="load" value="Load Div Value" />
</form>
<div id="result">

</div>
<script type="text/javascript">
document.forms['f1'].elements['load'].onclick = function(){
ajaxinclude('test.php',"result"); //Instead of using test.php you can mention your file name which you want to access. result is the id value of the div element in which you want to insert the resultant data
}
</script>
</body>
</html>


Hope this helps.

MoscowModder
03-03-2009, 01:34 PM
Assuming the external content is in a div (that is coded on the external page), could you put multiple pages of content in one div?

My content consists of several files that contain different 'windows' that are summoned when their corresponding links are clicked.

Otherwise, I could add a few more divs for the external content...

codeexploiter
03-03-2009, 01:45 PM
You can add content that comes from another ajax call in an already existing div element.


document.getElementById(resultElementId).innerHTML += page_request.responseText;

MoscowModder
03-04-2009, 02:11 PM
You can add content that comes from another ajax call in an already existing div element.

That could work, but I was sorta hoping it would be possible to have multiple AJAX-summoned divs present simultaneously that can be dismissed or called upon and reloaded.

jorgesousa
10-17-2009, 11:20 PM
I copy the code of Ajax includes script to my disk and it don't work.
Whatmust I do.
Thanks
Jorge Sousa