[Script] Ajax Page Load

[Mr.OSH]

Why did you just quote the whole post? And Carl, thanks for explaining every line to me in MSN lol.

Ooops, sorry I'm used to quoting things.

[ScottDiamond]

=D =D =D =D

[Mentor]

Why not just use a simple preg_match function checking for say MSIE against $_SERVER['HTTP_USER_AGENT'] for internet explorer?

Thats how mine works :p

[F32]

Great now watch all the habbo site change from iframes to this, thats why no one was giving it out, but it's your code you can do what you want with it, + rep anyway.

That's a bit selfish don't you think?

Code is out there to be used; not allowing someone to use it in such a way is denying people of the privledge to use it?

It was on DD for the record.

[Mentor]

That's a bit selfish don't you think?

Code is out there to be used; not allowing someone to use it in such a way is denying people of the privledge to use it?

It was on DD for the record.

Mine has less crap in it than DD's.
DD's stuff always seems to be incredibly long winded and inefficient for no real reason "/
On the topic of including to much crap i combined it in to a single function, i think it will still work, i haven't tested again, main differences is i put the second function in the first.

function LoadPage(page,usediv) {
         // Set up request varible
         try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
         //Show page is loading
         document.getElementById(usediv).innerHTML = 'Loading Page...';
         //scroll to top
         scroll(0,0);
         //send data
         xmlhttp.onreadystatechange = function(){
                 //Check page is completed and there were no problems.
                 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                        //Write data returned to page
                        document.getElementById(usediv).innerHTML = xmlhttp.responseText;
                 }
         }
         xmlhttp.open("GET", page);
         xmlhttp.send(null);
         //Stop any link loading normaly
         return false;
}

Im working on the assumption formating like this means i dont need to define a globally scoped variable (which cases problems if your actually useing the asynchronous part of ajax), and that i used the inline function syntax right.

[Colin-Roberts]

anway to make the content load so many pixels to the rite of the beginning of the content box? and thanks mentor
do i still have news privladges on your site?

[Mentor]

anway to make the content load so many pixels to the rite of the beginning of the content box? and thanks mentor
do i still have news privladges on your site?

not sure why you would want to, but if your asking what i think you are, easyst way would just be add a margin or padding in CSS to the div your loading the content in to ?

Also just for the hell of it, even smaller version

function LoadPage(p,d) {
         try {xh = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
         pd = document.getElementById(d); pd.innerHTML = 'Loading Page...'; scroll(0,0);
         xh.onreadystatechange = function(){if ((xh.readyState == 4) && (xh.status == 200)) {pd.innerHTML = xh.responseText;}}
         xh.open("GET", p); xh.send(null);  return false;
}

[:Edzy]

Ok, theres been a few people asking for this lately so i thought id provide a script ive written. What an ajax load normaly is, is a method where an xmlhttp request is made via javascript and the content of a page is dynamically loaded in to a div of your choice.
Currently im going to provide a very basic script, which just takes a page and displays the contents in a div, via ajax.
I may later add an advanced version which will support additional function, to work with a php navigation meaning search engines can still crawl the content, the back button and favorites still works.

Basic script

Features:
> Shows page is loading
> dynamically loads page to a div.

<script>
//Set up variables
var xmlhttp ;
var thediv;
function LoadPage(page,usediv) {
         // Set up request varible
         try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
         //Show page is loading
         document.getElementById(usediv).innerHTML = 'Loading Page...';
         //scroll to top
         scroll(0,0);
         //Store div in use
         thediv = usediv;
         //send data
         xmlhttp.onreadystatechange = ShowPage;
         xmlhttp.open("GET", page);
         xmlhttp.send(null);
         //Stop any link loading normaly
         return false;
}
function ShowPage(){
         //Check page is completed and there were no problems.
         if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                //Write data returned to page
                document.getElementById(thediv).innerHTML = xmlhttp.responseText;
         }
}
</script>

This function can now be called via creating a link like this.

<a href="mypage.htm" onclick="return LoadPage('mypage.htm','mydiv');">

The above would place the contents of "mypage.htm" in to a div with the id "mydiv" such as could be written '<div id="mydiv"></div>'

The parts of the link in bold being what need editing.

I wrote the script on the go so its completely untested but should hopefully work. If it doesnt post back with the problem and ill sort it out for you.

Edit: phew noticed just in time, id forgotten to store the div id in the function independents variable, which would have stopped it from working, should be fixed now.

FIT ily - +rep

[Rix]

Good work bag

[Mentor]

As an exspantion, an updated version which now allows people to bookmark pages loaded via ajax. And Allows the backbutton to function correctly in firefox (not IE as that doesnt change the URI when a new hash is set)

Long version

var CurrentPage;
function LoadPage(page,usediv) {
         // Set up request varible
         try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
         //Show page is loading
         document.getElementById(usediv).innerHTML = 'Loading Page...';
         //scroll to top
         scroll(0,0);
         //Change loaction hash.
         document.location.hash = page;
         //Store current page.
         CurrentPage = document.location.hash;
         //send data
         xmlhttp.onreadystatechange = function(){
                 //Check page is completed and there were no problems.
                 if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                        //Write data returned to page
                        document.getElementById(usediv).innerHTML = xmlhttp.responseText;
                 }
         }
         xmlhttp.open("GET", page);
         xmlhttp.send(null);
         //Stop any link loading normaly
         return false;
}
//Poll hash to see if back button has been pressed
setInterval(CheckBack, 500);
function CheckBack(){
        // if the hash has changed from what was set in the script reload page.
        if(CurrentPage !== document.location.hash){
                LoadPage(document.location.hash);
        }
}

Short version

var cp;
function LoadPage(p,d){
         try {xh=window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");} catch (e){alert("Error: Could not load page.");}
         pd=document.getElementById(d);h=document.location.hash;pd.innerHTML='Loading Page...';scroll(0,0);h=p;cp=h;
         xh.onreadystatechange=function(){if((xh.readyState==4)&&(xh.status==200)){pd.innerHTML=xh.responseText;}}
         xh.open("GET",p);xh.send(null);return false; }
function CheckBack(){if(cp!==document.location.hash){LoadPage(document.location.hash);}} setInterval(CheckBack,500);

Again both are completely untested but should work just fine