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

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

Originally Posted by Protege

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

Originally Posted by Flisker

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.

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;
        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/freeSc...ader-objs.html

~~Joshuae~~ · 09-07-2008, 08:21 PM

It's much better with the control buttons, can't wait for a forward button.

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

Thread Tools

Posting Permissions