status update on nested statement partially working

user_8607509 0
Viewed 57

Please I need help to figure out why my code below isn't working. I'm not very good at PHP and ajax to start with but find it difficult to figure out why the code below wouldn't function properly.

What it does: changes data in database to 'Disable' but to update to 'Enable' on-click wouldn't work. Please help!

status.php

<?php
session_start();
include_once'connectdb.php';

if($_SESSION['useremail']=="" OR $_SESSION['role']=="User"){
    
    
    header('location:index.php');
}



$select=$pdo->prepare("select * from tbl_user  order by userid desc");      
    $select->execute();       
    while($row=$select->fetch(PDO::FETCH_OBJ)  ){

        if (isset($_POST['ridd'])){
            
            $id=$_POST['ridd'];
            
            if($row->user_status == 'Enable'){
                $status_str="Disable";
                $sql="UPDATE `tbl_user` SET `user_status` = ? WHERE  userid= ? ";
                $update=$pdo->prepare($sql);
                $update->execute([$status_str, $id]);

            }else if($row->user_status == 'Disable'){
                $status_str2="Enable";
                $sql="UPDATE `tbl_user` SET `user_status` = ? WHERE  userid= ? ";
                $update=$pdo->prepare($sql);
                $update->execute([$status_str2, $id]);

            }else{
              echo'Internal loop error in Updating';  
            }
        }
    
    }

registration.php

<script>
    $(document).ready(function() {
    $('.switch').click(function() {
            var tdh = $(this);
            var id = $(this).attr("id");
        
        swal({
      title: "Do you want to Change user status?",
      text: "Once changed, it can be reversed!",
      icon: "info",
      buttons: true,
      dangerMode: true,
    }).then((willDelete) => {
      if (willDelete) {

       $.ajax({
                            url: 'status.php',
                            type: 'POST',
                            data: {
                            ridd: id
                            },
                            success: function(data) {
                            //tdh.parents('tr').load;
                            
                            }
                        });
                 swal("User status has been changed!", {icon: "success",});
                    window.location.reload(true);
        
      } else {
        swal("No action performed!");
          window.location.reload(true);
      }
});
        });
    });

</script>

here is my table code in registration.php

 <tbody>
        
    <?php
        $select=$pdo->prepare("select * from tbl_user  order by userid desc");      
        $select->execute();       
            while($row=$select->fetch(PDO::FETCH_OBJ)  ){
                
                $status='Disable';
                $colour="btn-danger";
                if($row->user_status == 'Enable'){
                            $status='Enable';
                            $colour="btn-success";
                        }
                echo'
                <tr>
                <td>'.$row->userid.'</td>
                <td>'.$row->username.'</td>
                <td>'.$row->user_status.'</td>
                <td>
                    <div id='.$row->userid.' class="switch">
                        <button type="button" class="btn '.$colour.'">'.$status.'</button>
                    </div>
                </td>

                <td>
                    <button id='.$row->userid.' class="btn btn-danger btndelete" ><span class="glyphicon glyphicon-trash" style="color:#ffffff" data-toggle="tooltip"  title="Delete User"></span></button>  
                </td>

                 </tr>
                 ';

            }          
?>        
                
 </tbody>

When I click on button 'switch', I'm able to perform a toggle function so that it can update either 'Enable' or 'Disable' on my database. At the moment, only the disable is working and I have to manually enable the user from the database (phpmyadmin).

php ajax
1 Answers

You can check if the button which is clicked has class btn-success if yes then now we need disable it or else enable so send this as well in your ajax call and at your backend get it using $_POST["status"] and update same . Also, you don't need to reload page instead inside your success function of ajax just change the button using .html().

Demo code :

$(document).ready(function() {
  $('.switch').click(function() {
    var tdh = $(this);
    var id = $(this).attr("id");
    swal({
      title: "Do you want to Change user status?",
      text: "Once changed, it can be reversed!",
      icon: "info",
      buttons: true,
      dangerMode: true,
    }).then((willDelete) => {
      if (willDelete) {
        var button_status = $(this).find("button").hasClass("btn-success") ? "Disable" : "Enable"; //check if button has success means we need disable it now else enable .
        /*$.ajax({
          url: 'status.php',
          type: 'POST',
          data: {
            ridd: id,
            status: button_status //send to chnage 
          },
          success: function(data) {*/
        //if disable
        if (button_status == "Disable") {
          $("#" + id).html("<button type='button' class='btn btn-danger '>Disable</button>") //put enable button
          tdh.closest("tr").find("td:eq(2)").text("Disable")
        } else {
          $("#" + id).html("<button type='button' class='btn btn-success '>Enable</button>") //disable buttn
           tdh.closest("tr").find("td:eq(2)").text("Enable")
        }

        /*  }
        });*/
        swal("User status has been changed!", {
          icon: "success",
        });

      } else {
        swal("No action performed!");

      }
    });
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
<table class="table">
  <tbody>

    <tr>
      <td>1</td>
      <td>sw</td>
      <td>Enable</td>
      <td>
        <div id='1' class="switch">
          <button type="button" class="btn btn-success ">Enable</button>
        </div>
      </td>

      <td>
        <button id='1' class="btn btn-danger btndelete"><span class="glyphicon glyphicon-trash" style="color:#ffffff" data-toggle="tooltip"  title="Delete User"></span></button>
      </td>

    </tr>

    <tr>
      <td>2</td>
      <td>sw</td>
      <td>Disable</td>
      <td>
        <div id='2' class="switch">
          <button type="button" class="btn btn-danger ">Disable</button>
        </div>
      </td>

      <td>
        <button id='2' class="btn btn-danger btndelete"><span class="glyphicon glyphicon-trash" style="color:#ffffff" data-toggle="tooltip"  title="Delete User"></span></button>
      </td>

    </tr>

  </tbody>
</table>

user_106064000
Related