Hi,
New to javascript and php. Perl/MySql is my usual.
Submitting via ajax, to a php script, I can’t seem to get the filtering to work, partly because I can’t access the values being received by php. $_POST[filterOpts]
Here is the html page that submits to the php script
<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;
}
#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;
}
fieldset{
margin-top: 15px;
}
fieldset div{
padding:0 0 5px 0;
}
.amount{
width:50px;
}
pre{
margin:0 0 20px 0;
padding:10px;
color:red;
background: gray;
}
</style>
</head>
<body>
<h1>Filters table</h1>
<table id="phones">
<thead>
<tr>
<th width="15">ID</th>
<th>Brand</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="filter">
<h2>Filter options</h2>
<div>
<input type="checkbox" id="Kenwood">
<label for="Kenwood">Kenwood</label>
</div>
<div>
<input type="checkbox" id="Oxo">
<label for="Oxo">Oxo</label>
</div>
<div>
<input type="checkbox" id="Brabantia">
<label for="Brabantia">Brabantia</label>
</div>
</div>
<div id="debug"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//debug = true;
// function handleDebug(debugInfo){
// $("#debug").html("<pre>" + debugInfo + "</pre>");
// }
function makeTable(data){
var tbl_body = "";
$.each(data, function(k, v) {
var tbl_row = "",
currRecord = this;
//if(k==="debug"){
// if(debug === true){
// handleDebug(v);
// }
// return;
// }
$.each(this, function(k , v) {
if(k==='brand'){
v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
} else if (k==='size'){
v = "<span class='price'>" + v + "</span>";
}
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: "/php-queries/product-catalogue-query.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#phones tbody').html(makeTable(records));
updatePrices();
}
});
}
function subsidyIsValid(){
var amount1 = $("#amount1").val(),
amount2 = $("#amount2").val(),
regex = /^\d+$/,
inputValid = false;
if(regex.test(amount1) && regex.test(amount2)){
var newTotal = Number(amount1) + Number(amount2)
$("#total").text(newTotal);
inputValid = true;
}
return inputValid
}
function updatePrices(){
var subsidyTotal = Number($("#total").text());
$(".price").each(function(){
var origVal = Number($(this).text())
$(this).text(origVal - subsidyTotal)
})
}
var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function(){
var opts = getPhoneFilterOptions();
updatePhones(opts);
});
$("#apply").on("click", function(){
if(subsidyIsValid()){
$(this).prop("disabled", true);
$(this).next().prop("disabled", false);
updatePrices();
} else {
alert("Subsidy invalid!")
}
});
$("#remove").on("click", function(){
$("#amount1").val("");
$("#amount2").val("");
$("#total").text("0");
$(this).prop("disabled", true);
$(this).prev().prop("disabled", false);
$checkboxes.trigger("change");
});
$checkboxes.trigger("change");
updatePrices();
</script> Here is the php code of the receiving php page
$conn = new PDO("mysql:host=$hostname;dbname=$db", $username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$select = 'SELECT id, brand';
$from = ' FROM retailers_product_catalogue';
$where = ' WHERE ';
$opts = $_POST['filterOpts'];
if (empty($opts))
{
// 0 checkboxes checked
$where .= 'TRUE';
}
else
{
if(count($opts) == 1)
{
// 1 checkbox checked
$where .= $opts . " = $opts[0]";
}
}
// else
// {
// // 2+ checkboxes checked
// $where .= implode(' = 1 OR ', $opts) . ' = 1';
// }
$sql = $select . $from . $where;
$statement = $conn->prepare($sql);
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
//$debugInfo = array('debug' => vsprintf(str_replace("?", "%s", $sql->queryString), $opts));
//$results = array_merge($debugInfo, $results);
$json=json_encode($results);
echo($json);
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$conn = null;
The checkboxes that will be used to filter the resultset will be submitting text values (not boolean).
Those values could be Kenwood, Brabantia Oxo or any other brand of Kitchen equipment. I need the filtering portion to bring back from the Db, just those brands selected.
Also, I’ve used the debug and it shows no output unless I force it to do something wrong. So how would I force the output of the $_POST[filterOpts] as they are received into this script? Dump doesn’t display because the triggering script only outputs whats returned in the resultset.
Any assistance would be much appreciated.
Bazz
