时间戳

首页 > 解决方案 > Ajax Javascript 在不刷新页面的情况下不会改变样式

javascript - Ajax Javascript 在不刷新页面的情况下不会改变样式

问题描述

我必须创建一个网页，允许收件人保留可用的餐点或删除它们（如果它们以前被保留），如果餐点被保留，那么它的样式必须改变。

但是我一直面临这个问题，除非我刷新页面，否则（餐点名称）的样式不会改变。另外，当我单击保留时，数据库会更新并显示删除按钮，但它会被禁用，除非我刷新页面，否则我无法再单击它。

这是收件人主页的 Ajax Javascript 部分：


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" > </script>
  <script>
      
      $(document).ready(function(){

           //when remove button is clicked 
          $(".rmvJQ").click(function(){
           
             var classIdValue =  this.value;
             var toResvBtn = "#" + classIdValue +"toResvBtn";
             var ToRmv = "#" + classIdValue +"ToRmv";
                    //  var styleM = "#" + classIdValue +"toStyle";

             
             
          $.get("rmov.php", {classID : classIdValue},
          function(response){
              var opeartion = "success";
              if(response == opeartion){
                  alert("The remove operation was failed");
              }else{
                 // alert(classIdValue); 
             }
             
           $("#RemovedSt").css("background-color");
           $(toResvBtn).html("<button class ='rsvJQ'  value ="+classIdValue+" >Reserve</button>");  
           $(ToRmv).html("");      
          
    });
});
    
       //when reserve button is clicked 
      $(".rsvJQ").click(function(){
            
            var classIdValue =  this.value;
            var toResevededString = "#" +classIdValue + "toResevededString";
            var tormovBtn = "#" + classIdValue + "tormovBtn";
            var ReservedSt = "#" + classIdValue + "ReservedSt";

         $.get("rsv.php", {classID : classIdValue},
          function(response){
               var opeartion = "success";
              if(response == opeartion){
                  alert("The reseve operation was failed");
              }else{
                  alert("The reseve operation was successful!"); 
             }   
             
              $(ReservedSt).css({"background-color": "yellow", "font-size": "200%"});
              $(toResevededString).html("Reserved");
              $(tormovBtn).html("<button class ='rmvJQ' value = '"+classIdValue+"' >Remove</button>");   
    });
   });
  });

        </script>

这是同一页面的 php/html 部分

        
<?php
        
        $error= mysqli_connect_errno();
        if($error!=null){
            echo "<p>unable to connect with db</p>";
            exit($output);
        }
        else 
        {
        $sql="SELECT * FROM restaurant";
        $res=mysqli_query($con,$sql);


        while($row=mysqli_fetch_assoc($res)){
             $restaurantID=$row['id'];
             $sql="SELECT * FROM meal WHERE restaurant_id=".$restaurantID;
             $meals=mysqli_query($con,$sql);
             $check = mysqli_num_rows($meals);
             if($check>0){

        //list of meals for each restaurant
        echo '<table id= "mealsList">';
        echo '<thead>';
        echo '<tr>';
        echo "<caption>".$row['name']."</caption>" ;    
        echo "<tr ><th > Meals </th>"
         . "<th colspan='2' > Status </th>"
         ."<br><br></tr>";

        echo'</thead>';
//each meal 

echo'<tbody>';
                  
           $resv=array(); //reserved meals   
           $remv=array(); //removed meals       
           while($row=mysqli_fetch_assoc($meals)){
           $sql4="SELECT * FROM reservation WHERE meal_id=".$row['id']." AND recipient_id=".$_SESSION['recipient_id'];
           $res4=mysqli_query($con,$sql4);
           $row4=mysqli_fetch_assoc($res4);
            if($row4){
                 $resv[]=$row;
             }
             else{
               $remv[]=  $row;
             }
           }
             $i=0;
             while($i<count($resv) ){
                 echo '<tr >';
                 echo '<td id="'.$resv[$i]['id'].'ReservedSt" ><a style="background-color:#00ff00" href="MealInfo.php?mealID='.$resv[$i]['id'].'">'.$resv[$i]['name'].''.'</a> </td>';
                 echo '<td id="'.$resv[$i]['id'].'toResvBtn">Reserved</td>';
                 echo '<td id="'.$resv[$i]['id'].'ToRmv"><button class = "rmvJQ" value = "'.$resv[$i]['id'].'" >Remove</button></td>';
                 echo '</tr>';
                 $i++;
              }
               $i=0;
             while($i<count($remv)){
                $checkZero = mysqli_query($con,"SELECT qty FROM meal WHERE id =".$remv[$i]['id']);
                $checkZ=mysqli_fetch_assoc($checkZero);

             if($checkZ['qty']>0){
                 echo '<tr id="RemovedSt" style="background-color:white" >'
                . '<td  ><a href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a></td>' //<a href="enroll.php?classID='.$row['id'].'">Enroll</a>
                . '<td id= "'.$remv[$i]['id'].'toResevededString"> <button class = "rsvJQ" value = "'.$remv[$i]['id'].'" >Reseve</button> </td>'
                . '<td id = "'.$remv[$i]['id'].'tormovBtn"></td>'
                . '</tr>';
                 
             }else{
                 
                 echo '<tr>';
                 echo '<th ><a style="color:black;" href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a> </th>';
                 echo '<td colspan="2" >  meal is not available   </td >';
                 echo '</tr>';
             }
                 $i++;
             }//end of while loop
             
echo '</tbody>';
echo '</table>';
        }//end of if($check>0)
     }//end of big while
 }//end of big if-else
?>

收件人主页的图片，其中包含每家餐厅及其可用餐点

那么有没有人遇到过这个问题或知道如何解决它？

标签： javascriptphphtmljqueryajax

解决方案

考虑以下。

配置 PHP 以创建以下HTML结构。

<table id="mealsList">
  <thead>
    <tr>
      <caption>Vendor Name 1</caption>
    <tr>
      <th>Meals</th>
      <th>Status</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr id="item-1001">
      <td class="mealName">
        <a class="highlight-green" href="MealInfo.php?mealID=1001">Meal Item 1</a>
      </td>
      <td class="mealStatus">Reserved</td>
      <td class="mealOptions">
        <button class="btn btn-remove">Remove</button>
      </td>
    </tr>
    <tr id="item-1002">
      <td class="mealName">
        <a class="highlight-green" href="MealInfo.php?mealID=1002">Meal Item 2</a>
      </td>
      <td class="mealStatus">Reserved</td>
      <td class="mealOptions">
        <button class="btn btn-remove">Remove</button>
      </td>
    </tr>
    <tr id="item-1003">
      <td class="mealName">
        <a class="highlight-green" href="MealInfo.php?mealID=1003">Meal Item 3</a>
      </td>
      <td class="mealStatus">Reserved</td>
      <td class="mealOptions">
        <button class="btn btn-remove">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

您可以在这里看到，在 HTML 结构中，我们将项目 ID 分配给行而不是行的每个部分。当我们稍后需要分配事件回调时，这使得它更加相关。有一个参考点。

然后应用以下CSS

#mealsList {
  width: 340px;
}

.highlight-green {
  background-color: #00ff00;
}

.highlight-yellow {
  background-color: yellow;
}

.big {
  font-size: 200%;
}

这使您可以更轻松地在元素上添加或删除类，而不是更改特定样式。这也使得将来更容易管理更改，您只需更新 CSS，然后不必调整您的 PHP 或 JS 代码。

JavaScript

$(function() {
  function removeItem(id) {
    $.get("rmov.php", {
        classID: id,
        html: "success"
      },
      function(response) {
        if (response == "success") {
          console.log("Remove Successful");
          $("#item-" + id + " .mealName a").removeClass("highlight-green");
          $("#item-" + id + " .mealStatus").html("");
          $("#item-" + id + " .mealOptions .btn").html("Reserve").toggleClass("btn-remove btn-reserve");
        }
      });
  }

  function reserveItem(id) {
    $.get("rsv.php", {
        classID: id,
        html: "success"
      },
      function(response) {
        if (response == "success") {
          console.log("Reserve Successful");
          $("#item-" + id + " .mealName a").addClass("highlight-yellow big");
          $("#item-" + id + " .mealStatus").html("Reserved");
          $("#item-" + id + " .mealOptions .btn").html("Remove").toggleClass("btn-remove btn-reserve");
        }
      });
  }

  $("#mealsList").on("click", ".btn-remove", function(event) {
    removeItem($(this).closest("tr").attr("id").split("-")[1]);
  });

  $("#mealsList").on("click", ".btn-reserve", function(event) {
    reserveItem($(this).closest("tr").attr("id").split("-")[1]);
  });
});

工作示例：https ://jsfiddle.net/Twisty/wLzakshp/9/

首先，我们想.on()在这个用例中使用 jQuery 来分配事件回调。这是因为可能会添加或更改元素，而这种类型的分配对此很有用。

委托事件处理程序的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件处理程序来避免频繁附加和删除事件处理程序的需要。

查看更多：https ://api.jquery.com/on/

我使用函数让重复特定动作变得更容易一些。这些函数接受 ID（来自 Row）并将该详细信息发送到适当的脚本。如果成功，则进行特定更改。

推荐阅读