2013-07-20 157 views
2

我想有一個可以動態更新的過濾器:同位素數據過濾不過濾

我用同位素的JavaScript在外部腳本文件:

var $container = $('.isotope'); 
    // initialize isotope 
    $container.isotope({ 
     // options... 
    }); 

    // filter items when filter link is clicked 
    $('.filter a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     $('.filter a.active').removeClass('active'); 
     $(this).addClass('active'); 
     return false; 
    }); 

我的過濾器鏈接:

<ul class="filter clearfix" id="filterContainer"> 
    <li><a href="#" class="active" data-filter="*">All</a></li> 
</ul> 

第一個環節「全部」的作品,但是當我試圖使用AJAX來添加更多的鏈接到它的問題就來了:

function getFilterHtml() { 
     $.ajax({ 
      type: "POST", 
      url: "Default.aspx/getFilterHtml", 
      data: "{}", 
      contentType: "application/json", 
      dataType: "json", 
      success: function (msg) { 
       // Replace the div's content with the page method's return. 
       //$("#filterContainer").html(msg.d); 
       var $newItems = $(msg.d); 
       $('#filterContainer').append($newItems).isotope('addItems', $newItems).isotope('reLayout', callback).isotope('reloadItems'); 
      } 
     }); 
    } 

回調後,這就是它的樣子。除了當按下手機部門,它帶給我的頁面」

<ul id="filterContainer" class="filter clearfix"> 
     <li> 
      <a class="active" data-filter="*" href="#">All</a> 
     </li> 
     <li> 
      <a data-filter=".PhoneDepartment" href="#">Phone Department</a> 
     </li> 
    </ul> 
+0

ajax調用完成後重新加載同位素函數 – Hushme

+0

我已將它重新加載 –

回答

2

我使用此代碼做同樣的事情的頂部:

$('#filterContainer').append($newItems).isotope('insert', $newItems); 

沒有重新佈局/ reloadItems