I hate doing ajax page loader's, and somehow this one is not working. Please help.
PHP Code:<!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=page_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"><!--
body,td,th {
font-family: Tahoma;
font-size: 12px;
color: #666666;
}
body {
margin-left: 0px;
margin-top: 40px;
margin-right: 0px;
margin-bottom: 0px;
}
--></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>
Results 1 to 9 of 9
Thread: ajax page loader.
-
ajax page loader.
-
05-06-2009, 07:54 PM #2
Try using prototype, much better =)
http://www.prototypejs.org/learn/introduction-to-ajax
-
I find that confusing reading that page..
Originally Posted by Jack120
-
06-06-2009, 12:16 PM #4
Originally Posted by RyanDOT
HTML Code:
<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>
-
I put that but still doesn't work.
-
07-06-2009, 03:50 PM #6
- Join Date
- Oct 2007
- Location
- Luton, England
- Posts
- 1,548
- Tokens
- 388
- Habbo
- DeejayMachoo
-
07-06-2009, 05:27 PM #7
You need to download prototype Originally Posted by RyanDOT
-
Try that?HTML Code:
<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").update = response; , onFailure: function() { $("content").update = "Oh noes! a 404!"; } }); } </script> <a href="#" onclick="loadPage('test.html'); return false;">Linky</a> <div id="content"></div>
I thought it was $(div).update to change the content, and .innerHTML to only return the content - might be wrong though.
-
-snip, read top post wrong-
Last edited by Chippiewill; 11-06-2009 at 08:27 AM.
Chippiewill.
Reply With Quote
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts