PDA

View Full Version : [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 (http://www.interstudios.co.uk/freeScripts/ajax/divloader.html)]

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



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:



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


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

Heres the javascript:



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


<!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/dynamicindex17/ajaxcontent.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
Flisker
07-07-2008, 07:35 PM
where you click it and it goes back a page... histroy(-1) or something
Protege
07-07-2008, 08:26 PM
I'll give it a go after Ive finished what im doing :)
Moh
08-07-2008, 02:13 PM
A back button, explain more
Where you can click back, like somewhere on the page which takes you to your previous page.

I got half of it working, when you click a link, it also saves the page name in a var, but if you go back to the first page, if you click back it goes to a blank page. I tired if(backpage = "home.php") it removes the back button, but didn't work :S



where you click it and it goes back a page... histroy(-1) or something
That takes the full page back, not the ajax
Protege
08-07-2008, 02:16 PM
I'll post it at 5-6 Tonight. So wait for then :) (maybe 4 depends when i get back) I'll do a back, forward, and refresh. :)
Invent
08-07-2008, 02:22 PM
Nice one (:
Jackboy
08-07-2008, 04:44 PM
Since this is an ajax thread i gonna kinda hijack your thread for a sec, on my thread in the coding community section i want something to fade. Using ajax i load the page then the page i load i want it to fade something on the main page if u get me? lol
Protege
08-07-2008, 05:02 PM
I'm not accepted into the coding community, I feel so rejected! I'm still doing this back/forward/refresh thing. Afterwards - of course :)
Protege
08-07-2008, 07:14 PM
Alright, I've probably done this wrong but you can go as many page backs as you've gone forward (if that makes sense), I haven't coded in the forward feature as I have a massive headache :(

Heres the testpage alt'd, also you can put some hover on the images for a cursor thats upto you. :)


<!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;
var pagehistory = [ 0 ];
var pagechr;
var pagenum;
var forward;
var currentpage = '';

function pasteControls ( div, location )
{
var loc = document.getElementById( location );
loc.innerHTML = '<a onClick="doPage( 1, ' + div + ' );"><img src="action_back.gif" alt="Back" /></a><a onClick="doPage( 2, ' + div + ' );"><img src="action_refresh.gif" alt="Back" /></a>';
}

function doPage ( param, div )
{
if ( param == 1 )
{
if ( forward == 1 )
{
forward = 0;
pagehistory.pop();
}
pagenum = pagehistory.length;
pagechr = pagehistory.pop();
if ( pagenum >= 0 )
{
loadPage ( pagechr, div, 2 );
}
}
else if ( param == 2 )
{
if ( currentpage !== '' )
{
loadPage ( currentpage, div, 2 );
}
}
else if ( param == 3 )
{
/* Forward */
}
}

function loadPage ( page, obj, option )
{
currentpage = page;
if ( option == 0 )
{
pagehistory[ pagehistory.length ] = page;
forward = 1;
}

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 onLoad="pasteControls ( 'content', 'content-ajax-controls' );">
<div id="content-ajax-controls"></div><div id="errors"></div>
<a href="javascript:loadPage( 'test_page.html', 'content', 0 )">Load</a>
<a href="javascript:loadPage( 'differentpage.html', 'content', 0 )">Load</a>
<div id="content"></div>

</body>
</html>

Different test file -> http://www.interstudios.co.uk/freeScripts/ajax/divloader-objs.html
Joshuae
09-07-2008, 08:21 PM
It's much better with the control buttons, can't wait for a forward button.

Want to hide these adverts? Register an account for free!