Update div content

From D3xt3r01.tk
Revision as of 21:58, 25 June 2009 by Admin (talk | contribs) (New page: ==Source== <source lang="javascript"> <script type="text/javascript"> function loadpage(page_request, containerid){ if (page_request.readyState == 4 && (page_request.status == 200 ...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Source

<script type="text/javascript">
function loadpage(page_request, containerid){
        if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)){
                document.getElementById(containerid).innerHTML = page_request.responseText;
        }
}
function ajaxpage(url, containerid){
        var page_request = false;
        if(window.XMLHttpRequest){
                page_request = new XMLHttpRequest()
        }else if(window.ActiveXObject){
                try{
                     	page_request = new ActiveXObject("Msxml2.XMLHTTP")
                }catch (e){
                        try{
                            	page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }catch (e){}
                }
        }else{
            	return false;
        }
        page_request.onreadystatechange = function(){
                loadpage(page_request, containerid)
        }
	page_request.open('GET', url, true)
        page_request.send(null)
}
</script>

How

It creates a new request .. updating the div id we provide with the content received from the request ... NEAT !

Example

Assuming we have another file named blahblah.html containing "TADAAA" .. you should see the div updating to TADAAAA ...

<html>
<head>
<script type="text/javascript">
function loadpage(page_request, containerid){
        if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)){
                document.getElementById(containerid).innerHTML = page_request.responseText;
        }
}
function ajaxpage(url, containerid){
        var page_request = false;
        if(window.XMLHttpRequest){
                page_request = new XMLHttpRequest()
        }else if(window.ActiveXObject){
                try{
                     	page_request = new ActiveXObject("Msxml2.XMLHTTP")
                }catch (e){
                        try{
                            	page_request = new ActiveXObject("Microsoft.XMLHTTP")
                        }catch (e){}
                }
        }else{
            	return false;
        }
        page_request.onreadystatechange = function(){
                loadpage(page_request, containerid)
        }
	page_request.open('GET', url, true)
        page_request.send(null)
}
</script>
</head>
<body>
<div id="updatethis">Feel free to leave this empty</div>
<a href="#" onclick="ajaxpage('blahblah.html', 'updatethis');">Update the div...</a>
</body>
</html>