Ajax调用后同位素布局模式不起作用

时间:2018-10-04 13:10:33

标签: php ajax isotope

我正在使用同位素在砌体模式下布置物品。 这是显示的人 enter image description here

当我尝试进行ajax调用以插入新内容时,砌体布局不适用

enter image description here

已经尝试了同位素的“ a​​ppended”和“ reloadItems”方法,但仍然无法使用。 谁能帮我解决这个问题?

这是我的ajax

//FILTER ADS BY CATEGORY
//guardar numa variável todas as categorias
  var categorias = document.querySelectorAll("a.link");
  //fazer um loop para criar um evento ao clicar para cada botão
  for(var i = 0; i < categorias.length; i++) {
    categorias[i].addEventListener("click", function() {
      //guardar o innerHTML
      var categoria = this.innerHTML;
      //fazer a chamada ajax
        $.ajax({
        url: "filter-data.php?categorie=" + categoria,
        dataType: "html",
        success: function(response) {
            $(".ads").html(response);
          }
        });
    });
  } 

这是我的data.php文件

if(isset($_GET["categorie"])) {
    $categorie = $_GET["categorie"];
  }

         foreach ($adverts_list as $ad) {
          if($categorie === $ad->categorie_name) {

           echo '          
                <div class="card ad-isotope">
                  <div class="card-body">
                    <div class="card-title">
                      <div class="card-info">
                        <i class="fa fa-tags"></i>
                        <p class="card-tag">' . $ad->categorie_name . '</p>';
                          if($ad->subCategorie_id != 10) {
                            echo '<p class="card-subcat">' . $ad->subCategorie_display . '</p>';
                          }
                      echo '</div>
                    </div>

                    <div class="new-symbol">
                      <p>';
                        if($ad->ad_nouveau == 1) { 
                          echo 'nouveau';
                        }
                      echo '</p>
                    </div>

                    <div class="card-subtitle">
                      <p class="db-title">' . $ad->ad_title . '</p>
                      <p class="db-subtitle">' . $ad->ad_subtitle . '</p>
                    </div>

                    <div class="card-readmore">
                      <a data-toggle="modal" href="#ad-detail-modal-' . $ad->ad_id . '">
                        <p class="read-more">voir l\'annonce</p>
                      </a>    
                    </div>

                  </div>
                </div>
            ';
          }
         }

0 个答案:

没有答案