ajax page loader. [Archive]

RyanDOT

05-06-2009, 06:17 PM

I hate doing ajax page loader's, and somehow this one is not working. Please help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
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)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=pag e_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>BuddyFM - Bringing the music to you...</title>
<style type="text/css"></style>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="banner">
<div class="banner_ad"><embed src="imagerotator.swf" width="401" height="124" allowscriptaccess="always" allowfullscreen="true" flashvars="file=imagerotator.xml&transition=blocks"></embed></div></div>
<div class="menu">
<div class="menu_text">
<div align="center">Home - <a href="javascript:ajaxpage('test.htm', 'main_text');">test</a>
<div id="main_text"></div> - Request - Schedule - Contact</div></div></div>
<div class="container_content">
<div class="content_container">
<div class="main_container">
<div class="content_header_red">
<div class="header_text">Content </div></div>
<div class="content_mid">
<div class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi. Etiam tincidunt, enim eu ultricies fringilla, augue augue vestibulum eros, in dictum elit nunc a erat. Vivamus ac neque diam, vitae bibendum ipsum. Proin malesuada ante eget eros ullamcorper mattis molestie quam varius. Phasellus at leo quis lacus porta imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio risus, facilisis sed tincidunt eu, imperdiet vel lorem. Cras ornare, dui a hendrerit dignissim, risus est commodo lorem, vulputate porttitor arcu lectus eget mi. Nulla elementum orci nec tortor volutpat mattis. Cras urna nulla, commodo at dictum quis, viverra nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi. Etiam tincidunt, enim eu ultricies fringilla, augue augue vestibulum eros, in dictum elit nunc a erat. Vivamus ac neque diam, vitae bibendum ipsum. Proin malesuada ante eget eros ullamcorper mattis molestie quam varius. Phasellus at leo quis lacus porta imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque odio risus, facilisis sed tincidunt eu, imperdiet vel lorem. Cras ornare, dui a hendrerit dignissim, risus est commodo lorem, vulputate porttitor arcu lectus eget mi. Nulla elementum orci nec tortor volutpat mattis. Cras urna nulla, commodo at dictum quis, viverra nec ligula. </div></div>
<div class="content_bottom"></div></div></div>
<div class="right_content">
<div class="side_header_green">
<div class="header_text">Radio Player</div></div>
<div class="side_mid_green">
<div class="side_text"><span class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi.</span><span class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi.</span></div></div>
<div class="side_bottom_green"></div>
<div class="side_fill"></div>
<div class="side_header_blue">
<div class="header_text">Latest News</div></div>
<div class="side_mid_blue">
<div class="side_text"><span class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi.</span><span class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lorem lectus, blandit at consequat vitae, rhoncus non nisi.</span></div></div>
<div class="side_bottom_blue"></div></div></div>
<div class="container_bottom"></div></div>
</body>
</html>

Moh

05-06-2009, 07:54 PM

Try using prototype, much better =)

http://www.prototypejs.org/learn/introduction-to-ajax

RyanDOT

06-06-2009, 07:54 AM

Try using prototype, much better =)

http://www.prototypejs.org/learn/introduction-to-ajax

I find that confusing reading that page..

Moh

06-06-2009, 12:16 PM

I find that confusing reading that page..

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
function loadPage(page) {
new Ajax.Request(page, {
method:'get',
onSuccess: function(transport){
var response = transport.responseText;
$("content").innerHTML = response;
, onFailure: function() {
$("content").innerHTML = "Oh noes! a 404!";
}
});
}
</script>
<a href="#" onclick="loadPage('test.html'); return false;">Linky</a>
<div id="content"></div>

RyanDOT

07-06-2009, 12:03 PM

I put that but still doesn't work.

DeejayMachoo$

07-06-2009, 03:50 PM

I put that but still doesn't work.

add me too msn [email protected] also do u have javascript enabled?

Moh

07-06-2009, 05:27 PM

I put that but still doesn't work.

You need to download prototype :)

Source

07-06-2009, 09:21 PM

Chippiewill

11-06-2009, 08:25 AM

-snip, read top post wrong-