I am trying to make an AJAX filter for car list and I got stuck in the last stage. I have two files, index.php and filter.php.
In index.php I have form with drop-down lists and sliders. Code for sending the form is as follows:
$(document).ready(function(){
$("#send").click(function(){
var salon=$("#salon-list").val();
var make=$("#make-list").val();
var model=$("#model-list").val();
var cenaLow=$("#cenaLow").val();
var cenaHigh=$("#cenaHigh").val();
var tachometrLow=$("#tachometrLow").val();
var tachometrHigh=$("#tachometrHigh").val();
var palivo=$("#palivo-list").val();
var karoserie=$("#karoserie-list").val();
var prevodovka=$("#prevodovka-list").val();
var pohon=$("#pohon-list").val();
var barva=$("#barva-list").val();
var dvere=$("#dvere-list").val();
var objem=$("#objem-list").val();
var stav=$("#stav-list").val();
$.ajax({
type:"post",
url:"filter.php",
data:"salon="+salon+"&make="+make+"&model="+model+"&cenaLow="+cenaLow+"&cenaHigh="+cenaHigh
+"&tachometrLow="+tachometrLow+"&tachometrHigh="+tachometrHigh+"&palivo="+palivo+"&karoserie" +
"="+karoserie+"&prevodovka="+prevodovka+"&pohon="+pohon+"&barva="+barva+"&dveře="+dvere+"&objem" +
"="+objem+"&stav="+stav,
success:function(data){
$("#result").html(data);
}
});
});
});
In the filter.php file I get the data from $_POST and then I search through database. After that I want to echo results into #result div but it does not work. Any echo statement doesn't work, variables I want to list aren't empty, I checked.
echo 'iAmHere'; /*just checking*/
$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);
echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/
echo "<script>window.alert('".$_POST["make"]."');</script>"; /*another checking, this works*/
Thanks for any help.
From here:
JavaScript inserted as DOM text will not execute.
And this says:
You have to use eval() to execute any script code that you've inserted as DOM text.
So you can try an alternate approach to test your code (though I've not tested).
In filter.php:
<?php
$post["salon"] = htmlspecialchars($_POST["salon"]);
$post["make"] = htmlspecialchars($_POST["make"]);
$post["model"] = htmlspecialchars($_POST["model"]);
$post["cenaLow"] = htmlspecialchars($_POST["cenaLow"]);
$post["cenaHigh"] = htmlspecialchars($_POST["cenaHigh"]);
$post["rokLow"] = htmlspecialchars($_POST["rokLow"]);
$post["rokHigh"] = htmlspecialchars($_POST["rokHigh"]);
$post["tachometrLow"] = htmlspecialchars($_POST["tachometrLow"]);
$post["tachometrHigh"] = htmlspecialchars($_POST["tachometrHigh"]);
$post["palivo"] = htmlspecialchars($_POST["palivo"]);
$post["karoserie"] = htmlspecialchars($_POST["karoserie"]);
$post["prevodovka"] = htmlspecialchars($_POST["prevodovka"]);
$post["pohon"] = htmlspecialchars($_POST["pohon"]);
$post["barva"] = htmlspecialchars($_POST["barva"]);
$post["dvere"] = htmlspecialchars($_POST["dvere"]);
$post["objem"] = htmlspecialchars($_POST["objem"]);
$post["stav"] = htmlspecialchars($_POST["stav"]);
echo $post["make"];
In index.php:
$.ajax({
...
success:function(res){
$("#result").html(res);
alert(res);
}
});
Try this :
$(document).ready(function(){
$("#send").click(function(){
var salon=$("#salon-list").val();
var make=$("#make-list").val();
var model=$("#model-list").val();
var cenaLow=$("#cenaLow").val();
var cenaHigh=$("#cenaHigh").val();
var tachometrLow=$("#tachometrLow").val();
var tachometrHigh=$("#tachometrHigh").val();
var palivo=$("#palivo-list").val();
var karoserie=$("#karoserie-list").val();
var prevodovka=$("#prevodovka-list").val();
var pohon=$("#pohon-list").val();
var barva=$("#barva-list").val();
var dvere=$("#dvere-list").val();
var objem=$("#objem-list").val();
var stav=$("#stav-list").val();
var data= {
make: make,
model: model,
cenaLow: cenaLow,
cenaHigh: cenaHigh,
tachometrLow: tachometrLow,
tachometrHigh: tachometrHigh,
palivo: palivo,
karoserie: karoserie,
prevodovka: prevodovka,
pohon: pohon,
barva: barva,
objem: objem,
stav : stav
};
$.ajax({
type:"post",
url:"filter.php",
data:data,
success:function(data){
$("#result").html(data);
}
});
});
});
Try this:
die('<p class="make">'.$post["make"].'</p>');
or
echo '<p class="make">'.$post["make"].'</p>';exit;
instead of
echo '<p class="make">'.$post["make"].'</p>'; /*does not work*/
echo "<script>window.alert('".$_POST["make"]."');</script>"; /*another checking, this works*/
It does not work without an exit. I do not know why but it should do the trick. Also, your code has a lot of room for improvement. Do keep looking for better ways to enhance your skills!! Enjoy!!