Masony无法处理ajax响应

masonry not working on ajax response

本文关键字:ajax 响应 处理 Masony      更新时间:2023-09-26

我的ajax响应中的砖石不起作用。我尝试过一些类似的方法,但对我来说不起作用。我的代码ajax代码是:

<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>

Html代码为:

<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>

我想把ajax响应放在id中,并在响应上应用砖石结构。

将内容添加到DOM后,需要重新初始化砖石结构。这就是砖石能够针对新添加的元素的方式。

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

每次加载新内容后调用此命令。