title: CSS / JS not working on content fetched via AJAX
body: <p>I am making an app in which cards overlap each other like "Tinder" (name just for example). This is working fine when I am fetching data normally using while loop on the same page. However, when I fetch the same data via AJAX from a different page the cards get displayed one after the other from top to bottom instead of over lapping. I don't understand if this is a problem with CSS / JS not loading on AJAX fetched contents or the problem is something else that I cannot detect because rest css styles about card design is working good but then its not overlapping anymore when AJAX is used. I tried placing the CSS and JS pages for card swipe into <code>cards.php</code> as well in a hope that returned file with JS might do the trick even though I felt that its not a good idea (still did it to check if I could catch the error) but still its not working. Tried whatever was possible for me but no luck.</p>
  
  <p>Fine working code when I fetch directly:</p>
  
  <pre><code>&lt;div class="stackedcards-container"&gt;
  &lt;?php
    $users = $pdo-&gt;prepare("SELECT * FROM members WHERE mem_id != :mem AND mem_sex != :sex");
    $users-&gt; bindValue(':mem', $sessionUser);
    $users-&gt; bindValue(':sex', $mySex);
    $users-&gt; execute();
  
    while($a = $users-&gt;fetch()){
  ?&gt;
    &lt;div class="cards"&gt;
      &lt;div class="card-content"&gt;
        &lt;div class="card-image"&gt;&lt;img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card-footer"&gt;
        &lt;div class="popular-destinations-text"&gt;&lt;span class="name"&gt;&lt;?php echo $a['mem_fname']; ?&gt;&lt;/span&gt; &lt;br/&gt; &lt;small&gt;&lt;?php echo $userAge; ?&gt;, &lt;?php echo ucfirst($a['mem_sex']); ?&gt; &amp;middot; &lt;?php echo $distData; ?&gt;&lt;/small&gt; &lt;br/&gt; &lt;small&gt;Siliguri, West Bengal, IN&lt;/small&gt;&lt;/div&gt;
        &lt;div class="popular-destinations-images"&gt;
          &lt;div class="circle"&gt;&lt;img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/&gt;&lt;/div&gt;
          &lt;div class="circle"&gt;&lt;img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/&gt;&lt;/div&gt;
          &lt;div class="circle"&gt;&lt;img src="images/Adventure_and_Outdoor.png" width="100%" height="100%"/&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;?php } ?&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>But this serves the purpose only when the page refreshes. However, I want to make it automatic. Hence, I want to scan this data and if new record exists then it should get loaded. </p>
  
  <p>Here is what I tried</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;div class="stackedcards-container"&gt;
    &lt;div class="getcards"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    setInterval(function(){
      $(".getcards").load("processes/cards.php").fadeIn("slow");
    }, 1000);
  &lt;/script&gt;
  </code></pre>
  
  <p>cards.php</p>
  
  <pre><code>&lt;?php
  $users = $pdo-&gt;prepare("SELECT * FROM members WHERE mem_id != :mem AND mem_sex != :sex");
    $users-&gt; bindValue(':mem', $sessionUser);
    $users-&gt; bindValue(':sex', $mySex);
    $users-&gt; execute();
  
  while($a = $users-&gt;fetch()) {
  ?&gt;
  &lt;div class="cards"&gt;
    &lt;div class="card-content"&gt;
      &lt;div class="card-image"&gt;&lt;img src="https://image.ibb.co/gQsq07/Adventure_and_Outdoor.png" width="100%" height="100%"/&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card-footer"&gt;
      &lt;div class="popular-destinations-text"&gt;&lt;span class="name"&gt;&lt;?php echo $a['mem_fname']; ?&gt;&lt;/span&gt; &lt;br/&gt; &lt;small&gt;&lt;?php echo $userAge; ?&gt;, &lt;?php echo ucfirst($a['mem_sex']); ?&gt; &amp;middot; &lt;?php echo $distData; ?&gt;&lt;/small&gt; &lt;br/&gt; &lt;small&gt;Siliguri, West Bengal, IN&lt;/small&gt;&lt;/div&gt;
      &lt;div class="popular-destinations-images"&gt;
        &lt;div class="circle"&gt;&lt;img src="https://image.ibb.co/jmEYL7/adventure_1.jpg" width="100%" height="100%"/&gt;&lt;/div&gt;
        &lt;div class="circle"&gt;&lt;img src="https://image.ibb.co/nsCynn/adventure_2.jpg" width="100%" height="100%"/&gt;&lt;/div&gt;
        &lt;div class="circle"&gt;&lt;img src="https://image.ibb.co/hmsL07/adventure_3.jpg" width="100%" height="100%"/&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>When I perform this method, the cards get displayed but does not follow the usual overlapping method as in the 1st working code. The cards get displayed one after the other all at once from top to bottom (like usual table records). How can achieve the similar result as I am getting in the working code via AJAX ? </p>
  
  <p>Also, if I have a feeling that since fetching contents from a different page is not working, loading contents from the same page "might" work. If that's possible, please help me load the contents from the same page. We can give it a shot (if possible) to check if its working. I tried it like this below but that didn't seem to work.</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;div class="stackedcards-container"&gt;
    &lt;div class="getcards"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
    setInterval(function(){
      $(".getcards").load("index.php .stackedcards-container").fadeIn("slow");
    }, 1000);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I am adding Screenshots for clear reference.</p>
  
  <p>Screenshot 1: Working fine when NOT using AJAX. See the two cards overlapping each other.</p>
  
  <p><a href="https://i.stack.imgur.com/18vhR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/18vhR.png" alt="enter image description here"></a></p>
  
  <p>Screenshot 2: Overlapping not working when using AJAX. Cards gets displayed top to bottom.</p>
  
  <p><a href="https://i.stack.imgur.com/zvZa7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvZa7.png" alt="enter image description here"></a></p>