masonry et infiniscroll ont des problèmes sur une requête ajax
Bonjour,
J'éssais tant de mal à faire fonctionner masonry et infiniscroll.js enssemble et en pliu de les faire fonctionner sur une requête ajax.
Tout d'abord j'ai initisialiser masonry et infiscroll comme si je n'utilise pas d'ajax.
// init masonry
var $container = $('#msnry-container');
$container.masonry({
itemSelector : '.article-item',
Width: 200,
});
// init infiniscroll
$container.infinitescroll({
navSelector : 'div#pagination',
nextSelector : 'div#pagination a:first',
itemSelector : '.article-item',
debug : true,
loading : {
finishedMsg : 'No more pages to load.',
img: 'https://i.imgur.com/qkKy8.gif'
}
},
function(newElements){
var $newElements = $(newElements);
$container.masonry('append',$newElements,true);
});Le premier problème est que quand infiniscroll ajoute de nouveau élément il se met sur les anciens. Moi je veux que Mansonry puis se recharger. C'est pour que j'ai une fonction qui à la fin de l'appelle infiniscroll qui s'occupe de recharger le comportement de Masonry. J'ai fait des teste si la fonction est vraiment appeller avec un alerte et ça fonctione.
$container.masonry('append',$newElements,true);Le deuxième problème est que j'ai essayer de voire comment réinisaliser masonry après une requête ajax. Il faut que je utilise ce bout de code :
$container.masonry('append',$newElements,true);Je ne sais pas comment faire pour que ça fonction avec infiniscroll.
C'est quand je clique sur un lien en ajax ces cette fonction qui est appelle :
function htmlAjaxRequest(url,type,content_div,loader_div){
$(loader_div).fadeIn();
$.ajax({
url : url,
type : type,
dataType : 'html',
cache : false,
}).done(function(data){
$(content_div).empty().html(data);
// Nous rechargons masonry et infiscroll
}).fail(function(text, jqxhr){
// echec
}).always(function(){
});
}Merci de votre aide.
4 réponses
Voila le code de leur démo
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
J'ai réglé le problème :
dans ma ma fonction la variable $container n'était pas défini quad la page est charger en ajax :
var $container = $('#msnry-container');
nous remettons le comportement de masonry et de infiniscroll sur les nouveaux contenu chargé en ajax.Voilà pourquoi masonry et infiniscroll ne fonctionnait pas correctement.
La premier parti de mon problème est réglé, mais il me reste que ma fonction htmlAjaxRequest() puis regénéré le comportement de massonru
function htmlAjaxRequest(url,type,content_div,loader_div){
$(loader_div).fadeIn();
$.ajax({
url : url,
type : type,
dataType : 'html',
cache : false,
}).done(function(data){
$(content_div).empty().html(data);
// Nous rechargons masonry et infiscroll
}).fail(function(text, jqxhr){
// echec
}).always(function(){
});
}Quand je fait une requête ajax je vide la div qui contient du contenu en ajax et je le reremplit avec les donner de ma vue en ajax :
$(content_div).empty().html(data);QU'est que je fait pour ces nouvelle donné et les mettre dans le comportement de mansonry.
J'ai essayer cette solution, mais je ne suis par arriver :
http://stackoverflow.com/questions/11222612/how-to-make-infinite-scroll-reset-with-new-ajax-content