I'm using a multiselect dropdown to filter images stored in my db. The results are paginated, however the pagination fails once the results are filtered. The filter uss ajax to make a php call to the database.
What I think is happening is that the once the results are loaded in the div the paginate javascript function has already fired and wont a second time. Is there a way to call the function everytime the results are filtered?
I believe I just need to recall this each time:
<script type="text/javascript">
jQuery(function($){
$('ul#items').easyPaginate({
step:6
});
});
</script>
Ajax call:
<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>";
?>
If you are using jQuery you can simplify the code within the filterResults
function greatly by utilizing the framework it provides. I would read up a bit here as you will be amazed by the extensive functionality.
This code is the jQuery equivalent of your previous code,
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
}
});
}
To answer the question the code within the success
callback of the ajax call will be executed upon a receiving the data back from the server. This code above should work as expected.
Well
According to the comments I'll have to study up on javascript and jquery, never really was to concerned with it before.
Anyways by recalling the javascript function
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("divResults").innerHTML=xmlhttp.responseText;
RESTATING HERE
}
I was able to get it working.
Put javascript call into your php-ajax echo, example:
<?
$msg = "hello";
?>
<script type="text/javascript">alert("<?=$msg?>"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.