web-dev-qa-db-fra.com

jQuery Masonry et Ajax Ajouter des éléments?

J'essaie d'utiliser des fichiers ajax et le plug-in jQuery Masonry pour ajouter des éléments, mais pour une raison quelconque, les nouveaux éléments ne sont pas appliqués à la maçonnerie?

J'utilise

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

Toutefois, le class="masonry-brick" n'est pas appliqué aux éléments ajoutés par la suite, ce qui signifie qu'ils complètent complètement le positionnement?

jqueryajaxjquery-masonry
29
Andy

Avait un problème similaire et à la place utilisé la ligne suivante (converti pour votre code). Désolé, je ne me rappelle pas où je l'ai trouvé.

Dans votre code, remplacez ceci:

jQuery("#content").append(el).masonry( 'appended', el, true );

Avec ça:

jQuery("#content").append(el).masonry( 'reload' );

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

23
frankp

Il semble que la fonction masonry attend un objet jQuery en tant que deuxième paramètre et non une chaîne HTML brute. Vous devriez pouvoir résoudre ce problème en encapsulant le paramètre success callback de la manière suivante:

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var el = jQuery(html);
            jQuery("#content").append(el).masonry( 'appended', el, true );
        }
    });
});
41
ryanlahue
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

Solution

26
subone
success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}

fonctionne bien pour moi.

4
kdgilang

J'ai eu le même problème avec ma liste ajax, je pourrais le résoudre en appelant les fonctions reloadItems & layouts après que ajax réponde:

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
2
Youssef AAZRI

J'ai ajouté le code suivant après la commande append et tout allait bien:

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

La raison:

Les images non chargées peuvent détacher les dispositions de maçonnerie et provoquer le chevauchement des éléments. imagesLoaded résout ce problème. imagesLoaded est un script séparé que vous pouvez télécharger sur imagesloaded.desandro.com.

la source

2
Chris Kon

Il vous manque un appel de maquette de maçonnerie. Selon la documentation, vous devez actualiser la présentation en exécutant .masonry() après chaque modification (par exemple .masonry('appended')):

$grid.masonry()
  .append(elem)
  .masonry('appended', elem)
  // layout
  .masonry();

(source: http://masonry.desandro.com/methods.html )

1
poxip

Cette solution fonctionne pour moi: -

  jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    dataType: 'json',
    cache: false,
    success: function(response) {
      if (response.length > 0) {
        var $container = $('#container');
        var msnry = $container.data('masonry');
        var elems = [];
        var fragment = document.createDocumentFragment();
        for (var x in response) {
          var elem = $(response[x]).get(0);
          fragment.appendChild(elem);
          elems.Push(elem);
        }
        $container.appendChild(fragment);
        msnry.appended(elems);
      }
    }
  });
0
Mudaser Ali

c'est clairement expliqué ici https://masonry.desandro.com/methods.html#prepended

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

dans votre success function, vous avez besoin que votre réponse "html" soit encapsulée dans un jquery object puis ajoutée à l'aide de html() ou append().

var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );

le code final devrait être

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var $content = $( html );
            jQuery("#content").append($content).masonry( 'appended', $content );
        }
    });
});
0
Aamer Shahzad

Pour les futurs utilisateurs qui trouvent ce problème et les solutions ci-dessus ne fonctionnent pas: j'ai trouvé un problème avec mon sélecteur et l'élément que j'ai ajouté n'a pas le même cas, à savoir itemSelector était .Card J'ajoutais <div class="card">.

J'espère que cela t'aides.

0
Sam