Php AJAX之后未加载JavaScript类
我正在从mySQL数据库中提取最近的50条记录。每一个都进入一个有同位素的DIV中,并完美地工作-DIV动画、重置等 但是,使用AJAX使用OFFSET调用接下来的50条记录时,新记录会加载到新的div中,但同位素的类不会应用于它们,正如通过Web检查器看到的那样 设置: index.php=在浏览器中加载时调用数据库,同位素工作正常。index.php aupdate_newImages上的链接会触发侦听器加载load-ajax.php load-ajax.php=一个只有SQL SELECT和PDO循环的外部页面。这些记录加载,但未应用同位素,因此存在问题 来自index.php的代码 load-ajax.php中的代码 我认为有一个回拨解决方案,但我不确定下一步该怎么做 注意:我已经尝试过Paul Irish的同位素+无限卷轴,但是在我能够将无限卷轴的分页机制从mySQL转换为JSON之前,我不能在这里使用它。下一个项目 编辑:我将index.php修改如下。问题依然存在,但我认为它几乎就在那里。ajax正在工作,但是当同位素开始工作时,它不会在新的div上添加它的类 就在以下内容之前:Php AJAX之后未加载JavaScript类,php,ajax,jquery-isotope,Php,Ajax,Jquery Isotope,我正在从mySQL数据库中提取最近的50条记录。每一个都进入一个有同位素的DIV中,并完美地工作-DIV动画、重置等 但是,使用AJAX使用OFFSET调用接下来的50条记录时,新记录会加载到新的div中,但同位素的类不会应用于它们,正如通过Web检查器看到的那样 设置: index.php=在浏览器中加载时调用数据库,同位素工作正常。index.php aupdate_newImages上的链接会触发侦听器加载load-ajax.php load-ajax.php=一个只有SQL SELECT
总而言之,新数据加载到DIVs中-我可以看到它,直到我以任何方式调整浏览器窗口的大小,这就是同位素的作用,它用CSS隐藏了新的div。同位素有一个用于在动态插入新内容后重新计算布局的函数。同位素有一个用于在动态插入新内容后重新计算布局的函数。不熟悉同位素,但如果它没有绑定到新创建的元素,你不应该这样做吗只要在上面的成功回调编辑代码中再次运行$container.com初始化,我想我已经在正确的位置添加了一个成功回调警报。这就是它的用途吗?不熟悉同位素,但如果它不绑定到新创建的元素,你不应该重新运行$container。同位素初始化再次在上面的成功回调编辑代码中,我想我已经添加了一个成功回调警报,暂时放在正确的位置。这就是它要去的地方吗?是的,我一直在查看它们,我只需要弄清楚在上面编辑的回调中放什么代码。是的,你很可能会使用追加或插入方法。类似于$container.isotox'insert',$items,其中$items是返回的dom元素的列表。是的,我一直在查看它们,我只需要找出要在上面编辑的回调中放入哪些代码。是的,您很可能会使用added或insert方法。类似于$container.insert,$items,其中$items是返回的dom元素的列表。
...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>
...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
}
<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>
<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>