[Tutorial] -> Ajax "page loader" to div element

Protege · 07-07-2008, 02:33 AM

Well I've seen a few people wanting to make cutenews load stuff into the same div, sort of like replacing an iframe, so I thought I'd post some code to help you along that.

[Heres an example]

Basically to load a page into a div element basically use this javascript function

Code:

loadPage ( 'page.html', 'div' );

I'll explain the attributes:

Green -> The page you wish to load
Red -> The div element you wish to load it into, eg:

Code:

<div id="div"></div>

Basically that will load the contents of "page.html" into the element id "div"

Heres the javascript:

Code:

    <script type="text/javascript">
        var div;
        function loadPage ( page, obj )
        {
            div = document.getElementById( 'content' );            
            if ( window.XMLHttpRequest )
            {
               httpRequest = new XMLHttpRequest();
            }
            else if ( window.ActiveXObject )
            {
               httpRequest = new ActiveXObject ( 'Microsoft.XMLHTTP' );
            }
            httpRequest.open ( 'GET', page, true );
            httpRequest.onreadystatechange = processPage;
            httpRequest.send ( false );
        }    
        function processPage ()
        {
            if ( httpRequest.readyState == 4 )
            {    
                if ( httpRequest.status == 200 )
                {
                    if ( httpRequest.responseText == '' )
                    {
                        div.innerHTML = 'Failed to load page';
                    }
                    else if ( httpRequest.responseText != '' )
                    {
                        div.innerHTML = httpRequest.responseText;
                    }
                }
            }
        }
        
    </script>

and heres a test page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <title>Test page</title>

    <script type="text/javascript">
        var div;
        function loadPage ( page, obj )
        {
            div = document.getElementById( 'content' );            
            if ( window.XMLHttpRequest )
            {
               httpRequest = new XMLHttpRequest();
            }
            else if ( window.ActiveXObject )
            {
               httpRequest = new ActiveXObject ( 'Microsoft.XMLHTTP' );
            }
            httpRequest.open ( 'GET', page, true );
            httpRequest.onreadystatechange = processPage;
            httpRequest.send ( false );
        }    
        function processPage ()
        {
            if ( httpRequest.readyState == 4 )
            {    
                if ( httpRequest.status == 200 )
                {
                    if ( httpRequest.responseText == '' )
                    {
                        div.innerHTML = 'Failed to load page';
                    }
                    else if ( httpRequest.responseText != '' )
                    {
                        div.innerHTML = httpRequest.responseText;
                    }
                }
            }
        }
        
    </script>

</head>

<body>
<a href="javascript:loadPage( 'test_page.html', 'content' )">Load</a>
<div id="content"></div>

</body>
</html>

Any questions, post below.

~~Jackboy~~ · 07-07-2008, 06:57 AM

Nice job :p

Protege · 07-07-2008, 01:21 PM

Thank you, any problems just post below.

Trigs · 07-07-2008, 01:56 PM

Could I do something like <a href="lol.php" onClick="(loadPage ( 'page.html', 'div' )">Link</a> or something like that?

Protege · 07-07-2008, 02:02 PM

Yes you can but onclick="loadPage ( 'page.html', 'div' );"

~~Plux~~ · 07-07-2008, 04:45 PM

Good job!!

Colin-Roberts · 07-07-2008, 06:04 PM

.. Dynamic Drive has all this on there website.
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Protege · 07-07-2008, 06:24 PM

Well done, though this is much easier to understand than theirs. If you wish to use theirs go ahead I'm not stopping you. Though I did ask for questions to be posted only so there was no need in your off-topic post.

~~Moh~~ · 07-07-2008, 06:55 PM

I tried adding a back button but I failed

Any idea how to do a back button?

Protege · 07-07-2008, 07:17 PM

A back button, explain more

Thread: [Tutorial] -> Ajax "page loader" to div element

Thread Tools

[Tutorial] -> Ajax "page loader" to div element

Posting Permissions