Using Ajax with multiple select - php

Question

I have a multiple select form that I am now trying to use with AJAX. The drop down is supposed to act as a filter for images.
Index.php
<script>
function filterResults(str)
{
if (str=="")
{
document.getElementById("divResults").innerHTML="";
return;
}
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>
<form action="" class="css_form" id="picture_filter" name="picture_filter">
<select onchange="filterResults(this.value)" multiple="multiple" name="filter[]" id="filter">
<option value="filter_name_1">Filter name 1</option>
<option value="filter_name_2">Filter name 2</option>
<option value="filter_name_3">Filter name 3</option>
<option value="filter_name_4">Filter name 4</option>
</select>
<div id="divResults"></div>
and filter_ajax.php
<?php
include ("connect.php");
$filter = $_GET["filter"];
$filterIn = implode("','",$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());
while ($row = mysql_fetch_array($result)) {
echo "<img src='files/small/thumb0_".$row['item_name'].".".$row['file_extension']."' border='0'/>";
}
?>
In my database each image has six entries which correspond to the categories, and are filled with subcategories. Thus whats supposed to happen is that when an item is selected from the "filter drop-down" it should query each six columns for that information. However I am receiving the following error and output:
implode(): Invalid arguments passed in ... Line 6.
For testing I have five entries. 3 which have all information filled in for the six categories entries, and two which were left blank.
The two that are left blank are always returned with the error above.
Anyone have any ideas as to why this is happening?
Thanks in advance

Answer 1

Modify <select>:
<select onchange="filterResults(this)" multiple="multiple" name="filter[]" id="filter">
and try this (note: you don't need to implode array with "," on server-side - that is already done with JS in the example):
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","test.php?filter="+str,true);
xmlhttp.send();
}
UPD:
Modify your SQL also:
$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)");

Answer 2

What you're sending to your PHP script, is not an array. So you cannot use implode() on it and implode() is returning an error. Run this:
var_dump($filter);
Then you can decide how to modify your code based on the result.