Istotope Ajax Inhalt laden

Question

Ich bin stecken Implementierung laden nächsten Satz von Beiträgen in WordPress mit Isotop Mauerwerk Layout. Es ist nur nicht für angehängte Elemente ausgelöst und ich kann nicht herausfinden, warum. Wenn mir jemand in die richtige Richtung zeigen könnte, würde ich mich freuen.

jQuery AJAX Funktion

function load_content(args) { 

     $container = $('#container-async'); 
     $status = $('.status'); 

     $.ajax({ 
      url: ajax_url, 
      data: { 
       action: 'do_load_posts', 
       nonce: nonce, 
       args: args 
      }, 
      type: 'post', 
      dataType: 'json', 
      success: function(data, textStatus, XMLHttpRequest) { 

       $items = data.posts; 

       if (args.action === 'filter') { 
        /** 
        * Replace items 
        */ 
        $container.imagesLoaded(function() { 
         $container.isotope({ 
          itemSelector: '.grid-item', 
          percentPosition: true, 
          masonry: { 
           columnWidth: '.grid-sizer' 
          } 
         }); 
         $container.html($items).isotope('appended', $items, function() { 
          console.log('inserted'); 
         }); 
        }); 
       } 
       else { 
        /** 
        * Append items 
        */ 
        $container.imagesLoaded(function() { 
         $container.isotope({ 
          itemSelector: '.grid-item', 
          percentPosition: true, 
          masonry: { 
           columnWidth: '.grid-sizer' 
          } 
         }); 
         $container.append($items).isotope('appended', $items, function() { 
          console.log('appended'); 
         }); 
        }); 
       } 
      }, 
      error: function(MLHttpRequest, textStatus, errorThrown) { 
       $status.toggleClass('active'); 
      } 
     }); 
} 

Wordpress AJAX:

function ajax_do_load_posts() { 

    // Verify nonce 
    if(!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'nonce')) 
     die('Permission denied'); 

    $response = [ 
     'status' => 500, 
     'posts' => 0, 
    ]; 

    $filter = $_POST['args']; 

    $type = get_post_type_object($filter['type']); 
    $args = [ 
     'post_type'  => sanitize_text_field($filter['type']), 
     'paged'   => intval($filter['page']), 
     'posts_per_page' => $filter['qty'], 
    ]; 

    $qry = new WP_Query($args); 

    if ($qry->have_posts()) : 
     ob_start(); 

     while($qry->have_posts()) : $qry->the_post(); ?> 
      <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
       <?php get_template_part('templates/loop', 'card'); ?> 
      </div> 
     <?php endwhile; 

     $response = [ 
      'status' => 200, 
      'posts' => ob_get_clean(), 
     ]; 
    endif; 

    wp_reset_query(); 
    wp_reset_postdata(); 

    die(json_encode($response)); 
} 

add_action('wp_ajax_do_load_posts', 'ajax_do_load_posts'); 
add_action('wp_ajax_nopriv_do_load_posts', 'ajax_do_load_posts'); 

Artikel eingefügt oder in den Behälter angehängt, aber Mauerwerk ausgelöst wird, nur auf Gegenstände, die schon da sind auf Seite laden.

Ich habe um gegoogelt und versucht, verschiedene Lösungen, aber keiner von ihnen arbeiten, weder mit Isotopen oder Mauerwerk jquery Plugin.

Answer 1

Ich war in der Lage, mein Problem zu beheben, und irgendwie sieht das Problem aus, weil ich jQuery Standard Append/Insert-Methoden verwendet habe. Ich bin auf Isotopenmethoden umgestiegen und jetzt sieht es gut aus.

Also im Grunde statt

$container.html($items).isotope('appended', $items, function() { 
    console.log('inserted'); 
}); 

Ich verwende jetzt:

$grid.isotope('insert', jQuery($items)); 

Es ist logisch sieht eigentlich das Isotop nicht wissen kann, Artikel angehängt werden, wenn ich Isotope nicht/Insert-Methode verwenden hängen. Und beachte, dass ich auch $ items in jQuery eingepackt habe.

Wie auch immer mein Arbeits JS für gleiche PHP-Funktion ist:

function load_content(args) { 

    $container = $('#container-async'); 
    $status = $('.status'); 

    $.ajax({ 
     url: ajax_url, 
     data: { 
      action: 'do_load_posts', 
      nonce: nonce, 
      args: args 
     }, 
     type: 'post', 
     dataType: 'json', 
     success: function(data, textStatus, XMLHttpRequest) { 

      $items = data.posts; 

      var $grid = $('.masonry').imagesLoaded(function() { 

       $grid.isotope({ 
        itemSelector: '.grid-item', 
        percentPosition: true, 
        masonry: { 
         columnWidth: '.grid-sizer' 
        } 
       }); 

       if (args.action === 'filter') { 
        $grid.isotope('remove', $('.grid-item')); 
       } 

       $grid.isotope('insert', jQuery($items)); 
      }); 


      $grid.on('layoutComplete', function(event, laidOutItems) { 
       $container.removeClass(data.action); 
      }); 
     }, 
     error: function(MLHttpRequest, textStatus, errorThrown) { 
      $status.toggleClass('active'); 
     } 
    }); 
}