JavaScript not working on AJAX loaded page

**plw** · 05-19-2010, 05:00 AM

I've got a head index section and I'm using AJAX to load pages into a content area underneath.

However, the scripts I'm using on the pages underneath are not fully working.

I've already tried using the loadobjs syntax and it is still not doing it.

At the moment I'm just trying to get the 'photos.php' page right, and it is using visuallightbox.js, and he home page also uses facebox, which isn't working.

The first time I loaded the page, visuallightbox worked fine but since I navigated away from the page it hasn't worked since.

Here's what I got for the head page:

Code:

<script>
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>

<script type="text/javascript">
ajaxpage('home.php', 'contentarea'); loadobjs('js/widget.js') //load "home.php" into "contentarea" DIV
</script>

<div id="navbar"> <ul>
            	<li><a href="javascript:ajaxpage('home.php', 'contentarea');">HOME</a></li>
                <li><a href="javascript:ajaxpage('news.php', 'contentarea');">NEWS</a></li>
                <li><a href="javascript:ajaxpage('forum.php', 'contentarea');">FORUM</a></li>
                <li><a href="javascript:ajaxpage('bio.php', 'contentarea');">BIO</a></li>
            	<li><a href="javascript:ajaxpage('gigs.php', 'contentarea');">GIGS</a></li>
                <li><a href="javascript:ajaxpage('photos.php', 'contentarea'); loadobjs('engine/css/visuallightbox.css','engine/js/jquery.min.js', 'engine/js/visuallightbox.js')">PHOTOS</a></li>
                <li><a href="javascript:ajaxpage('videos.php', 'contentarea');">VIDEOS</a></li>
                <li><a href="javascript:ajaxpage('press.php', 'contentarea');">PRESS</a></li>
            	<li><a href="javascript:ajaxpage('fanclub.php" target="_blank">FAN CLUB</a></li>
                <li><a href="http://www.samclarkmusic.com/store" target="_blank">SAM'S MERCH</a></li>
                <li><a href="javascript:ajaxpage('lyrics.php" target="_blank">OFFICIAL LYRICS</a></li>
</ul>
</div><

Here's what I got for the 'photos.php' page

Code:

<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    
<link rel="stylesheet" href="../engine/css/vlightbox.css" type="text/css" />
		<style type="text/css">#vlightbox a#vlb{display:none}</style>
		<link rel="stylesheet" href="../engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="../engine/js/jquery.min.js" type="text/javascript"></script>
<script src="../engine/js/visuallightbox.js" type="text/javascript"></script>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div class="contentarea">  <img src="../images/photos.jpg" alt="" width="1000" height="1059" border="0" usemap="#Map">
<map name="Map">
           <area shape="rect" coords="806,442,956,592" href="#">
           <area shape="rect" coords="807,598,951,631" href="#">
           <area shape="rect" coords="808,635,949,664" href="#">
           <area shape="rect" coords="807,669,949,700" href="#">
           <area shape="rect" coords="808,712,954,856" href="#">
           <area shape="rect" coords="806,866,950,893" href="#">
           <area shape="rect" coords="809,898,949,926" href="#">
           <area shape="rect" coords="808,934,947,966" href="#">
           <area shape="rect" coords="776,93,814,133" href="#">
           <area shape="rect" coords="816,92,855,133" href="#">
           <area shape="rect" coords="860,93,899,132" href="#">
           <area shape="rect" coords="901,92,940,133" href="#">
           <area shape="rect" coords="943,93,983,132" href="#">
         </map>
</div>
<div id="vlightbox">
	<a class="vlightbox" href="../data/images/_mg_1139.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_mg_1139.jpg" alt="_mg_1139"/></a>
<a class="vlightbox" href="../data/images/_mg_1716.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_mg_1716.jpg" alt="_mg_1716"/></a>
<a class="vlightbox" href="../data/images/_mg_2400.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_mg_2400.jpg" alt="_mg_2400"/></a>
<a class="vlightbox" href="../data/images/_mg_1527.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_mg_1527.jpg" alt="_MG_1527"/></a>
<a class="vlightbox" href="../data/images/_dsc7489.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_dsc7489.jpg" alt="_DSC7489"/></a>
<a class="vlightbox" href="../data/images/_dsc6428.jpg" title="Send Me A Sign"><img src="../data/thumbnails/_dsc6428.jpg" alt="_DSC6428"/></a>
	</div>
<div id="vlightbox2">
	<a class="vlightbox" href="../data/images/caz_3468.jpg" title="Broken"><img src="../data/thumbnails/caz_3468.jpg" alt="CAZ_3468"/></a>
<a class="vlightbox" href="../data/images/caz_3529.jpg" title="Broken"><img src="../data/thumbnails/caz_3529.jpg" alt="CAZ_3529"/></a>
<a class="vlightbox" href="../data/images/caz_4003.jpg" title="Broken"><img src="../data/thumbnails/caz_4003.jpg" alt="CAZ_4003"/></a>
<a class="vlightbox" href="../data/images/caz_3340.jpg" title="Broken"><img src="../data/thumbnails/caz_3340.jpg" alt="CAZ_3340"/></a>
<a class="vlightbox" href="../data/images/caz_3934.jpg" title="Broken"><img src="../data/thumbnails/caz_3934.jpg" alt="CAZ_3934"/></a>
<a class="vlightbox" href="../data/images/caz_3837.jpg" title="Broken"><img src="../data/thumbnails/caz_3837.jpg" alt="CAZ_3837"/></a>
<a class="vlightbox" href="../data/images/caz_3747.jpg" title="Broken"><img src="../data/thumbnails/caz_3747.jpg" alt="CAZ_3747"/></a>
<a class="vlightbox" href="../data/images/caz_3353.jpg" title="Broken"><img src="../data/thumbnails/caz_3353.jpg" alt="CAZ_3353"/></a>
</div>
<div id="vlightbox3">
	<a class="vlightbox" href="../data/images/l_1afb2360dac84031b82c22af7058ed07.jpg" title="Live Performance"><img src="../data/thumbnails/l_1afb2360dac84031b82c22af7058ed07.jpg" alt="l_1afb2360dac84031b82c22af7058ed07"/></a>
<a class="vlightbox" href="../data/images/l_4dabfea319d148e5821eeec24a23b0a4.jpg" title="Live Performance"><img src="../data/thumbnails/l_4dabfea319d148e5821eeec24a23b0a4.jpg" alt="l_4dabfea319d148e5821eeec24a23b0a4"/></a>
<a class="vlightbox" href="../data/images/l_711a73d6bbc1455e922cbe114e2012ce.jpg" title="Live Performance"><img src="../data/thumbnails/l_711a73d6bbc1455e922cbe114e2012ce.jpg" alt="l_711a73d6bbc1455e922cbe114e2012ce"/></a>
<a class="vlightbox" href="../data/images/l_7988d48fb2a74402821b6e59319f6eb4.jpg" title="Live Performance"><img src="../data/thumbnails/l_7988d48fb2a74402821b6e59319f6eb4.jpg" alt="l_7988d48fb2a74402821b6e59319f6eb4"/></a>
<a class="vlightbox" href="../data/images/l_eb48adff592f476e9702ddb297b188d1.jpg" title="Live Performance"><img src="../data/thumbnails/l_eb48adff592f476e9702ddb297b188d1.jpg" alt="l_eb48adff592f476e9702ddb297b188d1"/></a>
<a class="vlightbox" href="../data/images/caz_1300.jpg" title="Live Performance"><img src="../data/thumbnails/caz_1300.jpg" alt="CAZ_1300"/></a>
<a class="vlightbox" href="../data/images/caz_1331.jpg" title="Live Performance"><img src="../data/thumbnails/caz_1331.jpg" alt="CAZ_1331"/></a>
<a class="vlightbox" href="../data/images/sam_redcross_1.jpg" title="Live Performance"><img src="../data/thumbnails/sam_redcross_1.jpg" alt="sam_redcross_1"/></a>
</div>
  
</body>

Would appreciate it if anyone could help.

**robot bo** · 05-19-2010, 09:12 AM

yeah!guys,maybe this code will help:

Code:

function ajax(url,poststr)
{
	var xmlHttp;
	   if(window.XMLHttpRequest){ 
		  xmlHttp = new XMLHttpRequest();
		  if(xmlHttp.overrideMimeType){ 
			xmlHttp.overrideMimeType("text/xml");
		  }
	   }else if(window.ActiveXObject){  
		   try{
			 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			 try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			 }catch(e){}
		   }
	   }
	   if(!xmlHttp){
		alert("Can't create an XMLHTTP instance'");
	   }
	xmlHttp.open("POST",url,true);
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4)
	{
		if (xmlHttp.status == 200)
		{
			document.getElementById(containerid).innerHTML=xmlHttp.responseText;	
		}
	}
};
	xmlHttp.send(poststr);
}

just used function:

Code:

ajax("photos.php","");

more about ajax: http://blog.shoessm.com/Article.Asp?class=9

**plw** · 05-20-2010, 06:53 AM

Hi mate, thanks for your help!

I tried doing a few things with this code but I couldn't get it to work.

Is the first piece of code you gave me to replace the ajax part on the index page or to add to the photos page?

Could you explain exactly where to place it?

Many thanks!

**robot bo** · 05-20-2010, 12:05 PM

Code:

function ajax(url,poststr,containerid)
{
	var xmlHttp;
	   if(window.XMLHttpRequest){ 
		  xmlHttp = new XMLHttpRequest();
		  if(xmlHttp.overrideMimeType){ 
			xmlHttp.overrideMimeType("text/xml");
		  }
	   }else if(window.ActiveXObject){  
		   try{
			 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		   }catch(e){
			 try{
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			 }catch(e){}
		   }
	   }
	   if(!xmlHttp){
		alert("Can't create an XMLHTTP instance'");
	   }
	xmlHttp.open("POST",url,true);
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
	xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState == 4)
	{
		if (xmlHttp.status == 200)
		{
			document.getElementById(containerid).innerHTML=xmlHttp.responseText;	
		}
	}
};
	xmlHttp.send(poststr);
}


<a href="javascript:ajax('home.php','', 'contentarea');">HOME</a>

<div id="contentarea"></div>

**molendijk** · 05-20-2010, 09:34 PM

innerHTML doesn't execute code. You could try to either (i) bring in the scripts contained in the external page(s) to the main page yourself or (ii) document.write the responseText.
Suppose you want to load external1.html and external2.html in a div of the main page. The you could do the following:

Code:

<head>

<script type="text/javascript">
//defining the request
var pageRequest = false //variable to hold ajax object
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end
@*/
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()

function include(content,id){
var newdiv = document.createElement("div");
newdiv.innerHTML = content;
remove(id); document.getElementById(id).appendChild(newdiv);
}

function remove(id)
{
while(document.getElementById(id).firstChild)
{document.getElementById(id).removeChild(document.getElementById(id).firstChild);}
}

if (pageRequest){

// add as many requests as you want; the variables holding them must be document.written in order to bring in external CODE
pageRequest.open('GET', 'external1.html', false)
pageRequest.send(null); ajax_include1=pageRequest.responseText;

pageRequest.open('GET', 'external2.html', false)
pageRequest.send(null); ajax_include2=pageRequest.responseText;

//needed for bringing in the external CODE
document.write('<div style="display:none">');
document.write(ajax_include1+ajax_include2);
document.write('<\/div>');
}

</script>

</head>


<body >
<a href="javascript:void(0)" onclick='include(ajax_include1,"div1");'>add external1.html</a><br>
<a href="javascript:void(0)" onclick='include(ajax_include2,"div2");'>add external2.html</a><br><br>
<a href="javascript:void(0)" onclick='remove("div1")'>remove external1.html</a><br>
<a href="javascript:void(0)" onclick='remove("div2")'>remove external2.html</a><br>
<div id="div1" ></div>
<div id="div2" ></div>
</body>

This will also work for php-files.
If external1.html and/or external2.html contain(s) internal code, make it external (IE requires it).
===
Arie Molendijk

**plw** · 05-24-2010, 04:58 AM

Originally Posted by molendijk

innerHTML doesn't execute code. You could try to either (i) bring in the scripts contained in the external page(s) to the main page yourself or (ii) document.write the responseText.
Suppose you want to load external1.html and external2.html in a div of the main page. The you could do the following:

Code:

<head>

<script type="text/javascript">
//defining the request
var pageRequest = false //variable to hold ajax object
/*@cc_on
@if (@_jscript_version >= 5)
try {
pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try {
pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e2){
pageRequest = false
}
}
@end
@*/
if (!pageRequest && typeof XMLHttpRequest != 'undefined')
pageRequest = new XMLHttpRequest()

function include(content,id){
var newdiv = document.createElement("div");
newdiv.innerHTML = content;
remove(id); document.getElementById(id).appendChild(newdiv);
}

function remove(id)
{
while(document.getElementById(id).firstChild)
{document.getElementById(id).removeChild(document.getElementById(id).firstChild);}
}

if (pageRequest){

// add as many requests as you want; the variables holding them must be document.written in order to bring in external CODE
pageRequest.open('GET', 'external1.html', false)
pageRequest.send(null); ajax_include1=pageRequest.responseText;

pageRequest.open('GET', 'external2.html', false)
pageRequest.send(null); ajax_include2=pageRequest.responseText;

//needed for bringing in the external CODE
document.write('<div style="display:none">');
document.write(ajax_include1+ajax_include2);
document.write('<\/div>');
}

</script>

</head>


<body >
<a href="javascript:void(0)" onclick='include(ajax_include1,"div1");'>add external1.html</a><br>
<a href="javascript:void(0)" onclick='include(ajax_include2,"div2");'>add external2.html</a><br><br>
<a href="javascript:void(0)" onclick='remove("div1")'>remove external1.html</a><br>
<a href="javascript:void(0)" onclick='remove("div2")'>remove external2.html</a><br>
<div id="div1" ></div>
<div id="div2" ></div>
</body>

This will also work for php-files.
If external1.html and/or external2.html contain(s) internal code, make it external (IE requires it).
===
Arie Molendijk

Hi Arie,

Thanks for your help.

I'm not exactly sure if you understood what I meant.
I have a head section with page links, which is fixed, and a 'contentarea' div underneath.

Everything is loading fine except for the JavaScripts and CSS that should load with the pages in the 'contentarea'. Both the Javascript and CSS are external.

Is this code you posted gonna help for that?

Many thanks.

**molendijk** · 05-24-2010, 10:22 AM

Yes, it should fix the problem. Just adapt the if (pageRequest) section by bringing in your own external files and replace onclick='include(ajax_include1,"div1");' etc. with onclick='include(ajax_include1,"contentarea");' etc.
===
Arie.

**plw** · 07-01-2010, 07:23 AM

Originally Posted by molendijk

Yes, it should fix the problem. Just adapt the if (pageRequest) section by bringing in your own external files and replace onclick='include(ajax_include1,"div1");' etc. with onclick='include(ajax_include1,"contentarea");' etc.
===
Arie.

Hi Arie,

I did what you suggested.

Basically what happens now is that i got two links: add external1.html and remove external1.html. When I click on the link add external1.html (which in my case is photos.php) it loads the page, but the scripts still don't work (clicking on thumbnails simply opens a new page with the picture as opposed to a popup slideshow).

When I click remove external1.html it just removes the div...

But when I hit return in the browser it goes back to the home page, with external1.html (photos.php) in the back of it, and the scripts work...

Is that what was supposed to happen?

I just want to be able to click on the PHOTOS link, go to a gallery page where I got thumbnails and when clicking on the thumbnails it should load the photos with a slideshow effect.

Thanks for your help!

**molendijk** · 07-01-2010, 10:07 AM

Can you show me the online pages where the problem occurs?
===
Arie

**plw** · 07-02-2010, 01:27 AM

the homepage is:

http://www.samclarkmusic.com/testing/dan_ajax/index.php

So as you can see I got the PHOTOS link two times. Top one leads to the photos page, bottom one removes the div.

Both the home.php and photos.php pages load scripts correctly on their own, but not when they're loaded into the div.

http://www.samclarkmusic.com/testing/dan_ajax/home.php

http://www.samclarkmusic.com/testing...jax/photos.php

Thanks for your help.

Thread: JavaScript not working on AJAX loaded page

Thread Tools

Search Thread

JavaScript not working on AJAX loaded page

Bookmarks

Bookmarks

Posting Permissions