LinkBack URL
About LinkBacks
Reply With QuoteRight the forum's being gay again and removing half the code so the files are attached as text files, just rename to .js.
There have been quite a few people wanting to replace content within a frame on a website without navigating away from the page so I've written a lightweight framework for doing just that for anybody to use.
First you need to create a template design, there are three major components that need to be included; two Javascripts (ajax.js and links.js) and a div with an id of 'content' (this is where all of our content will be displayed).
The first Javascript (ajax.js) needs to be placed in the head of the document whilst the second is placed just above the end body tag. The content div can be placed anywhere you like:
As you can see from the code above we have placed a class of ajax in the link tag of the link that we wish to retrieve using ajax. When one of these links is clicked the Javascript retrieves the target document (href) and attempts to copy the contents of the 'content' div, if no content div is found or the user does not have Javascript enabled the href is opened in the window instead allowing for a graceful transformation.PHP Code:<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AJAX Example</title>
<link rel="stylesheet" href="styles/default.css" />
<script type="text/javascript" src="javascript/ajax.js"></script>
</head>
<body>
<ul id="navigation">
<li><a href="index.html" class="ajax">Home</a></li>
<li><a href="one.html" class="ajax">One</a></li>
</ul>
<div id="content">
Home
</div>
<script type="text/javascript" src="javascript/links.js"></script>
</body>
</html>
Remeber for a consistent design the only part of the page that should change should be the content in the content div of each page.
ajax.js (compressed):
links.js:PHP Code:function GetRequestObject(){var a;/*@cc_on@if(@_jscript_version>=5)try{a=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{a=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){a=false}}@else a=false;@end@*/if(!a&&typeof XMLHttpRequest!='undefined'){try{a=new XMLHttpRequest()}catch(e){a=false}}return a}function XMLDOMAdapter(){if(typeof ActiveXObject!='undefined'){return new(function(){this.createDocument=function(){var a=['Microsoft.XMLDOM','Msxml2.DOMDocument.3.0','MSXML2.DOMDocument','MSXML.DOMDocument'];for(var b in a){try{return new ActiveXObject(a[b])}catch(e){}}return false};this.serialize=function(a){return a.xml};this.parseXml=function(a){var b=this.createDocument();if(!b.loadXML(a)){return false}return b}})()}else if(document&&document.implementation&&document.implementation.createDocument&&typeof DOMParser!='undefined'){return new(function(){this.createDocument=function(){return document.implementation.createDocument('','',null)};this.serialize=function(a){return new XMLSerializer().serializeToString(a)};this.parseXml=function(a){var b=new DOMParser().parseFromString(a,'text/xml');if(b.documentElement.nodeName=='parsererror'){return false}return b}})()}else{return false}};function DeepCopyNode(a,b){var c;if(!b){c=document.createElement(a.nodeName)}else{c=b.appendChild(document.createElement(a.nodeName))}for(var j=0;j<a.attributes.length;j++){c.setAttribute(a.attributes[j].nodeName,a.attributes[j].nodeValue)}if(c.getAttribute('class')=='ajax'){c.onclick=function(){SendRequest(c.attributes.getNamedItem('href').value);return false}}for(var i=0;i<a.childNodes.length;i++){if(a.childNodes[i].nodeType==1){DeepCopyNode(a.childNodes[i],c)}else if(a.childNodes[i].nodeType==3){var d=document.createTextNode(a.childNodes[i].nodeValue);c.appendChild(d)}}return c}function SendRequest(f){request=GetRequestObject();if(!request){window.location.href=f}request.open("GET",f,true);request.onreadystatechange=function(){if(request.readystate==4||request.readyState==4){var a=request.responseText.substring(request.responseText.indexOf('<html'));var b=XMLDOMAdapter().parseXml(a);var c=b.documentElement.getElementsByTagName('div');var d=false;for(var i=0;i<c.length;i++){if(c[i].attributes.getNamedItem('id')&&c[i].attributes.getNamedItem('id').value=='content'){d=DeepCopyNode(c[i]);i=c.length}}if(d){try{document.getElementById('content').parentNode.replaceChild(d,document.getElementById('content'))}catch(e){window.location=f}}else{window.location=f}}};request.send(null)}
Any questions, just ask.PHP Code:var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
if(links[i].className == "ajax"){
links[i].onclick = function(){
SendRequest(this);
return false;
}
}
}
Right the forum's being gay again and removing half the code so the files are attached as text files, just rename to .js.
Nice one Scriptage!
I have a question *raises hand* several times people have mentioned that avoiding JS is beneficial, incase visitors have it switched off - would this effect this layout, and if so, what would the visitor see if it did?
No the whole point of this is that it is accessble; if Javascript is turned off the link in the href is opened so the user will see the file. Each file should follow the same template so each document looks the same; the only part that changes is the content (the part that we will get with AJAX), so there is a seemless transformation for those that do not have Javascript enabled.
Oh well that is reasurring. Thanks!
No problem :)
whiskey makes everything accessible
I've learned that the hard way.
We all have.Originally Posted by Scriptage
It seems like only yesterday that you were telling us all how much you hated frameworks in general and ajax in particular. Or did I dream that?
Posting Permissions
Check the forum often for the latest design announcements. Everything from graphic design and web design, to films and music. Estetica is a great place for people to get together and help each other out.
Bookmarks