loading javascript in Ajax loaded page

Question

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.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/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.com/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">&nbsp;</div>
          <p align="right"><ul>
              <li><a href="#">news &amp; 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="#">community</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>

Andy E · Accepted Answer · 2011-12-12 10:32:43Z

4

As 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.

answered Dec 12, 2011 at 10:32

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanmay Over a year ago

I got it working. my code was a little different but the basic idea was from you. Thanks a lot. Check the edit the code is placed there. does the same thing actually. Thanks

krutssss Over a year ago

I used this code but its not working for me.Can you give me some hint where we need to put loadcontent() function and where we want to call this function? Thanks in advance.

Niels · Accepted Answer · 2011-12-12 07:32:16Z

2

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

answered Dec 12, 2011 at 7:32

Niels

50.1k4 gold badges68 silver badges86 bronze badges

3 Comments

Marlin Over a year ago

I'm pretty sure that code defined within a 'document ready' jquery function gets fired immediately if the page has already loaded. But even still, I do agree this looks like an issue of the code being fired before there is content to run it on

Niels Over a year ago

Your jQuery prettyphoto is already in your index.html? Why do you include it once more in your Ajax? This might cause some JS errors.

Tanmay Over a year ago

ok, i have removed that. also i wanted to know whether i need to use paths relative to my ajax page or the page in which the ajax page loads?

haynar · Accepted Answer · 2011-12-12 07:34:36Z

1

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.

answered Dec 12, 2011 at 7:34

haynar

6,0517 gold badges37 silver badges53 bronze badges

7 Comments

Tanmay Over a year ago

thanks for the reply. i tried removing the .isready but the problem still persists.

haynar Over a year ago

you need not only to remove ready method, but also call the initialization function of your JS lib every time after retrieving data from AJAX. Add $("a[rel^='prettyPhoto']").prettyPhoto(); to the callback function of AJAX

Tanmay Over a year ago

yes i have done that too. i.e now my ajax page looks like the one in the above reply posted by neils without the script tag. No luck still

haynar Over a year ago

sorry, for mistake, you don't need to remove ready, just add ajax callback

haynar Over a year ago

I need to get familiar with that particular lib to give you a more efficient advice

|

Collectives™ on Stack Overflow

loading javascript in Ajax loaded page

3 Answers 3

2 Comments

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related