samedi 29 février 2020

Reviews button not working in the jquery function

I am developing a shopping website for food items. I have my products displayed on my order.php page based on an ajax call which will take the default category on my dropdown list. The items are displayed in cards each with a review button having class 'reviews'. However, when i am making a test with the button using jquery, the page is simply reloading with no action. Please help me

//order.php

<div id="message">
 </div>

 <div class="container" style="position:relative; top:200px; float:center">

 <div class="collapse" id="filterdiv">

 <form class="d-inline">
    <select id="Category">
        <option value='' selected>All</option>
        <?php 
        $fCategory="SELECT DISTINCT Food_Type from food";
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $res=$conn->query($fCategory);

        if($res->rowCount()>0)
        {
            while($row=$res->fetch(PDO::FETCH_ASSOC))
            {
                echo "<option value=".$conn->quote($row['Food_Type']).">".$row['Food_Type']." 
       </option>";
            }
        }

        ?>


    </select>

    <select id="price">
    <option value="">Price</option>
    <option value="lowtohigh">Low to High</option>
    <option value="hightolow">High to Low</option>
    <
    </select>
  </form> 
  </div>



  <div class="row" id="result">

   </div>
   </div>




<script type="text/javascript" src="Bootstrap4/js/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="Bootstrap4/js/bootstrap.min.js"></script>

<!--Ajax code to get food info-->
<script type="text/javascript">
    $(document).ready(function()
    {

    $("#filterdiv").ready(function(){

        let foodType=$("#Category").val();
        let price=$("#price").val();

        $.ajax({
            url:'action.php',
            method:'post',
            data:{foodType:foodType,price:price},
            success:function(response)
            {
                $("#result").html(response);
            }
        });     
    });


    });

</script>   


   Now for action.php
   if (isset($_POST['foodType']) || isset($_POST['price']))
   {
    $foodType=$price=$priceSort=$foodSort="";

    if (isset($_POST['foodType']))
    {
        $foodType=$_POST['foodType'];
        if ($foodType=='')
        {
            $foodSort='';
        }
        else
        {
            $foodSort="WHERE Food_Type=".$conn->quote($foodType);
        }

    }

    if (isset($_POST['price']))
    {
        $price=$_POST['price'];

        if ($price=="lowtohigh")
        {
            $priceSort="ORDER BY `Food_Price(Rs)` ASC";
        }

        else if ($price=='hightolow')
        {
            $priceSort="ORDER BY `Food_Price(Rs)` DESC";
        }
        else
        {
            $priceSort="";
        }
      }

    $foodDisp="SELECT * FROM food ".$foodSort." ".$priceSort;
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $res=$conn->query($foodDisp);

    while($row=$res->fetch(PDO::FETCH_ASSOC))
    {

        ?>

    <div class="col-lg-3 mx-0">
        <div class="card-deck" style="display:flex; flex:flex-wrap; padding:2px;">
            <div class="card bg-transparent p-2 h-100 border-secondary mx-0 mb-2" style="min- 
         height:35rem;max-height:35rem;">
            <img src="<?= 'foodImages/'.$row['Food_Url'] ?>" class="card-img-top img-fluid img- 
            responsive img-thumbnail" height="100" width="100%">
            <div class="card-body p-1 text-center">

                <h4 class="card-title text-center text-info"><?php echo $row['Food_Name']; ?>
                </h4>
                <h5 class="card-text text-center text-white"><?php echo $row['Food_Description']; 
            ?>
                </h5>
                <h5 class="card-text text-center text-danger"><?php echo "Rs 
               ".$row['Food_Price(Rs)']; ?>
                </h5>
                <button class="btn btn-success reviews">Reviews</button>
            </div>

                <div class="footer p-1">
                    <form action="" class="form-submit">
                    <input type="hidden" class="fid" value="<?php echo $row['Food_Id'] ;?>
                    ">

                    <input type="hidden" class="fname" value="<?php echo $row['Food_Name'] ;?>
                    ">

                    <input type="hidden" class="fprice" value="<?php echo $row['Food_Price(Rs)'] 
           ;?>
                    ">

                    <input type="hidden" class="fimage" value="<?php echo $row['Food_Url'] ;?>
                    ">

                    <input type="hidden" class="ftype" value="<?php echo $row['Food_Type'] ;?>
                    ">

                    <button class="btn btn-info btn-block addItemBtn">Add to cart</button>


                    </form>
                </div>
            </div>
        </div>
    </div>



 <?php }
  }
  ?>



Aucun commentaire:

Enregistrer un commentaire