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/dynamici...axincludes.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

Code:

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

Code:

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

**MoscowModder** · 03-04-2009, 02:11 PM

Originally Posted by codeexploiter

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

Thread: Load AJAX content when needed

Thread Tools

Search Thread

Load AJAX content when needed

Bookmarks

Bookmarks

Posting Permissions