Może opiszę dokładnie co chcę zrobić.
Korzystam z isotope:
http://isotope.metafizzy.co/v1/demos/adding-items.htmlChcę dołączyć nowe elementy z bazy danych. Na chwilę obecną mam coś takiego:
var $grid = $('.portfolioContainer').isotope({
itemSelector: '.port'
});
$('.append-button').on( 'click', function() {
var $items = getItemElement().add( getItemElement() ).add( getItemElement() );
$grid.append( $items )
// add and lay out newly appended elements
.isotope( 'appended', $items );
});
function getItemElement() {
var $item = $('
<div class="id_3 id_1 port"><a href="#" data-toggle="modal" data-target=".projekt_2" ><img src="img/portfolio/1487435081/0.17665000_6.jpg" alt="image"></a><p>Firma 1
</p><div class="portfolioFilter hash"><a href=".id_3" data-filter=".id_3">#Loga PSD
</a><a href=".id_1" data-filter=".id_1">#Strony WWW
</a></div></div><div class="id_2 port"><a href="#" data-toggle="modal" data-target=".projekt_3" ><img src="img/portfolio/1487435111/0.75740000_1.jpg" alt="image"></a><p>Firma 2
</p><div class="portfolioFilter hash"><a href=".id_2" data-filter=".id_2">#Orazki
</a></div></div><div class="id_3 id_5 port"><a href="#" data-toggle="modal" data-target=".projekt_4" ><img src="img/portfolio/1487701899/0.98490500_10.jpg" alt="image"></a><p>Firma 3
</p><div class="portfolioFilter hash"><a href=".id_3" data-filter=".id_3">#Loga PSD
</a><a href=".id_5" data-filter=".id_5">#Logo JPG
</a></div></div>');
return $item;
}
i to działa. Z tym że do zmiennej
$item dodałem 'z palca' dane które chcę uzyskać z zapytania z bazy danych. Chciałbym to powyższe połączyć z poniższym, tak by dane
'data' były podpięte jakoś pod zmienną
$item.
$.post( 'fetch_pages.php',
{'page': track_page},
function(data){
}
);
Poradziłem sobie:
var $grid = $('.portfolioContainer').isotope({
itemSelector: '.port'
});
var track_page = 1;
$('.append-button').on( 'click', function() {
$.post( 'fetch_pages.php', {'page': track_page}, function(data){
var $items = $(data);
$grid.append( $items )
.isotope( 'appended', $items );
});
});