评论按钮在jquery函数中不起作用 [英] Reviews button not working in the jquery function

问题描述

我正在开发食品购物网站.我基于ajax调用将我的产品显示在order.php页面上，该调用将在下拉列表中使用默认类别.物品显示在卡片中，每个卡片上都有一个带有评论"类别的评论按钮.但是，当我使用jquery使用按钮进行测试时，页面只是在没有任何操作的情况下重新加载.请帮助我

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 }
  }
  ?>

推荐答案

更改JS功能:

$("form.d-inline select").on('change', 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);
            }
        });     
    });

这篇关于评论按钮在jquery函数中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！