我正在使用多选下拉列表来过滤存储在我的数据库中的图像。结果是分页的,但是一旦结果被过滤,分页就会失败。过滤器使用ajax来对数据库进行php调用。
我认为发生的事情是,一旦结果被加载到div中,paginate javascript函数已经解雇并且不会再次发生。有没有办法在每次过滤结果时调用函数?
我相信我每次都需要回忆一下:
<script type="text/javascript">
jQuery(function($){
$('ul#items').easyPaginate({
step:6
});
});
</script>
Ajax电话:
<script>
function filterResults(sel)
{
var selectedOptions = [];
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected) {
selectedOptions.push("'" + sel.options[i].value + "'");
}
}
if (selectedOptions.length == 0) {
document.getElementById("divResults").innerHTML="";
return;
}
str = selectedOptions.join(",");
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","filter_ajax.php?filter="+str,true);
xmlhttp.send();
}
</script>
ajax_filter.php:
<?php
include ("connect.php");
$filter = $_GET["filter"];
$filterIn = $filter;
$result = mysql_query("SELECT * FROM edt_images
WHERE category1 IN ($filterIn)
OR category2 IN ($filterIn)
OR category3 IN ($filterIn)
OR category4 IN ($filterIn)
OR category5 IN ($filterIn)
OR category6 IN ($filterIn)")
or die(mysql_error());
echo "<div id='results_container'>";
echo "<ul id='items'>";
while ($row = mysql_fetch_array($result)) {
echo "<li><img src='files/300x200/thumb2_".$row['item_name'].".".$row['file_extension']."' class='filtered_images' border='0'/></li>";
}
echo "</ul>";
echo "</div>";
?>
答案 0 :(得分:1)
如果您使用的是jQuery,则可以通过利用它提供的框架大大简化filterResults
函数中的代码。我会读一点here,因为你会对广泛的功能感到惊讶。
此代码与您之前代码的jQuery等效,
function filterResults(sel) {
var selectedOptions = [];
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected) {
selectedOptions.push("'" + sel.options[i].value + "'");
}
}
if (selectedOptions.length == 0) {
$("divResults").html("");
return;
}
filteStr = selectedOptions.join(",");
$.ajax({
url: "http://www.google.com",
type: "get",
dataType: "html",
data: {
filter: filteStr
},
success: function (responseHtml) {
$("divResults").html(responseHtml);
//You can put your code here
$('ul#items').easyPaginate({
step: 6
});
},
error: function (responseHtml) {
//Handle error
}
});
}
要回答这个问题,ajax调用的success
回调中的代码将在从服务器接收数据时执行。上面的代码应该按预期工作。
答案 1 :(得分:0)
好
根据评论,我将不得不研究javascript和jquery,从来没有真正关注它。
无论如何通过回忆javascript函数
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
RESTATING HERE
}
我能够让它发挥作用。
答案 2 :(得分:-1)
将javascript调用放入php-ajax echo中,例如:
<?
$msg = "hello";
?>
<script type="text/javascript">alert("<?=$msg?>"></script>