如何为多个按钮分配ajax变量

时间:2019-04-01 03:29:31

标签: php sql ajax

我有一个带php的ajax代码和一个SQL,其中我尝试使三个按钮根据值更改“预定”列的名称:是(1),否(0),已取消(2)。 / p>

计划的按钮具有数据目标和数据角色。单击后,将出现一个模态,其中包含三个按钮(是,否,已取消),每个按钮都有其自己的唯一ID用于ajax。

我对ID名称分别具有三个函数,每个函数的var分别为0、1或2。

问题在于这些变量不会触发更新。

我只有2个文件:index.php用于主要代码,connection.php用于数据库链接和sql更新。

表输出 table

模式

modal

数据库(ajax_test)

ajax_test

index.php(表)

 <?php
        $table  = mysqli_query($connection ,'SELECT * FROM user');
        while($row  = mysqli_fetch_array($table)){ ?>
            <tr id="<?php echo $row['id']; ?>">
              <td data-target="email"><?php echo $row['email']; ?></td>

              <td data-target="scheduled">

              <?php
                if ($row['scheduled'] == 1) {
               ?>

              <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">YES</a>

             <?php
               } else if ($row['scheduled'] == 0) {
               ?>

              <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">NO</a>

             <?php
           } else if ($row['scheduled'] == 2) {
               ?>

              <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">CANCELLED</a>

             <?php } ?> </td> </tr> <?php } ?>

index.php(模式弹出窗口)

    <!-- Modal-->
    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

   <!-- Modal content-->
   <div class="modal-content" style="width: 300px; margin: 0 auto;">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
     </div>
     <div class="modal-body">
       <div class="form-group">
         <a href="#" id="update_yes" class="btn btn-success text-center center-block">YES</a><br>
         <a href="#" id="update_no" class="btn btn-danger text-center center-block">NO</a><br>
         <a href="#" id="update_cancelled" class="btn btn-warning text-center center-block">CANCEL</a>
       </div>

     </div>
   </div>

 </div>

index.php(ajax)

 <script>
  $(document).ready(function(){

   $(document).on('click','a[data-role=update]',function(){
         var id  = $(this).data('id');
         var scheduled  = $('#'+id).children('td[data-target=scheduled]').text();

         $('#scheduled').val(scheduled);
         $('#userId').val(id);
         $('#myModal').modal('toggle');
   });


 $('#update_no').click(function(){
    var id  = $('#userId').val();
    var scheduled = $('0').val();

    $.ajax({
        url      : 'connection.php',
        method   : 'post',
        data     : {scheduled: scheduled , id: id},
        success  : function(response){
                      // now update user record in table
                       $('#'+id).children('td[data-target=scheduled]').text(scheduled);
                       $('#myModal').modal('toggle');

                   }
    });
 });

 $('#update_yes').click(function(){
    var id  = $('#userId').val();
    var scheduled = $('1').val();

    $.ajax({
        url      : 'connection.php',
        method   : 'post',
        data     : {scheduled: scheduled , id: id},
        success  : function(response){
                      // now update user record in table
                       $('#'+id).children('td[data-target=scheduled]').text(scheduled);
                       $('#myModal').modal('toggle');

                   }
    });
 });

 $('#update_cancelled').click(function(){
    var id  = $('#userId').val();
    var scheduled = $('2').val();

    $.ajax({
        url      : 'connection.php',
        method   : 'post',
        data     : {scheduled: scheduled , id: id},
        success  : function(response){
                      // now update user record in table
                       $('#'+id).children('td[data-target=scheduled]').text(scheduled);
                       $('#myModal').modal('toggle');

                   } }); }); }); </script>

connection.php

<?php
$connection =   mysqli_connect('localhost' , 'root' ,'' ,'ajax_test');

if(isset($_POST['id'])){

    $id = $_POST['id'];
    $scheduled = $_POST['scheduled'];

    $result  = mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
}
?>

我想知道ajax函数出了什么问题,我们将不胜感激。

1 个答案:

答案 0 :(得分:0)

首先,您可以简单地简化其中的一部分

var scheduled = 0;

您正尝试通过以下方式获取用户ID:

var id  = $('#userId').val();

您没有显示任何id =“ userId”的元素

代替使用:

$(this).attr("data-id")

一旦获得了data-id值和模态中的值,就可以使用框值进行ajax调用,并将其传递给连接以更新db记录。