Masonry - Div правильно складывается только один раз при каждой загрузке страницы

У меня проблема с сайтом, который использует библиотеку Masonry для создания сложенных div. Когда я обновляю страницу и нажимаю на одну вкладку на странице, я получаю правильное расположение. Однако после нажатия на другую вкладку без обновления страницы я извлекаю данные и заполняю документ различными элементами div.

Только когда я нажимаю на вкладку после немедленной загрузки, я вижу, что стек выполнен правильно. Когда я нажимаю на другую вкладку после нажатия на одну или несколько вкладок, я вижу неправильное размещение.

Я вынужден обновить страницу, а затем один раз нажать вкладку, чтобы получить правильный результат.

Что я делаю не так и как исправить такое поведение?

HTML

<div id="tabDiv">
    <ul class="tabbed">
    <li id="tab1"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(1)" style="width:100%">Designers</a></div></li>
    <li id="tab2"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(2)" style="width:100%">Viz Artists</a></div></li>
    <li id="tab3"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(3)" style="width:100%">Production Artists</a></div></li>
    <li id="tab4"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(4)" style="width:100%">2D Artists</a></div></li>
    <li id="tab5"><div style="position:relative"><a class="tab" onclick="FetchGroupJobs(5)" style="width:100%">Help Desk</a></div></li>
    </ul>
</div>
<br />

<div id="gridDiv">

</div>

JS

 function FetchGroupJobs(WorkGroupID) {
     $.ajax({
                url: url,
                data:data,
                success : function (json) {  //First get users
                    for (var key in json) { //Then loop through users to get jobs
                        addGridToDiv(key);
                        $("#grid" + key).kendoGrid({
                            dataSource: {
                                transport: {
                                    read: {
                                        url: '/api/workgroupreport/' + WorkGroupID + '/' + json[key].ArtistID,
                                        dataType: "json",
                                        async: false
                                    }
                                }
                            },
                            dataBound: function()
                            {
                                var header = $("#grid" + key + " tr")[0];
                                $(header).append("<th class='count'>" + this.dataSource.total() + "</th>");
                            },
                            columns: [
                                {
                                    field: "JobDescription",
                                    title: json[key].ArtistName
                                }
                            ]
                        });
                    }
                },
                dataType: "json",
                async: false
            });
    }
            $(document).ready(function () {

                $('#gridDiv').masonry({
                    itemSelector: '.k-grid',
                    columnWidth: 210,
                    gutter: 10
                });


            });`

jquery masonry
person Vahe Jabagchourian    schedule 12.08.2014    source источник
comment
$('#gridDiv').masonry('destroy' ) помог мне!!   -  person Vahe Jabagchourian    schedule 12.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я использовал следующий код для решения проблемы. Основным дополнением был вызов $('#gridDiv').masonry('destroy') в функции.

  function FetchGroupJobs(WorkGroupID) {

    $('#gridDiv').masonry('destroy');

    $.ajax({
        url: url,
        data: data,
        success: function (json) {  //First get users
            for (var key in json) { //Then loop through users to get jobs
                addGridToDiv(key);
                $("#grid" + key).kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: '/api/workgroupreport/' + WorkGroupID + '/' + json[key].ArtistID,
                                dataType: "json",
                                async: false
                            }
                        }
                    },
                    dataBound: function () {
                        var header = $("#grid" + key + " tr")[0];
                        $(header).append("<th class='count'>" + this.dataSource.total() + "</th>");
                    },
                    columns: [
                        {
                            field: "JobDescription",
                            title: json[key].ArtistName
                        }
                    ]
                });
            }

            $('#gridDiv').masonry({
                itemSelector: '.k-grid',
                columnWidth: 210,
                gutter: 10
            });
        },
        dataType: "json",
        async: false
    });

}
person Vahe Jabagchourian    schedule 12.08.2014