Menu
So all the content on my page is loaded from an AJAX call.
I thought that if I simply put my isotope in a document ready function it would work but it does NOT work:
$(function(){
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
The AJAX call succeeds but nothing appears and the page remains blank. Any idea why? I get no errors.
I did however manage to get my isotope to work by using the jquery .then method after making my AJAX call. Here is an example where Isotope works:
function grabNews(){
var $content = $('#content');
$.ajax({
type:'GET',
url:'json/dummy.json',
success: function(news) {
for(i=min; i<max; i++){
$content.append('<div class="tile x150x100"><h3>' + news[i].headline +'</h3><br>' + news[i].text + '</div>')
}
}
max=max+50;
min=min+50;
},
error: function () { alert('Loading Failed...');
}
}).then(function(){
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
}
.background {
background-color: lightblue;
width: 1000px;
height: auto;
margin: auto;
overflow: auto;
}
.tile {
background-color: white;
border: 1px solid black;
overflow: hidden;
float: left;
margin: 10px;
padding: 10px;
}
.x300x300 {
height: 300px;
width: 300px;
}
.x300x200 {
height: 300px;
width: 200px;
}
.x200x200 {
height: 200px;
width: 200px;
}
.x150x100 {
height: 150px;
width: 100px;
}
<body>
<div id="content" class="background">
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/isotope.js"></script>
<script src="js/controller.js"></script>
</body>
So using the .then method works UNTIL I scroll to the bottom of the screen and make another AJAX call to load more content. The new content does not enter the Isotope container. It is simply ignored.
I did find a quasi solution to my problem by inserting:
$('#content').isotope('destroy');
Into
.then(function(){
$('#content').isotope('destroy');
container = $('#content');
container.isotope({
itemSelector: '.tile',
masonry: {
columnWidth: 100
},
});
});
I put it in my jquery .then function and the isotope container updates and recognizes new objects. So success! BUT then my browser scrolls back to the top! Why?
How can I scroll down and update my isotope container while making ajax calls?
Please help!
435
asked Dec 19 '25 19:12
I will give you a brief example to implement the isotope js work upon the ajax call and append to your isotop container.
first add the live CDN for isotop js:
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
lets assume we have the div with class lets say, "isotop": For Example:
<div class="isotop">
................
</div>
Now there may be some content inside this isotop div with class lets say, "isotop-item": For example:
<div class="isotop">
<div class="isotop-item">
<p>Item 1</p>
</div>
<div class="isotop-item">
<p>Item 2</p>
</div>
<div class="isotop-item">
<p>Item 3</p>
</div>
</div>
Also we have a button on which if clicked then the content should be loaded inside isotop div. For example:
<div class="btn_load">
<a href="btn btn-info">Load More</a>
</div>
Now if you want to append the content that you get from ajax call then it is as simple as you want:
<script type="text/javascript">
$(document).ready(function(){
$('.btn_load').on('click',function(){
var $grid = $('.isotop').isotope({
itemSelector: '.isotop-item',
});
$.ajax({
url : '<?php echo site_url('Items/addMoreItems'); ?>',
type : 'post',
data : 'offset='+offset,
success: function(res){
var $items = $(res);
$grid.append($items)
.isotope('appended',$items);
}
});
});
});
</script>
Note: The res in success must be:
<div class="isotop-item">
<p>Item 3</p>
</div>
<div class="isotop-item">
<p>Item 4</p>
</div>
And for sure you will get the isotop content will all of the isotop properties.
183
answered Dec 21 '25 11:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With