title: JavaScript Isotope classes not loaded after AJAX
body: <p>I am pulling the 50 most recent records from a mySQL database. Each goes into a DIV which has Isotope and works perfectly - DIVs animate, reset, etc.</p>
  
  <p>Using AJAX to call for the next 50 records using OFFSET, however, the new records load into new DIVs but Isotope's classes are not applied to them (as seen via Web Inspector.)</p>
  
  <p>THE SET UP:</p>
  
  <p><strong>index.php</strong> = calls the database when loaded in the browser, Isotope works fine. A link on index.php (a#update_newImages) triggers a listener to load "load-ajax.php".</p>
  
  <p><strong>load-ajax.php</strong> = an external page which only has the SQL SELECT and PDO loop. These records load but w/o Isotope applied, thus the problem.</p>
  
  <p><strong>code from index.php</strong></p>
  
  <pre><code> ...database connection info and query code go here
  
   $filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved
  
   //ISOTOPE SETTINGS, in &lt;HEAD&gt;
   var $container = $('#theContent');
   $container.isotope({
   layoutMode : 'fitRows', //leave blank for default masonry
   filter: '*',
   animationOptions: {
   duration: 750,
   easing: 'linear',
   queue: false,
   }
   });
  
  
  in BODY:
  
  &lt;div id="theContent"&gt;
  &lt;?php  
  for($i=0; $links = $query_links-&gt;fetch(); $i++){
  
  echo "&lt;div class=\"".$filter." box\"&gt;&lt;a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\"&gt;" . $links['ATtitle']."&lt;/a&gt;&lt;br&gt;" .  "#" . $links['LID']."-
  &lt;a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\"&gt;". $links['descr']."&lt;/a&gt;&lt;/div&gt;";
  }
  ?&gt;
  &lt;/div&gt;&lt;!-- theContent --&gt;
  
  
  &lt;script&gt; // RIGHT BEFORE BODY TAG CLOSES
  var offset_newImages = 0; // initial offset value
  var newImages = document.getElementById('update_newImages'); // a link on the page
  newImages.addEventListener('click', function() {
    event.preventDefault();
       offset_newImages += 50; // increments batches of records
       $.get('load-ajax.php?loadDataType=newImages&amp;offset='+offset_newImages, function(data) {
        $("#theContent").hide().html(data).fadeIn(600);
  
  //**EDIT**
       alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?
  
      }, false);
     });
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>code from load-ajax.php</strong></p>
  
  <pre><code>...database connection info goes here
  
  $offset = $_GET["offset"]; // from URL
  $filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved
  
  for($i=0; $links = $query_links-&gt;fetch(); $i++){
      $showList = "&lt;div class=\"".$filter." box\"&gt;&lt;a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\"&gt;" . $links['ATtitle']."&lt;/a&gt;&lt;br&gt;" .  "#" . $links['LID']."-
  &lt;a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\"&gt;". $links['descr']."&lt;/a&gt;&lt;/div&gt;";
  echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
  }
  </code></pre>
  
  <p>I am thinking there is a call back solution but am unsure what to do next.</p>
  
  <p>NOTE: I have experimented with the Isotope + infinite scroll by Paul Irish, but cannot use it here until I can convert infinite scroll's paging mechanism to JSON from mySQL. Next project.</p>
  
  <hr>
  
  <p>EDIT: I have revised <strong>index.php</strong> to read as follows. The problem persists, but I think it's almost there. The ajax is working, but when Isotope kicks in it does not add its classes on the new DIVs.</p>
  
  <p><strong><code>&lt;head&gt;</code></strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  //ISOTOPE SETTINGS
  var $container = $('#container');
  $container.isotope({
         layoutMode : 'fitRows', //leave blank for default masonry
         filter: '*',
         animationOptions: {
          duration: 750,
          easing: 'linear',
          queue: false,
      }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>goes right before <code>&lt;/body&gt;</code></strong>:</p>
  
  <pre><code>&lt;script&gt;
  var offset_newImages = 0; // initial offset value
  var newImages = document.getElementById('update_newImages'); // a link on the page
  newImages.addEventListener('click', function() {
   offset_newImages += 50;
   $.ajax({
      type: 'GET',
      url: "load-ajax.php?offset="+offset_newImages,
      success:function(data){
            //    alert(data); // works
            $("#container").hide().html(data).fadeIn(600) // fades in the new recordset
            $container.isotope('insert', data); 
        }
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>So to wrap up, the new data loads into the DIVs - I can see it until I resize the browser window in any way, which is where Isotope kicks in and hides the new DIVs with its CSS.</p>