title: Javascript Reload after Jquery call with Php
body: <p>I have a problem I've been trying to solve for the past days. I have a Jquery that updates an HTML and creates new content inside a div tag. The thing is that the javascript does not apply on the generated code. In other words, I could take the exact output that the Php gives me, put it in the html code directly and it works, but if it comes from the php while the page is running it won't work, it doesn't display the images correctly in a slideshow jflow.</p>
  
  <p>Here is the HTML header</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-1.2.6.pack.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="js/application.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.flow.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $("div#controller").jFlow({
                  slides: "#slides",
                  width: "785px",
                  height: "480px"
          });
      });
  
  
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      /* SLIDESHOW AT HOMEPAGE */
      function slideSwitch() {
          var $active = $('#slideshow IMG.active');
  
          if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  
          var $next =  $active.next().length ? $active.next()
              : $('#slideshow IMG:first');
  
          $active.addClass('last-active');
  
          $next.css({opacity: 0.0})
              .addClass('active')
              .animate({opacity: 1.0}, 1000, function() {
                  $active.removeClass('active last-active');
              });
      }
  
      $(function() {
          setInterval( "slideSwitch()", 5000 );
      });
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      /* Function to show/hide the side menu for all images */
      function showDIV(e)
      {
          var notEmpty = true;
          var count = 0; 
          while(document.getElementById('subCat'+count) != null)
          {
              document.getElementById('subCat'+count).style.display = 'none'; 
              count++;
          }
          document.getElementById(e).style.display = 'block';
      }
      /* MENU INTERACTION */
      function showContent(cmd, id)
      {
      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 &amp;&amp; xmlhttp.status==200)
          {
          document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
          document.getElementById("controller").innerHTML=xmlhttp.responseText;
          }
        }
      xmlhttp.open("GET","getMain.php?cmd="+cmd+"&amp;id="+id,true);
      xmlhttp.send();
      }
  
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21909616-1']);
        _gaq.push(['_setDomainName', '.karimtabar.com']);
        _gaq.push(['_trackPageview']);
  
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
  
      &lt;/script&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" /&gt;
      &lt;link rel="stylesheet" type"text/css" href="css/stylesheet.css" /&gt;
      &lt;link rel="shortcut icon" href="logo/icon.jpg"&gt;
      &lt;title&gt;KARIM V TABAR PHOTOGRAPHY&lt;/title&gt;
      &lt;meta name="description" content="Karim V Tabar: photographer, new media, film, design." /&gt;
      &lt;/head&gt;
  
      &lt;body style="width:100%;"&gt;
  
      &lt;div id="wholewrapper" &gt;
      &lt;!-- HEADER // TOP PORTION OF SITE --&gt;
      &lt;div id="logoheader"&gt;
      &lt;h5 class="logo"&gt;
      &lt;a href="#" title="Go Back"&gt;KARIM VICTOR TABAR&lt;/a&gt;
      &lt;/h5&gt;
      &lt;/div&gt;
  
      &lt;div class="wrapper"&gt;
      &lt;div class="navcontainer"&gt;
  
      &lt;?php
      $count = 0;
      foreach (new DirectoryIterator('images/menuImages') as $fileInfo) 
      {
          if($fileInfo-&gt;isDot()) continue;
          echo "&lt;h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo-&gt;getFilename() ."');\"&gt;&lt;a href='#'&gt;".$fileInfo-&gt;getFilename() ."&lt;/a&gt;&lt;/h2&gt;&lt;div class='acc_container' id='container".$count."'&gt;&lt;div class='block' name='subCats' id='subCat".$count."'&gt;&lt;ul&gt;";
          foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2) 
          {
              if($fileInfo2-&gt;isDot() || $fileInfo2 == "thumbnails") continue;
              echo "&lt;li&gt;&lt;a href='#' onclick=\"showContent(2, '".$fileInfo-&gt;getFilename() ."/".$fileInfo2-&gt;getFilename()."');\"&gt;".$fileInfo2-&gt;getFilename() . "&lt;/a&gt;&lt;/li&gt;";
          }
          echo "&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;";$count++;
      }
      ?&gt; 
          &lt;div id="navigationlinks"&gt;
          &lt;ul&gt;
                  &lt;li&gt;&lt;a href="pages/bio.html"&gt;BIO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="pages/contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://blog.karimtabar.com/" target="_blank"&gt;BLOG&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Images Thumbnails Categories --&gt;
      &lt;div id="contentMain"&gt;
  
  
      &lt;div id="slideshow"&gt;
          &lt;img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" /&gt;
          &lt;img src="images/homepage/et1.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/gaga1.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/gaga2.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/rodeo2.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/rodeo5.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/wavy1.jpg" width = "750px" alt="" /&gt;
          &lt;img src="images/homepage/Wenya.jpg" width = "750px" alt="" /&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>And Here is the Php code that generates the new HTML(getMain.php)</p>
  
  <pre><code>    &lt;?php
  
      $cmd=$_GET["cmd"];
      $id = $_GET["id"];
      /* The Thumbnail Display */
      if($cmd == 1)
      {
          echo "&lt;div id='thumbnailcontentplaceholder'&gt;";
          echo "&lt;div id='thumbnailcontent'&gt;";
          echo "&lt;ul&gt;";
  
          $dir = "images/menuImages/".$id."/thumbnails";
      // Open a known directory, and proceed to read its contents
          if (is_dir($dir)) {
              if ($dh = opendir($dir)) {
                  while (($file = readdir($dh)) != false) {
                      if(is_dir($file)) continue;
                   echo "&lt;li&gt;";
                   echo "&lt;a href='#' title='".$file."'&gt;&lt;img src='".$dir."/".$file."' alt='' /&gt;&lt;/a&gt;";
                   echo "&lt;div id='thumnailtitle'&gt;".substr($file, 0, strpos($file, "."))."&lt;/div&gt;";
                   echo "&lt;/li&gt;";
                }
              closedir($dh);
              }
          }
          echo "&lt;/div&gt;&lt;/div&gt;";
      }
  
      if($cmd == 2)
      { 
          $dir = "images/menuImages/".$id;
          $count = 1;
          $nFiles = countFiles($dir);
  
          echo "&lt;div id='imageplaceholder'&gt; \n";
  
          /* No1 No2 No3 ... */
          echo "&lt;div id='controller' class='hidden'&gt;\n";
          for($i =1; $i &lt; $nFiles; $i++)
          {
              echo "&lt;span class='jFlowControl'&gt;No ".$i."&lt;/span&gt;\n";
          }
          echo "&lt;/div&gt;";
  
          echo "&lt;div id='slides'&gt;";
          if (is_dir($dir)) {
              if ($dh = opendir($dir)) {
                  while (($file = readdir($dh)) != false) {
                      if(is_dir($file)) continue;
                      echo "&lt;div&gt;&lt;img src='".$dir."/".$file."'&gt;&lt;/div&gt;\n";
                   }
              closedir($dh);
              }
          }
          echo "&lt;/div&gt;\n";
          echo '&lt;div id="prevNext"&gt; 
          &lt;a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()"&gt;Previous&lt;/a&gt;&amp;nbsp;
          &lt;span class="slide_slash"&gt;/&lt;/span&gt;&amp;nbsp;
          &lt;a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()"&gt;Next image&lt;/a&gt;&amp;nbsp;&lt;/div&gt;';
  
          echo '&lt;div id="credits2"&gt;
          BEIJING BLUE&lt;br&gt;
          Photographed by: Karim V Tabar&lt;br&gt;&lt;/div&gt;&lt;/div&gt;';
  
  
      }
  
      function countFiles($dir)
      {
          $dh  = opendir($dir);
          while (false !== ($filename = readdir($dh))) {
             $files[] = $filename;
          }
  
          if ($files) 
             $num_of_files = count($files) - 2; // we substract 2 because . and .. are included 
          else 
             die('there is an error'); 
  
          return $num_of_files;
      }
  
      ?&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p>Real HTML that used to work was like this</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
  
      //Set default open/close settings
      $('.acc_container').hide(); //Hide/close all containers
      $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){
  
      //On Click
      $('.acc_trigger').click(function(){
          ('#open').click()
      });
  
      });
  
  
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
              $("div#controller").jFlow({
                  slides: "#slides",
                  width: "785px",
                  height: "480px"
          });
      });
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21909616-1']);
        _gaq.push(['_setDomainName', '.karimtabar.com']);
        _gaq.push(['_trackPageview']);
  
        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
  
      &lt;/script&gt;
  
  
  
  
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;link rel="stylesheet" type"text/css" href="../../css/stylesheet.css"&gt;
      &lt;link rel="shortcut icon" href="../../logo/icon.jpg"&gt;
      &lt;title&gt;KARIM V TABAR PHOTOGRAPHY&lt;/title&gt;
      &lt;meta name="description" content="Karim V Tabar: photographer, new media, film, design." /&gt;
      &lt;/head&gt;
      &lt;body style="width:100%;"&gt;
  
      &lt;div id="wholewrapper"&gt;
  
      &lt;!-- HEADER // TOP PORTION OF SITE --&gt;
      &lt;div id="logoheader"&gt;
      &lt;h5 class="logo"&gt;
      &lt;a href="../../index.html" title="Go Back"&gt;KARIM VICTOR TABAR&lt;/a&gt;
      &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="wrapper"&gt;
      &lt;div class="navcontainer"&gt;
  
      &lt;h2 class="acc_trigger"&gt;&lt;a href="../editorial.html"&gt;EDITORIAL&lt;/a&gt;&lt;/h2&gt;
  
          &lt;div class="acc_container"&gt;
              &lt;div class="block"&gt; &lt;ul&gt;                &lt;li&gt;&lt;a href="beijingblue.html"&gt;BEIJING BLUE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gaga.html"&gt;GAGA&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="dtrouble.html"&gt;DOUBLE TROUBLE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="et.html"&gt;EXTRATERRESTRIAL DREAMS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="liferush.html"&gt;LIFE RUSH&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="rodeoglam.html"&gt;RODEO GLAM&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="wanderlust.html"&gt;WANDERLUST&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="runawayangel.html"&gt;RUN AWAY ANGEL&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="russianstandard.html"&gt;RUSSIAN STANDARD&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="hollywoodhills.html"&gt;HOLLYWOOD HILLS&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;  &lt;h2 class="acc_trigger"&gt;&lt;a href="../travel.html"&gt;TRAVEL&lt;/a&gt;&lt;/h2&gt;
          &lt;div class="acc_container"&gt;
            &lt;div class="block"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="../t/hk.html"&gt;HONG KONG&lt;/a&gt;&lt;/li&gt; &lt;/li&gt;
                      &lt;li&gt;&lt;a href="../t/dubai.html"&gt;DUBAI, UAE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../t/kyoto.html"&gt;KYOTO, JAPAN&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../t/miami.html"&gt;MIAMI, USA&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../t/la.html"&gt;L.A., USA&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;h2 class="acc_trigger"&gt;&lt;a href="../art.html"&gt;ART&lt;/a&gt;&lt;/h2&gt;
          &lt;div class="acc_container"&gt;
                  &lt;div class="block"&gt;
                  &lt;ul&gt;      &lt;li&gt;&lt;a href="../a/mirrorangel.html"&gt;MIRROR ANGEL&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../a/rouge.html"&gt;ROUGE&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../a/violet.html"&gt;VIOLET&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../a/noire.html"&gt;NOIRE&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;  &lt;h2 class="acc_trigger"&gt;&lt;a href="../video.html"&gt;VIDEO&lt;/a&gt;&lt;/h2&gt;
          &lt;div class="acc_container"&gt;
              &lt;div class="block"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="../v/zigmat.html"&gt;ZIGMAT - BETWEEN BULLETS VIDEO&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="../v/zigmat-1.html"&gt;ZIGMAT - BEHIND THE SCNES&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
          &lt;h2 class="acc_trigger"&gt;&lt;a href="../exhibitions.html"&gt;EXHIBITIONS&lt;/a&gt;&lt;/h2&gt;
          &lt;div class="acc_container"&gt;
              &lt;div class="block"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="../e/intemporelle.html"&gt;2009 RESIDENT, MONTRÉAL, CANADA&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="../e/hkartwalk.html"&gt;2011 ART WALK, HONG KONG, CHINA&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--     &lt;h2 class="acc_trigger"&gt;&lt;a href="#"&gt;PRESS&lt;/a&gt;&lt;/h2&gt;
          &lt;div class="acc_container"&gt;
              &lt;div class="block"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="press1.html"&gt;NME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="press2.html"&gt;LIVE FAST MAG&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="press3.html"&gt;GURU&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      --&gt;&lt;div id="navigationlinks"&gt;
          &lt;ul&gt;
                  &lt;li&gt;&lt;a href="../bio.html"&gt;BIO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://blog.karimtabar.com/" target="_blank"&gt;BLOG&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
          &lt;/div&gt;  &lt;!--   &lt;div id="buyherelogo"&gt;
          &lt;a href="../../store.html"&gt;&lt;img src="../../store/buyhere.png" width="150" border="0"&gt;&lt;/a&gt;
          &lt;/div&gt;
      --&gt;&lt;/div&gt;
      &lt;!--IMAGE // RIGHT PORTION --&gt;
  
      &lt;div id="imageplaceholder"&gt; 
  
  
      &lt;div id="controller" class="hidden"&gt;
           &lt;span class="jFlowControl"&gt;No 1&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 2&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 3&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 4&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 5&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 6&lt;/span&gt;
           &lt;span class="jFlowControl"&gt;No 7&lt;/span&gt;
  
  
      &lt;/div&gt;
  
      &lt;div id="slides"&gt;  
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"&gt;&lt;/div&gt;  
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"&gt;&lt;/div&gt;    
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"&gt;&lt;/div&gt;    
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"&gt;&lt;/div&gt; 
          &lt;div&gt;&lt;img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"&gt;&lt;/div&gt;        
      &lt;/div&gt;  
  
      &lt;div id="prevNext"&gt; 
          &lt;a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()"&gt;Previous&lt;/a&gt;&amp;nbsp;
          &lt;span class="slide_slash"&gt;/&lt;/span&gt;&amp;nbsp;
          &lt;a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()"&gt;Next image&lt;/a&gt;&amp;nbsp;
  
      &lt;/div&gt;
  
      &lt;div id="credits2"&gt;
          BEIJING BLUE&lt;br&gt;
          Photographed by: Karim V Tabar&lt;br&gt;
  
  
      &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;/div&gt;  
  
  
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>