i shall state my problem here.. I have an index.html page which has a prettyPhoto.js script in it. i have some menu links on my index.html. say one of these is "video gallery" now i load video gallery through Ajax and it loads fine. but the problem is i cannot get prettyPhoto.js to work in the external loaded file. Does anyone know how to do this?
Index.html looks like this (please note i have removed unnecessary code to make it readable)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>The Footy Lounge</title>
<!-- Scripts -->
<script type="text/javascript" src=".7.1/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" language="javascript">
function loadXMLDoc(url,containerid){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200|| window.location.href.indexOf("http")==-1)
{
document.getElementById(containerid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET',url,true);
xmlhttp.send();
}
</script>
<!-- End Scripts -->
<!--Stylesheets-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/articles.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
<!-- End Stylesheets-->
</head>
<body>
<div id="navigation">
<div class="cl"> </div>
<p align="right"><ul>
<li><a href="#">news & events</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="javascript:loadXMLDoc('ajaxfiles/video_gallery.html','mainPage')">video gallery</a></li>
<li><a href="#">munity</a></li>
<li><a href="#">schedules</a></li>
</ul></p>
</div>
<div id="mainPage">
</div>
<!-- this is required for prettyPhoto to work -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
video_gallery.html looks like this
<!-- tried adding this, didn't work -->
<!-- <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script> -->
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<!-- I tried adding this, it didnt work -->
<!-- <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script> -->
I am obviously doing something wrong here. And i can't find any answers on Google because i don't have a clue as to what to search for. i tried searching for "loading JavaScript in ajax page" and all the possible variants i could think of.
EDIT: Ok i got it working. thanks to the people who answered. here is code.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#video_gallery").click(function(){
$("#mainPage").load('ajaxfiles/video_gallery.html',function (text, statusText){
if (statusText === "success")
{
$("a[rel^='prettyPhoto']").prettyPhoto();
<!-- target.find("a[rel^='prettyPhoto']").prettyPhoto(); --> //this didnt work for me so i used the above one. firebug gave me some error about target.find
}
});
});
});
</script>
i shall state my problem here.. I have an index.html page which has a prettyPhoto.js script in it. i have some menu links on my index.html. say one of these is "video gallery" now i load video gallery through Ajax and it loads fine. but the problem is i cannot get prettyPhoto.js to work in the external loaded file. Does anyone know how to do this?
Index.html looks like this (please note i have removed unnecessary code to make it readable)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/TR/html4/strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>The Footy Lounge</title>
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" language="javascript">
function loadXMLDoc(url,containerid){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200|| window.location.href.indexOf("http")==-1)
{
document.getElementById(containerid).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET',url,true);
xmlhttp.send();
}
</script>
<!-- End Scripts -->
<!--Stylesheets-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/articles.css" type="text/css" media="all" />
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" /><![endif]-->
<!-- End Stylesheets-->
</head>
<body>
<div id="navigation">
<div class="cl"> </div>
<p align="right"><ul>
<li><a href="#">news & events</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="javascript:loadXMLDoc('ajaxfiles/video_gallery.html','mainPage')">video gallery</a></li>
<li><a href="#">munity</a></li>
<li><a href="#">schedules</a></li>
</ul></p>
</div>
<div id="mainPage">
</div>
<!-- this is required for prettyPhoto to work -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
video_gallery.html looks like this
<!-- tried adding this, didn't work -->
<!-- <script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script> -->
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<!-- I tried adding this, it didnt work -->
<!-- <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script> -->
I am obviously doing something wrong here. And i can't find any answers on Google because i don't have a clue as to what to search for. i tried searching for "loading JavaScript in ajax page" and all the possible variants i could think of.
EDIT: Ok i got it working. thanks to the people who answered. here is code.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#video_gallery").click(function(){
$("#mainPage").load('ajaxfiles/video_gallery.html',function (text, statusText){
if (statusText === "success")
{
$("a[rel^='prettyPhoto']").prettyPhoto();
<!-- target.find("a[rel^='prettyPhoto']").prettyPhoto(); --> //this didnt work for me so i used the above one. firebug gave me some error about target.find
}
});
});
});
</script>
3 Answers
Reset to default 4As haynar mentioned, the content is loaded after prettyPhoto has been initialised. To work around this problem, you need to call the prettyPhoto initialisation function after loading the new content.
To make your life a whole lot easier (and your code a whole lot neater), change your loadXMLDoc function to take advantage of jQuery's built-in AJAX utilities, namely load():
function loadContent (url, container) { // remember, you're not loading XML
var target = $(container);
target.load(url, function (text, statusText) {
if (statusText === "success") {
target.find("a[rel^='prettyPhoto']").prettyPhoto();
}
});
}
load automatically inserts the HTML into the container for you, and the callback function in the code runs and initializes prettyPhoto for any new elements that have been added to the document.
Don't forget to change references to loadXMLDoc to loadContent, the latter is a better name since you're not actually loading an XML document.
The document ready has already occured, so it is not possible to call it again, just remove the $(document).ready(), but keep the $("a[rel^='prettyPhoto']").prettyPhoto();
If I am right, your Javascript does get loaded when you add it as a script tag (without menting it out).
So the result wil be:
<script src="../js/jquery.prettyPhoto.js" type="text/javascript"></script>
<div class="article-box">
<a href="images/featured-side-1.jpg?ajax=true" rel="prettyphoto">Image test</a>
</div>
<script type="text/javascript" charset="utf-8">
$("a[rel^='prettyPhoto']").prettyPhoto();
</script>
I can explain you the reason why it doesn't work, but can't help you with coding 'cause I'm not familiar with that JS lib. JS lib run when page loads only ones, so when after it you're creating new objects it can't determine the new once to bind appropriate events and effects to them. You need to run your gallery initialization function one more time after loading new gallery items.