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!
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!
Share Improve this question edited Oct 7, 2015 at 12:04 Ahmed Ashour 5,61110 gold badges39 silver badges62 bronze badges asked Oct 20, 2014 at 7:30 ChaosChaos 671 silver badge8 bronze badges3 Answers
Reset to default 3I 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./isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg./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.
the issue is solved already I assume.
Anyway you can tell isotope about your new items in the AJAX succes callback, see isotope documentation under functions -> appended
Update for
Wordpress, Vue, Internet Explorer 11
Example has lazyload code added.
I just found out an alternative fix: I created a canvas element with the correct sizes instead of only loading and placing the images. This canvas is used as a placeholder for ratio calculations. The images sit with position absolute on top.
Caveat: you need to know the image sizes/ratio. In my wordpress case they are embedded in the json call.
It even works with Internet Explorer 11.
<figure>
<canvas
:width="post.image.sizes['medium-width']"
:height="post.image.sizes['medium-height']"
></canvas>
<img
class="lazyload"
:src="post.image.sizes.thumbnail"
:data-src="post.image.sizes.medium"
:alt="post.image.alt"
:width="post.image.sizes['medium-width']"
:height="post.image.sizes['medium-height']"
>
</figure>
CSS:
figure,canvas { position: relative; }
img { position: absolute; top:0; left:0; }