PDA

View Full Version : Dynamic Ajax Content



jesusisLord
04-10-2012, 01:28 PM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:
First of all I want to thank you for this free script. I got it working on my site.
I was wondering if the following were to be possible:

If index.html loads for example a normal link named test.html with this script, is it possible to give visitors of my site a direct link to test.html?

If they visit test.html that test.html will load automatically in a div in index.html?

Thanks in advance for your help.

Greetings
laurens

ddadmin
04-11-2012, 12:50 AM
The common approach to enable each of the pages loaded via Ajax to be accessed directly is to modify the script so a unique hash is added to the main page's URL each time a page is requested. When the page loads, the script can then check for the existence of a hash, and if found, load the page directly into the content container without having the user click on a link first. The below code modifies the original script for this (additions required in red):


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Rotating Includes Script</title>
<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 loadedobjects=""
var rootdomain="http://"+window.location.hostname

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(url, page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(url, 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
location.hash=url
}
}

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>

<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#leftcolumn a:hover{
background-color: #FFFF80;
}

#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('ajaxfiles/external.htm', 'rightcolumn');">Porsche Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external2.htm', 'rightcolumn');">Ferrari Page</a>
<a href="javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');">Aston Martin Page</a>

<div style="margin-top: 2em">Load CSS & JS files</div>
<a href="javascript:loadobjs('ajaxfiles/style.css', 'ajaxfiles/tooltip.js');">Load "style.css" and "tooltip.js"</a>

</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

<script>

if (location.hash != ''){
try{
ajaxpage(location.hash.substr(1), 'rightcolumn')
} catch(e){}
}
</script>

</body>

</html>

Try running the above page and click on a link to request a page. Notice how the URL in the location bar is augmented with a hash. The resulting URL if directly copied and pasted onto a new browser window will load the above page but with the requested Ajax page loaded by default inside it.

jesusisLord
04-12-2012, 11:50 AM
Hello admin,

Thanks for your reply and your help.

The thing is the following:

I have a main site directed by index.html which has a menu that puts all my other html files in div 'rightcolumn' .

When google searches my sitemap it finds all the html files and puts those url's in google search. When visitors click on those urls they should be opened in rightcolumn of index.html. I cannot make google change the url names.

So I think there needs to be a script on all my html files that direct it to be loaded in rightcolumn of index.html.

I once had such a solution for an iframe which was located on index.html. But I like ajax better...

Well hope you can help,

Thank you,

laurens