PDA

View Full Version : opening a link into a div


sedah
08-03-2009, 09:09 PM
Hi everyone but im fairly new to javascript and need help with this one, im stumped, it doesnt seem to wanna load up on the div i specified.


<script type="text/javascript">


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>

<script type="text/javascript">
ajaxpage('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter') //load "http://www.deathnoteonlinetv.com/php/?id=0", "twocenter" DIV
</script>and this is the link

<a href="javascript:ajaxpage('http://www.deathnoteonlinetv.com/php/?id=1', 'twocenter');">01| Rebirth</a>thank in advance

ranjan
08-03-2009, 11:07 PM
That's a whole lot of code for something that is very easy....

Get the code here - http://code.google.com/p/miniajax/

ajax.update(url, elm) should do what you want, so the code is:



<script>
function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{retur n new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent( e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radi o'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=f unction(){if(x.readyState==4)f(x.responseText)};if (m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GE T')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);re turn x.responseText};
ajax.post=function(url,func,args){ajax.send(url,fu nc,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax. serialize(frm))};
</script>


and then ...


<script>
window.onload = function(){
ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>

sedah
08-04-2009, 12:43 AM
That's a whole lot of code for something that is very easy....

Get the code here - http://code.google.com/p/miniajax/

ajax.update(url, elm) should do what you want, so the code is:



<script>
function $(e){if(typeof e=='string')e=document.getElementById(e);return e};
function collect(a,f){var n=[];for(var i=0;i<a.length;i++){var v=f(a[i]);if(v!=null)n.push(v)}return n};

ajax={};
ajax.x=function(){try{return new ActiveXObject('Msxml2.XMLHTTP')}catch(e){try{retur n new ActiveXObject('Microsoft.XMLHTTP')}catch(e){return new XMLHttpRequest()}}};
ajax.serialize=function(f){var g=function(n){return f.getElementsByTagName(n)};var nv=function(e){if(e.name)return encodeURIComponent(e.name)+'='+encodeURIComponent( e.value);else return ''};var i=collect(g('input'),function(i){if((i.type!='radi o'&&i.type!='checkbox')||i.checked)return nv(i)});var s=collect(g('select'),nv);var t=collect(g('textarea'),nv);return i.concat(s).concat(t).join('&');};
ajax.send=function(u,f,m,a){var x=ajax.x();x.open(m,u,true);x.onreadystatechange=f unction(){if(x.readyState==4)f(x.responseText)};if (m=='POST')x.setRequestHeader('Content-type','application/x-www-form-urlencoded');x.send(a)};
ajax.get=function(url,func){ajax.send(url,func,'GE T')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);re turn x.responseText};
ajax.post=function(url,func,args){ajax.send(url,fu nc,'POST',args)};
ajax.update=function(url,elm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.get(url,f)};
ajax.submit=function(url,elm,frm){var e=$(elm);var f=function(r){e.innerHTML=r};ajax.post(url,f,ajax. serialize(frm))};
</script>
and then ...


<script>
window.onload = function(){
ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>


what would I go about the "link" button

sedah
08-04-2009, 01:25 AM
I currently use dis as my first link

<a href="javascript:ajaxpage('http://www.deathnoteonlinetv.com/php/?id=1', 'twocenter');">01| Rebirth</a>

and dis would load it automatically correct?

<script>
window.onload = function(){
ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>

ranjan
08-05-2009, 12:22 PM
Yes window.onload will auto populate the div when page loads

for onclick you will have to use:


<a href="javascript:;" onclick="ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')">01| Rebirth</a>


But users w/o javascript will never be able to see this happen... so it is better if you let the link stay without javascript


<a href="http://www.deathnoteonlinetv.com/php/?id=0" id="ajaxlink">01| Rebirth</a>


So if a user without javascript click the link they will still go to the page. Note we used an id that we will now use like so...


window.onload = function(){
var el = $('ajaxlink');
var href= el.href;
el.onclick = function () {
ajax.update(href, 'twocenter')
return false;
}
}