Я извлекаю 50 самых последних записей из базы данных MySQL. Каждый входит в DIV, который имеет изотоп и работает отлично - DIV анимируются, сбрасываются и т. д.
Однако при использовании AJAX для вызова следующих 50 записей с использованием OFFSET новые записи загружаются в новые DIV, но классы Isotope к ним не применяются (как видно из веб-инспектора).
НАСТРОЙКА:
index.php = вызывает базу данных при загрузке в браузере, Isotope работает нормально. Ссылка на index.php (a#update_newImages) запускает прослушиватель для загрузки «load-ajax.php».
load-ajax.php = внешняя страница, которая имеет только цикл SQL SELECT и PDO. Эти записи загружаются, но без применения изотопов, отсюда и проблема.
код из index.php
...database connection info and query code go here
$filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved
//ISOTOPE SETTINGS, in <HEAD>
var $container = $('#theContent');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
in BODY:
<div id="theContent">
<?php
for($i=0; $links = $query_links->fetch(); $i++){
echo "<div class=\"".$filter." box\"><a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\">" . $links['ATtitle']."</a><br>" . "#" . $links['LID']."-
<a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\">". $links['descr']."</a></div>";
}
?>
</div><!-- theContent -->
<script> // RIGHT BEFORE BODY TAG CLOSES
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
event.preventDefault();
offset_newImages += 50; // increments batches of records
$.get('load-ajax.php?loadDataType=newImages&offset='+offset_newImages, function(data) {
$("#theContent").hide().html(data).fadeIn(600);
//**EDIT**
alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?
}, false);
});
</script>
код из load-ajax.php
...database connection info goes here
$offset = $_GET["offset"]; // from URL
$filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved
for($i=0; $links = $query_links->fetch(); $i++){
$showList = "<div class=\"".$filter." box\"><a href=\"#\" data-filter=\"." . $filter . "\" class=\"theCat " . $filter . "\">" . $links['ATtitle']."</a><br>" . "#" . $links['LID']."-
<a href=\"". $links['URL']."\" target=\"_blank\" class=\"theURL\">". $links['descr']."</a></div>";
echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
}
Я думаю, что есть решение обратного звонка, но я не уверен, что делать дальше.
ПРИМЕЧАНИЕ. Я экспериментировал с Isotope + бесконечная прокрутка Пола Айриша, но не могу использовать его здесь, пока не смогу преобразовать механизм пейджинга бесконечной прокрутки в JSON из mySQL. Следующий проект.
РЕДАКТИРОВАТЬ: я пересмотрел index.php следующим образом. Проблема сохраняется, но я думаю, что она почти там. Ajax работает, но когда Isotope запускается, он не добавляет свои классы в новые DIV.
<head>
<script type="text/javascript">
$(document).ready(function(){
//ISOTOPE SETTINGS
var $container = $('#container');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
</script>
идет прямо перед </body>:
<script>
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
offset_newImages += 50;
$.ajax({
type: 'GET',
url: "load-ajax.php?offset="+offset_newImages,
success:function(data){
// alert(data); // works
$("#container").hide().html(data).fadeIn(600) // fades in the new recordset
$container.isotope('insert', data);
}
});
});
</script>
Итак, в заключение, новые данные загружаются в DIV - я могу видеть их, пока не изменю размер окна браузера каким-либо образом, и именно здесь Isotope срабатывает и скрывает новые DIV с помощью своего CSS.
