Javascript 无法使用同位素填充数据_Javascript_Jquery

Javascript 无法使用同位素填充数据

javascript jquery

Javascript 无法使用同位素填充数据,javascript,jquery,Javascript,Jquery,我试图通过ajax调用向使用同位素插件虽然函数调用成功，但我无法将数据添加到此列表。你能告诉我哪里出了问题吗 HTML: JS文件： function initIsotope() { $.ajax({ type: "POST", url: "About.aspx/getMedia1", data: "{}", contentType: "application/json; charset=utf-8",

我试图通过ajax调用向使用同位素插件

虽然函数调用成功，但我无法将数据添加到此列表。你能告诉我哪里出了问题吗

HTML:

JS文件：

function initIsotope() {
    $.ajax({
        type: "POST",
        url: "About.aspx/getMedia1",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // Do something interesting here.
            $.each(data.d, function (i, m) {
                //alert("Data " + i + "|" + item.StringName);
                $newItem =      $('<li class="' + m.ClassName + '"></li>').html('<a href="' + m.url + '"> <img  src="' + m.LogoPath + '" class="img-responsive" />'
  + '<h4 class="' + m.H4Class + '">' + m.MediaName + '</h4> <p class = "' + m.descriptionClass + '">' + m.Description + '<p><div class = "' + m.indicatorClass + '">' + 1 + '" </div></a></li>').appendTo('#container');

                $('.media-list').isotope('insert', $newItem);
            });
        }
    })
}

$(window).load(function(){
    $(function(){
        initIsotope();
        var $container = $('.media-list');
        filters = {};

        $container.isotope({
            itemSelector : 'li',
            getSortData : {
                title : function ( $elem ) {
                    return $elem.find('h4').text();
                },
                relevance : function ( $elem ) {
                    return $elem.find('.indicator').text();
                }
            }
        });

        $('.filter-set button').click(function(){
            var $this = $(this);
            if ( $this.hasClass('active') ) {
                return;
            }

            var $optionSet = $this.parents('.filter-set');
            optionSet.find('.active').removeClass('active');

            $this.addClass('active');

            if($optionSet.data('filter-group') == 'sort-by'){
                var sortBy = $this.data('sort-value');
                $container.isotope({ sortBy : sortBy });
            } else {
                var group = $optionSet.data('filter-group');
                filters[ group ] = $this.data('filter-value');

                var isoFilters = [];
                for ( var prop in filters ) {
                    isoFilters.push( filters[ prop ] )
                }

                var selector = isoFilters.join('');

                $container.isotope({ filter: selector });

                detectEmpty();
            }
            return false;
        });

        // $select = $('select.filter-set');
        // $select.change(function() {
        //     var $this = $(this);
        //     var $optionSet = $this;
        //     var group = $optionSet.data('filter-group');
        //     var isoFilters = [];
        //     filters[group] = $this.find('option:selected').each(function(){
        //       isoFilters.push( $(this).data('filter-value') );
        //     });
        //     var selector = isoFilters.join(', ');
        //     $container.isotope({
        //         filter: selector
        //     });
        //     detectEmpty();
        //     return false;
        // });

        function detectEmpty(){
            if ( !$container.data('isotope').$filteredAtoms.length ) {
                $container.addClass('no-results');
            } else {
                $container.removeClass('no-results');
            }

            if ( $('.media-list-selected li').length == 0 ) {
                $('.media-list-selected').addClass('no-results');
            } else {
                $('.media-list-selected').removeClass('no-results');
            }
        }

        $container.on('click', 'li', function(e){
            var closeButtonHtml = '<button type="button" class="close" aria-hidden="true">&times;</button>',
            mediaItem = $(this).removeAttr('style').prepend(closeButtonHtml).clone().wrap('<div>').parent().html();
            $container.isotope('remove', $(this));
            $('.media-list-selected').append(mediaItem);
            e.preventDefault();
            updateSelectedMedia();
            detectEmpty();
        });

        function updateSelectedMedia(){
            $('.media-list-selected li .close').unbind().on('click', function(e){
                var newEls = $(this).parent();
                $(this).remove();
                newEls.clone().wrap('<div>').parent().html();
                $container.isotope('insert', $(newEls));
                $(this).parent().remove();
                e.preventDefault();
                detectEmpty();
            });
        }
    });
});

函数init（）{
$.ajax({
类型：“POST”，
url:“About.aspx/getMedia1”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（数据）{
//在这里做些有趣的事。
$.each（data.d，function（i，m）{
//警报（“数据”+i+“|”+项.StringName）；
$newItem=$（“）.html（“”）.appendTo（“#container”）；
$（'.media list'）。同位素（'insert'，$newItem）；
});
}
})
}
$（窗口）。加载（函数（）{
$（函数（）{
初始同位素（）；
var$container=$（'.media list'）；
过滤器={}；
$container.com({
itemSelector:'李'，
getSortData：{
标题：功能（$elem）{
返回$elem.find（'h4'）.text（）；
},
相关性：功能（$elem）{
返回$elem.find（'.indicator'）.text（）；
}
}
});
$（'.filter set button'）。单击（函数（）{
var$this=$（this）；
if（$this.hasClass（'active'））{
返回；
}
var$optionSet=$this.parents（'.filter set'）；
optionSet.find（'.active'）.removeClass（'active'）；
$this.addClass（'active'）；
if（$optionSet.data（'filter-group'）=='sort by'）{
var sortBy=$this.data（'sort-value'）；
$container.同位素（{sortBy:sortBy}）；
}否则{
变量组=$optionSet.data（'filter-group'）；
filters[group]=$this.data（'filter-value'）；
var isoFilters=[]；
用于（过滤器中的var prop）{
Isofilter.push（过滤器[prop]）
}
var选择器=isoFilters.join（“”）；
$container.同位素（{filter:selector}）；
检测诱惑（）；
}
返回false；
});
//$select=$（'select.filter set'）；
//$select.change（函数（）{
//var$this=$（this）；
//var$optionstart=$this；
//变量组=$optionSet.data（'filter-group'）；
//var isoFilters=[]；
//筛选器[组]=$this.find（'option:selected'）。每个（函数（）{
//推送（$（this）.data（'filter-value'）；
//     });
//变量选择器=isoFilters.join（'，'）；
//$container.com({
//过滤器：选择器
//     });
//检测诱惑（）；
//返回false；
// });
函数detectetty（）{
if（！$container.data（'同位素'）.$filteredAtoms.length）{
$container.addClass（'no-results'）；
}否则{
$container.removeClass（'no-results'）；
}
如果（$（'.media list selected li'）。长度==0）{
$（'.media list selected'）.addClass（'no-results'）；
}否则{
$（'.media list selected'）.removeClass（'no-results'）；
}
}
$container.on（'click'，'li'，函数（e）{
var closeButtonHtml='×；'，
mediaItem=$（this.removeAttr（'style'）.prepend（closeButtonHtml）.clone（）.wrap（“”）.parent（）.html（）；
$container.同位素（'remove'，$（this））；
$（'.media list selected'）。追加（mediaItem）；
e、 预防默认值（）；
updateSelectedMedia（）；
检测诱惑（）；
});
函数updateSelectedMedia（）{
$（'.media list selected li.close'）.unbind（）.on（'click'，函数（e）{
var newEls=$（this.parent（）；
$（this.remove（）；
newEls.clone（）.wrap（“”）.parent（）.html（）；
$container.同位素（'insert'，$（newEls））；
$（this.parent（）.remove（）；
e、 预防默认值（）；
检测诱惑（）；
});
}
});
});

终于想出了：必须将异步调用更改为同步调用，然后才能正常工作

function initIsotope() {
    $.ajax({
        type: "POST",
        url: "About.aspx/getMedia1",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            // Do something interesting here.
            $.each(data.d, function (i, m) {
                //alert("Data " + i + "|" + item.StringName);
                $newItem =      $('<li class="' + m.ClassName + '"></li>').html('<a href="' + m.url + '"> <img  src="' + m.LogoPath + '" class="img-responsive" />'
  + '<h4 class="' + m.H4Class + '">' + m.MediaName + '</h4> <p class = "' + m.descriptionClass + '">' + m.Description + '<p><div class = "' + m.indicatorClass + '">' + 1 + '" </div></a></li>').appendTo('#container');

                $('.media-list').isotope('insert', $newItem);
            });
        }
    })
}

$(window).load(function(){
    $(function(){
        initIsotope();
        var $container = $('.media-list');
        filters = {};

        $container.isotope({
            itemSelector : 'li',
            getSortData : {
                title : function ( $elem ) {
                    return $elem.find('h4').text();
                },
                relevance : function ( $elem ) {
                    return $elem.find('.indicator').text();
                }
            }
        });

        $('.filter-set button').click(function(){
            var $this = $(this);
            if ( $this.hasClass('active') ) {
                return;
            }

            var $optionSet = $this.parents('.filter-set');
            optionSet.find('.active').removeClass('active');

            $this.addClass('active');

            if($optionSet.data('filter-group') == 'sort-by'){
                var sortBy = $this.data('sort-value');
                $container.isotope({ sortBy : sortBy });
            } else {
                var group = $optionSet.data('filter-group');
                filters[ group ] = $this.data('filter-value');

                var isoFilters = [];
                for ( var prop in filters ) {
                    isoFilters.push( filters[ prop ] )
                }

                var selector = isoFilters.join('');

                $container.isotope({ filter: selector });

                detectEmpty();
            }
            return false;
        });

        // $select = $('select.filter-set');
        // $select.change(function() {
        //     var $this = $(this);
        //     var $optionSet = $this;
        //     var group = $optionSet.data('filter-group');
        //     var isoFilters = [];
        //     filters[group] = $this.find('option:selected').each(function(){
        //       isoFilters.push( $(this).data('filter-value') );
        //     });
        //     var selector = isoFilters.join(', ');
        //     $container.isotope({
        //         filter: selector
        //     });
        //     detectEmpty();
        //     return false;
        // });

        function detectEmpty(){
            if ( !$container.data('isotope').$filteredAtoms.length ) {
                $container.addClass('no-results');
            } else {
                $container.removeClass('no-results');
            }

            if ( $('.media-list-selected li').length == 0 ) {
                $('.media-list-selected').addClass('no-results');
            } else {
                $('.media-list-selected').removeClass('no-results');
            }
        }

        $container.on('click', 'li', function(e){
            var closeButtonHtml = '<button type="button" class="close" aria-hidden="true">&times;</button>',
            mediaItem = $(this).removeAttr('style').prepend(closeButtonHtml).clone().wrap('<div>').parent().html();
            $container.isotope('remove', $(this));
            $('.media-list-selected').append(mediaItem);
            e.preventDefault();
            updateSelectedMedia();
            detectEmpty();
        });

        function updateSelectedMedia(){
            $('.media-list-selected li .close').unbind().on('click', function(e){
                var newEls = $(this).parent();
                $(this).remove();
                newEls.clone().wrap('<div>').parent().html();
                $container.isotope('insert', $(newEls));
                $(this).parent().remove();
                e.preventDefault();
                detectEmpty();
            });
        }
    });
});