View Full Version : Load AJAX content when needed

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

2) Script URL (on DD):

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?


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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<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

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

<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

Hope this helps.

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...

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;

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.

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.
Jorge Sousa