2013-07-22 3 views
0

Я использую jquery Masonry, и я хотел бы вспомнить масонство, когда я удаляю DiV с Ajax. Я попробовал код ниже, но это не работает так, как ожидалось! Какую функцию масонства можно использовать для обновления моих элементов?JQuery Masonry update DIV после вызова Ajax

Моя разметка:

<div id="success" style="margin:0 0 200px 140px"> 
<div id="containerPost"> 
    <div id="post79" class="item" style="width:500px;margin:5px;padding:5px;background:#F5F5F5;"> 
     <div style="z-index:999;width:490px;margin:0 auto" class="bottomImg"> 
      <p style="padding:5px 5px"> 
       <span style="line-height:24px;margin:0;padding:0"> 
        <a href="javascript:void(0)" class="delPost lsf-icon delete" data-action="del" data-id_user="1" data-id_post="79">delete</a> 
       </span> 
      </p> 
     </div> 
    </div> 
</div> 
... 

JQuery

 var $container = $('#containerPost'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.item' 
     }); 
    }); 


    $(document).on("click", "a.delPost", function(){ 
     if(confirm('Are you sure you want to delete this post ?')) { 
       var $this = $(this); 
       var id_user = $this.attr('data-id_user'); 
       var id_post = $this.attr('data-id_post'); 
       var action = $this.attr('data-action'); 
       var myPostData = JSON.stringify({'id_user':id_user,'id_post':id_post,'action':'del'}); 
       var myPostData = JSON.parse(myPostData); 

       $.ajax({ 
        type : "POST", 
        url : "../include/test.inc.php", 
        data : myPostData, 
        dataType: 'json', 
        success : function (data) { 
         if (data.success == 'ok') { 
          $('#post'+id_post).fadeOut('slow'); 
          $.pnotify({ 
           type: 'success', 
           history: false, 
           delay: 5000, 
           title: 'Success', 
           text: data.message 
          });        
          // Masonry : This is may be not right !!! 
          var $container = $('#containerPost'); 
          $container.masonry({ 
           itemSelector : '.item' 
          }); 
          // End Masonry 
         } 
        }, 
        error : function (xhr, ajaxOptions, thrownError) { 
         //alert(xhr.status); 
         //alert(thrownError); 
        }, 
        complete: function(){ 
         //location.href = 'test.php'; 
         //location.reload(); 
        }   
       }); 
     } 
    }); 

Спасибо за вашу помощь ...

Chris

ответ

0

Вы должны сказать masonr у вас удалить его:

$container.masonry('remove', elements); 

http://masonry.desandro.com/methods.html#remove

Вы также должны вызвать $ container.masonry() еще раз после того, удалить его в relayout все,

+0

В «элементов» мое дело должно быть «post79» ? – Chris

+0

Я сделал: $ ('# post' + id_post) .fadeOut ('slow'); var $ container = $ ('# containerPost'); $ container.masonry ('remove', '# post' + id_post) var $ container = $ ('# containerPost'); $ container.masonry ({ itemSelector: '.item' }); но это не работает: – Chris

+0

Элементы должны быть $ ('# post' + id_post) –

Смежные вопросы