masonry not working on ajax response

Question

the masonry not working in my ajax response.i have tried some like this but it is not working for me. my code ajax code is:

<script>
function loadmore(cnt)
    {
        var val = document.getElementById("result_no").value;
        $.ajax({
            type: 'get',
            url: '{{ URL::route('oi_array3') }}',
            data: {
            last:val,cnt
            },
            success: function (response) {
                var content = document.getElementById("uf");
                if (response == '') {
                    $("#load").hide();
                }

              `  response.forEach(function(value){
                    var d = new Date(value.timestamp);
                    var n = d.toDateString();
                    var s = d.toLocaleTimeString();

                    content.innerHTML += '<div class="grid-item oi_data_tile">' + 
                    '<div class="small-12 text-right timestamp columns">' + n + ' ' + s + '</div>' + 
                    '<label class="small-6 columns">Underlying Index</label>' + 
                    '<label class="small-6 text-right nifty_index columns">' +
                    '<strong>' + value.underlying_index + '</strong>' +
                    '</label>' +
                    '<label class="small-6 columns">Diff. in change in OI</label>' +
                    '<label class="small-6 text-right nifty_index columns">' +
                    '<strong>' + value.diff_in_change_in_oi + '</strong></label>' +

                    '<div class="small-12 columns">'+
                        '<table class="small-12 columns">'+
                            '<tr class="header">' +
                                '<td class="small-3">Chng in OI Call</td>' +
                                '<td class="small-3">Strike<br>price</td>' +
                                '<td class="small-3">Chng in OI Put</td>' +
                                '<td class="small-3">Diff in Chng in OI</td>' +
                            '</tr>'+    

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[0].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[0].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[0].change_in_oi_put + '</td>' +
                                '<td class="text-right bullish">' + value.derivatives[0].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[1].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[1].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[1].change_in_oi_put + '</td>' +
                                '<td class="text-right bullish">' + value.derivatives[1].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                            '<tr>' +
                                '<td class="text-right">' + value.derivatives[2].change_in_oi_call + '</td>' +
                                '<td class="text-right">' + value.derivatives[2].strike_price + '</td>' +
                                '<td class="text-right">' + value.derivatives[2].change_in_oi_put + '</td>' +
                                '<td class="text-right bearish">' + value.derivatives[2].diff_in_change_in_oi + '</td>' +

                            '</tr>' +

                        '</table>' +
                    '</div>'+
                    '</div>' 
                    if(document.getElementById("result_no").value == '0')
                        document.getElementById("latestvalue").value = value.timestamp;

                    document.getElementById("result_no").value = value.timestamp;



                });   
            }//response close
        });//ajax close
    }//loadmore close

    $('.grid').masonry({
        columnWidth : 320, 
        gutter: 15,
        percentPosition: false, 
        fitWidth: true,
        isFitWidth: true,
        itemSelector: '.grid-item'
    });

    $('.grid').imagesLoaded(function() {
        $('.grid').masonry('layout');
    }); 

</script>

and Html code is:

<div class="small-12 columns" id="uf1">
    <div class="grid" id="uf">
    <!-- ajax response is added here.-->

    </div>
    <input type="hidden" id="result_no" value="0">
</div>

I want to put ajax response in id, and apply masonry on response.

Answer 1

You need to reinitialize the masonry after the content is added to the DOM. That is the way by which masonry will be able to target the newly added element.

$('.grid').masonry();

Call this after the new content is loaded everytime.