Vinay Vinay - 15 days ago 4
Ajax Question

Ajax request to the same PHP page gives no errors but doesn't work

I am making a product displaying page of an ecommerce website. The products are to be filtered by brands on the basis of brands that are checked by the customer. For this I have used an ajax request everytime a brand is checked. The problem is that the page cannot receive the get variables that i am sending to the same page. The ajax request is not giving any errors and also the chrome debugger side is also not showing any error at all. This is the page:
snapshot of the products page

And this is the code of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<?php
session_start();
include('includes/pdo_connect.php');
include('includes/pdo_functions.php');


$logged_in;
$user_first_name;

if(isset($_SESSION['user'])){ //Determining if the user is logged in or not.
if($_SESSION['user']=='user'){
$user_id = $_SESSION['user_id'];
global $logged_in;
$logged_in = true;
global $user_first_name;
$user_first_name = $_SESSION['user_first_name'];
}
} else {
$_SESSION['user'] = 'guest';
$user_id = $_SERVER['REMOTE_ADDR'];
}

$cat;

if(isset($_GET['cat'])){
global $cat;
$cat = $_GET['cat'];
}


include('includes/logged_in.php');



if(isset($_GET['brand_list'])){
$brand_list = $_GET['brand_list'];

} else {
echo "<script>alert('value not received');</script>";
}


?>
<html>
<head>
<title></title>


<link rel="stylesheet" type="text/css" href="styles/list_style.css?<?php echo time(); ?>">
<link rel="stylesheet" type="text/css" href="styles/thickbox.css" media="screen">

<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

<?php


$where = array();

if(!empty($brand_list)){
echo "ajax working";
if(strpos($brand_list, ',')!==false){
$brand_choices = explode(',', $brand_list);
$barray = array();
foreach($brand_choices as $value) {
$barray[] = "brand_id = $value";
}
$where[] = '('.implode(' OR ', $barray).')';
} else {
$where[] = '(brand_id= '.$brand_list.')';
}
} else {
//echo "ajax not working ";
}

$w = implode(' AND ', $where);

$w = "where product_cat=$cat ".$w;


$filter_query = "select * from products $w ";
echo "filter query: ".$filter_query;

$first_load = 'filter';

function show_filtered(){
//echo "<script>alert('filter query working');</script>";
global $filter_query;
global $con;
global $brand_name;

try{

$stmt = $con->prepare($filter_query);

$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $data) {

$product_id = $data['product_id'];
$product_cat = $data['product_cat'];
$product_brand = $data['product_brand'];
$product_title = $data['product_title'];
$product_price = $data['product_price'];
$product_desc = $data['product_desc'];
$product_image = $data['product_image'];

echo "
<div class='product_container $brand_name'>
<a href='details.php?pid=".$product_id."' alt='".$product_title."'>
<div class='img_div'>
<img src='admin/product_images/".$product_image."?".time()."' alt='".$product_title."'/>
</div>
<div class='index_product_desc'>".$product_title."</div>
<div class='index_product_price'>&#8377;".$product_price."</div>
</a>
</div>
";
}

} catch(PDOException $e){
echo "Error in show_list(): ".$e->getMessage();
}

}


function show_brands(){
global $con;
global $cat;
global $brand_name;

try{
$query = "select * from cat_brand where cat_id = $cat";

$stmt = $con->prepare($query);

$stmt->execute();

$result = $stmt->fetchAll();

//$brand = array();

foreach ($result as $data) {
$brand_id = $data['brand_id'];

//echo "<script>alert('$brand_id');</script>";

$query1 = "select * from brands where brand_id = $brand_id";

$stmt1 = $con->prepare($query1);

$stmt1->execute();

$result1 = $stmt1->fetchAll();

echo "<ul>";

foreach ($result1 as $data1) {
$brand_name = $data1['brand_title'];

echo "<li><input type='checkbox' value='$brand_id' id='$brand_name' class='brand_check' name='brandchoice'>&nbsp;$brand_name</li>";

}

echo "</ul>";
}
} catch(PDOException $e){
echo "Error in show_brands: ".$e->getMessage();
}
}

function show_price(){

}
?>


</head>
<body>

<div class="wrapper">
<header>
<div class="home_logo">
<a href="index.php">
<img src="images/skyshop_sumopaint.png" alt="Site Home">
</a>
</div>
<div class="login">
<a href=""><?php user();?></a>&nbsp;&nbsp;&#124;&nbsp;
<a href="register.php"><?php login_status(); ?></a>
</div>
<div class="form">
<form method="get" target="" name="searchbar_form">
<input type="text" name="searchbar" id="searchbar">
<input type="submit" id="search_button" value="Search">
</form>
</div>
</header>
<div class="menubar">

<div class="dropdown">
<button onclick="dropdownToggle()" class="dropdown-button">Shop By Category</button>
<ul class="dropdown-content" id="dropdownContent">
Categories
<?php getcats(); ?>
</ul>
</div>
<div class="menubar-div">
<ul class="menu-items">
<?php getcats(); ?>
</ul>
</div>
<div class="cart">
<a href="cart.php">Cart (0)</a>
</div>
</div>

<div class="content">
<div class="nav">

</div>
<div class="list_wrapper">

<!--/////////////////////////////////////////////// Filter div /////////////////////////////////////////////////////-->

<div class="filter">


<span class="filter_heading">Select Brands</span>
<a href="" class="clear" id="clear_brands">Clear<a>

<div class="brand_div">
<?php
show_brands();
?>
</div>

<div class="price_div">

</div>
</div>

<!--/////////////////////////////////////////////// List div ///////////////////////////////////////////////////////-->

<div class="list">
<div class="loading">
<img src="images/loadingAnimation.gif">
</div>
<?php
show_filtered();
?>
</div>
</div>


<div class="footer">
FOOTER
</div>
</div>
</div>


<?php


?>
<script type="text/javascript">

$(window).on('load', function(){

function filter(){
//alert("filter called");

$('.filter .list').css('opacity', 0.5);
$('.loading').css('visibility', 'visible');

var brandchoice = new Array();
$('input[name="brandchoice"]:checked').each(function(){
brandchoice.push($(this).val());
$('#clear_brands').css('visibility', 'visible');
});
if(brandchoice==""){
$('#clear_brands').css('visibility', 'hidden');
}
var brand_list = '&brand_list='+brandchoice;


var data = brand_list.substring(1, brand_list.length);
//alert(data);

$.ajax({
url: "list.php",
type: "GET",
data: data,
cache: false,
success: function(result){

$(".filter .list").css("opacity", 1);
$(".loading").css("visibility", "hidden");
},
error: function(jqxhr, exception){
console.log(jqxhr);
},
beforeSend: function(){
console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
}
});

}

$('input[type="checkbox"]').on('change', filter);

$('#clear_brands').on('click', function(){
$('.brand_check').removeAttr('checked');
filter();
$('#clear_brands').css('visibility', 'hidden');
});


}); //end of jquery

</script>
</body>
</html>


I am using alert() in the beforeSend in the ajax request and it returns the correct data as expected. But the PHP section of the page does not received the values. There are no errors on the PHP side or the browser debug window.

Answer

I checked your code line by line. and figure out that you have code for ajax inside the function named "filter" function filter().

Now you are calling this filter function on by onclick event of the element with id clear_brands

$('#clear_brands').on('click', function(){
    $('.brand_check').removeAttr('checked');
          filter();
     $('#clear_brands').css('visibility', 'hidden');
});

and by this code i came to know that at the end your ajax call is not being made because you click event was not triggered,

So either you should trigger this event on your document get ready or you have to do it by clicking on that element.

Just think about the flow once.

i was testing your script in my local and with some modification i have made it working.

did some changes like

at the end of the script i just putted this code below.

$(document).ready(function(){
     $('#clear_brands').trigger("click");
});

And ajax call was executed..

check out my entire HTML

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <a href="" class="clear" id="clear_brands">Clear<a>
        <script type="text/javascript">

            $(window).on('load', function(){

                function filter(){
                    //alert("filter called");

                    $('.filter .list').css('opacity', 0.5);
                    $('.loading').css('visibility', 'visible');

                    var brandchoice = new Array();
                    $('input[name="brandchoice"]:checked').each(function(){
                        brandchoice.push($(this).val());
                        $('#clear_brands').css('visibility', 'visible');
                    });
                    if(brandchoice==""){
                        $('#clear_brands').css('visibility', 'hidden');
                    }
                    var brand_list = '&brand_list='+brandchoice;


                    var data = brand_list.substring(1, brand_list.length);
                    //alert(data);

                    $.ajax({
                        url: "list.php",
                        type: "GET",
                        data: data,
                        cache: false,
                        success: function(result){

                            $(".filter .list").css("opacity", 1);
                            $(".loading").css("visibility", "hidden");
                        },
                        error: function(jqxhr, exception){
                            console.log(jqxhr);
                        },
                        beforeSend: function(){
                            console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
                        }
                    });

                }

                $('input[type="checkbox"]').on('change', filter);

                $('#clear_brands').on('click', function(){
                    $('.brand_check').removeAttr('checked');
                    filter();
                    $('#clear_brands').css('visibility', 'hidden');
                });


            }); //end of jquery

            $(document).ready(function(){
                    $('#clear_brands').trigger("click");
            });
        </script>
    </body>
</html>