logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-03-2009, 09:09 PM   #1
sedah
sedah's Avatar
 
Join Date: Jul 2009
Posts: 33
Default opening a link into a div

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.


Quote:
<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).appe ndChild(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

Quote:
<a href="javascript:ajaxpage('http://www.deathnoteonlinetv.com/php/?id=1', 'twocenter');">01| Rebirth</a>
thank in advance
sedah is offline   Reply With Quote
Old 08-03-2009, 11:07 PM   #2
ranjan
 
Join Date: Dec 2004
Posts: 405
Default Simple solution

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:

Code:
<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{return 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!='radio'&&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=function(){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,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'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 ...

Code:
<script>
window.onload = function(){
   ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>
ranjan is offline   Reply With Quote
Old 08-04-2009, 12:43 AM   #3
sedah
sedah's Avatar
 
Join Date: Jul 2009
Posts: 33
Default

Quote:
Originally Posted by ranjan View Post
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:

Code:
<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{return 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!='radio'&&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=function(){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,'GET')};
ajax.gets=function(url){var x=ajax.x();x.open('GET',url,false);x.send(null);return x.responseText};
ajax.post=function(url,func,args){ajax.send(url,func,'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 ...

Code:
<script>
window.onload = function(){
   ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>
what would I go about the "link" button
sedah is offline   Reply With Quote
Old 08-04-2009, 01:25 AM   #4
sedah
sedah's Avatar
 
Join Date: Jul 2009
Posts: 33
Default

I currently use dis as my first link

Quote:
<a href="javascript:ajaxpage('http://www.deathnoteonlinetv.com/php/?id=1', 'twocenter');">01| Rebirth</a>
and dis would load it automatically correct?

Quote:
<script>
window.onload = function(){
ajax.update('http://www.deathnoteonlinetv.com/php/?id=0', 'twocenter')
}
</script>
sedah is offline   Reply With Quote
Old 08-05-2009, 12:22 PM   #5
ranjan
 
Join Date: Dec 2004
Posts: 405
Default

Yes window.onload will auto populate the div when page loads

for onclick you will have to use:

Code:
<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

Code:
<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...

Code:
window.onload = function(){
var el = $('ajaxlink');
var href= el.href;
el.onclick = function () {
ajax.update(href, 'twocenter')
return false;
}
}
ranjan is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:34 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com