PDA

View Full Version : Dynamic Ajax Content Link problems



Kranbyskov
06-17-2013, 06:17 PM
1) Script Title: Dynamic Ajax Content Link problems

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

3) Describe problem: I wanna make a link that links to my index.html and at the same time down in the content box where the ajax script is loads a site that is not the standard.

Eksample

Defult link is Index.html and it loads text 1.
what i wanna make is a link that opens index.html and displays text 2 from the start and this needs to be in a link so that i can use it on Fx a other side that's not located on the sever.

is there a way to make a link that is saying
<a href="index.html" href="javascript:ajaxpage('indextwo.html', 'content');"/>
<h2>Home</h2>

so it first opens the index.html and after opens the content indextwo.html in the content area. ?

Hope you understand my problem and have a trick ore to to help me out

molendijk
06-17-2013, 09:56 PM
Do you want to load a file (in the contentarea) that is from a 'foreign' domain?
Just create a file called 'foreign.html' (or whatever name) and put the following in it (for instance):

<iframe src="http://www.dynamicdrive.com" frameborder="0" style="position: absolute; width: 550px; height: 400px"></iframe>
Then in the body of the main file:

<div style="float:left; width:150px; height: 400px; border: 3px solid black;padding: 5px;padding-left: 8px;">
<a href="javascript:ajaxpage('foreign.html', 'content');">Foreign page</a>
</div>

<div id="content" style="border: 3px solid black; float:left; width:550px; min-height: 400px; border: 3px solid black; margin-left: 10px;
padding: 5px; padding-bottom: 8px;"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

jscheuer1
06-18-2013, 01:35 AM
If you're trying to get around the same domain origin policy of AJAX, that's one way. If on the other hand you just want a link that will load a same domain page into a page as it's loading:

index.html:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</head>
<body>This is index.html
<div id="content"></div>
<a href="link.htm">Link Page</a>
<script type="text/javascript">
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
if((ajaxpage.page = getQval('page')) && (ajaxpage.div = getQval('div'))){
ajaxpage(ajaxpage.page, ajaxpage.div);
}
</script>
</body>
</html>


A link to it that will load index2.html in its content div:


<a href="index.html?page=index2.html&amp;div=content">Test</a>

Demo (http://home.comcast.net/~jscheuer1/side/demos/ajaxpage/link.htm)

If you want both, combine the two methods.