Hallo Friend,
I want to use the idea of using AJAX to filter MySQL results with multiple checkbox option. Here is the complete code which i already got from this forum. But this code runs on PHP5 version as PDO database connectivity and Json encode input is used in submit.php file. I want to make changes in the submit.php file so that it can runs on PHP4 version. Please help me in that as i am new to use PHP4 version.
Thank You.
regards,
Rahul D.
Here is the code:
CREATE TABLE IF NOT EXISTS `mobile_phone` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`model` varchar(255) DEFAULT NULL,
`price` int(11) DEFAULT NULL,
`brand_id` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `mobile_phone` (`id`, `model`, `price`, `brand_id`) VALUES
(1, 'Galaxy S 1', 180, 1),
(2, 'Galaxy S 2', 220, 1),
(3, 'Galaxy S 3', 300, 1),
(4, 'Galaxy S 4', 450, 1),
(5, 'Galaxy S 4 mini', 400, 1),
(6, '3GS', 150, 2),
(7, '4', 200, 2),
(8, '4S', 250, 2),
(9, '5', 300, 2),
(10, '5S', 350, 2),
(11, 'Desire', 150, 3),
(12, 'Desire200', 200, 3),
(13, 'Desire500', 250, 3),
(14, 'One', 400, 3),
(15, 'One mini', 250, 3),
(16, 'Optimus L3', 150, 4),
(17, 'Optimus L5', 250, 4),
(18, 'Optimus L7', 350, 4),
(19, 'Optimus L9', 400, 4),
(20, 'Optimus G2', 450, 4),
(21, '100', 50, 5),
(22, 'E72', 100, 5),
(23, 'E6', 150, 5),
(24, 'Lumia 520', 200, 5),
(25, 'Lumia 620', 250, 5);
Then the brand table :
CREATE TABLE IF NOT EXISTS `brand` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `brand` (`id`, `name`) VALUES
(1, 'Samsung'),
(2, 'iPhone'),
(3, 'HTC'),
(4, 'LG'),
(5, 'Nokia');
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX filter demo</title>
<style>
body {
padding: 10px;
}
h1 {
margin: 0 0 0.5em 0;
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
}
h2 {
margin: 1em 0 0.3em 0;
color: #343434;
font-weight: normal;
font-size: 30px;
line-height: 40px;
font-family: 'Orienta', sans-serif;
}
#phones {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 15px 25px 0 0;
border-collapse: collapse;
text-align: center;
float: left;
width: 300px;
}
#phones th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#phones td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 8px 10px;
}
#phones tbody tr:hover td {
color: #009;
}
#filter {
float:left;
}
</style>
</head>
<body>
<h1>Phones database</h1>
<table id="phones">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="filter">
<h2>Filter options</h2>
<div>
<input type="checkbox" id="Samsung" checked>
<label for="Samsung">Samsung</label>
</div>
<div>
<input type="checkbox" id="iPhone" checked>
<label for="iPhone">iPhone</label>
</div>
<div>
<input type="checkbox" id="HTC" checked>
<label for="HTC">HTC</label>
</div>
<div>
<input type="checkbox" id="LG" checked>
<label for="LG">LG</label>
</div>
<div>
<input type="checkbox" id="Nokia" checked>
<label for="Nokia">Nokia</label>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function makeTable(data){
console.log(data);
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
return tbl_body;
}
function getPhoneFilterOptions(){
var opts = [];
$checkboxes.each(function(){
if(this.checked){
opts.push(this.id);
}
});
return opts;
}
function updatePhones(opts){
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#phones tbody').html(makeTable(records));
}
});
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getPhoneFilterOptions();
updatePhones(opts);
});
$checkboxes.trigger("change");
</script>
</body>
</html>
submit.php
$pdo = new PDO('mysql:host=localhost;dbname=sitepoint', 'root', '*****');
$opts = $_POST['filterOpts'];
$qMarks = str_repeat('?,', count($opts) - 1) . '?';
$statement = $pdo->prepare("SELECT mobile_phone.id, name, model, price FROM mobile_phone INNER JOIN brand ON brand_id = brand.id WHERE name IN ($qMarks)");
$statement -> execute($opts);
$results = $statement -> fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>
The demo of this code here