Javascript doesn't apply on ajax output

Question

I want to make a website, with articles that fit together like puzzle(post grid). I used the source code of this codepen: https://codepen.io/maximelafarie/full/bVXMBR/

When I put it this codepen in index.php, all work good.

BUT, I use AJAX in index.php, to take articles from fetch.php.

This is how index.php get the articles from fetch.php:

        <script type="text/javascript">


            $(document).ready(function(){
                document.getElementById("result_no").value = 0;
                //var val = document.getElementById("result_no").value;
                    var val =0;

                $.ajax({
                  type: 'post',
                  url: 'fetch.php',
                  data: {
                    getresult: val
                  },
                  context: this,
                  success: function(response) {
                    var content = document.getElementById("result_para");
                    content.innerHTML = content.innerHTML + response;

                    document.getElementById("result_no").value = Number(val) + 15;
                  }
                });
            });

                </script>


                <div id="content">
                    <div id="result_para" class="site__wrapper">

                    </div>
                </div>

Plus in the end of the index.php, there is a those JS libraries/functions:

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js'></script>
 <script  src="gridViewer/index.js"></script>

This is index.js:

(function() {
  var $grid = $('.grid').imagesLoaded(function() {
    $('.site__wrapper').masonry({
      itemSelector: '.grid'
    });
  });
})();

From doing a research, I notices that the problem, probably lays on the JS of index.php, that doesn't apply on articles from fetch.php. I think there need to be a method that wait to the images of fetch.php to load, and then apply the JS on them.

---

This is the articles that came from index.php(when getting articles from fetch.php):

<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">               
      <div class="grid">
        <div class="card">
          <div class="card__image">
                <article class="card-60">           
                </article>
            </div>
        </div>
    </div>

  <div class="grid">
    <div class="card">
      <div class="card__image">
            <article class="card-60">
                <div class="flex-content">
                    <div style="padding-bottom:2em;"></div>
                </div>
            </article>
        </div>
    </div>
  </div>            
</div>

And when I only get the articles from index.php(don't get them from fetch.php), the articles I get are(This is how I want it to be, also with fetch.php):

<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">               
      <div class="grid" style="position: absolute; left: 0px; top: 24px;">
        <div class="card">
          <div class="card__image">
                <article class="card-60">           
                </article>
            </div>
        </div>
    </div>

  <div class="grid" style="position: absolute; left: 304px; top: 24px;">
    <div class="card">
      <div class="card__image">
            <article class="card-60">
                <div class="flex-content">
                    <div style="padding-bottom:2em;"></div>
                </div>
            </article>
        </div>
    </div>
  </div>            
</div>

For some reason when I get the articles from fetch.php, the class grid don't have position:absolute, with left and top value.

Thanks for help.

Answer 1

Your function in index.js is fired on startup, while your fectched articles are not arrived yet (asynchronous). You can try to apply your function to your result div at the moment they arrive, something like this:

            $.ajax({
              type: 'post',
              url: 'fetch.php',
              data: {
                getresult: val
              },
              context: this,
              success: function(response) {
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML + response;

                //Edit from comments, try to remove the imagesLoaded part:
                //$('#result_para .grid').imagesLoaded(function() {
                    $('.site__wrapper').masonry({
                        itemSelector: '.grid'
                    });
                //});

                document.getElementById("result_no").value = Number(val) + 15;
              }
            });

(NOTE: you can remove the original function that fires on startup if you have no images to process in your page before you get the articles with fetch, or else you can just leave it)