使用 codeigniter 中的按钮打开模态时用户状态发生变化 ajax

Question

我正在开发一个用于设置用户状态的 4 个按钮。

1 = 接受
2 = 无效
3 = 拒绝
4 = 阻止

。我的目标是当我按下“接受按钮”时，用户的状态将设置为 "1"。如果我按 Inactive button，用户状态将设置为 2 等等...希望有人能提供帮助。提前谢谢你。

控制器：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Users extends CI_Controller {

    public function index()
    {
        $users_list = $this->db->select('*')->from('users')->order_by('id','desc')->get()->result(); //here i'm fetching the data form the table
        $this->load->view('users_list',['users_list'=>$users_list]);//load all data in view page
    }
    
    public function user_status_changed()
{
    //get hidden values in variables
    $id = $this->input->post('id');
    $status = $this->input->post('status');

    //check condition
    if($status == '1'){
        $user_status = '0';
        
    }
    
    

    $data = array('status' => $user_status );

    $this->db->where('id',$id);
    $this->db->update('users', $data); //Update status here

    //Create success messsage
    $this->session->set_flashdata('msg',"User status has been changed successfully.");
    $this->session->set_flashdata('msg_class','alert-success');

    return redirect('welcome/users');
}

}

?>

观看次数：

[![<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<?php if($error = $this->session->flashdata('msg')){ ?>

<h3 class="text-success"><?php echo  $error; ?></h3>

<?php } ?>
<table class="table table-bordered table-striped">
    <thead>
        <tr class="btn-primary">
            <th>S.no</th>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php 
            $i = 1;
            foreach ($users_list as $users) {
        ?>
        <tr>
            <td><?php echo $users->id; ?></td>
            <td><?php echo $users->name; ?></td>
            <td><?php echo $users->email; ?></td>
            <td><?php echo $users->phone; ?></td>
            <td><?php echo $users->status; ?></td>
            <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" uid="<?php echo $users->id; ?>" >
  Change status
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <!-- These are my buttons that sets userstatus -->
             <button class="btn btn-success user_status" uid="<?php echo $users->id; ?>"  ustatus="<?php echo $users->status; ?>">Active</button>
            
             <button class="btn btn-primary user_status" uid="<?php echo $users->id; ?>"  ustatus="<?php echo $users->status; ?>">Inactive</button>

             <button class="btn btn-warning user_status" uid="<?php echo $users->id; ?>"  ustatus="<?php echo $users->status; ?>">Deny</button>
             <button class="btn btn-dark user_status" uid="<?php echo $users->id; ?>"  ustatus="<?php echo $users->status; ?>">Block</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

                     
                      <?php } ?>
              </td>
              
          </tr>
        
        
        
    </tbody>
</table>
<script type="text/javascript">
    $(document).on('click','.user_status',function(){

        var id = $(this).attr('uid'); 
        var status = $(this).attr('ustatus'); //get attribute value in variable

        $('#user_id').val(id); //pass attribute value in ID
        $('#user_status').val(status);  //pass attribute value in ID

        $('#modal_popup').modal({backdrop: 'static', keyboard: true, show: true}); //show modal popup

    });
</script>

<!-- Modal For Confirmation -->
<div class="modal modal-danger fade" id="modal_popup">

    <div class="modal-dialog modal-sm">

       
        <form action="<?php echo base_url(); ?>welcome/users/user_status_changed" method="post"> 
             <div class="modal-content">

                <div class="modal-header" style="height: 150px;">

                    <h4 style="margin-top: 50px;text-align: center;">Confirm? </h4>

                   
                    <input type="hidden" name="id" id="user_id" value="">
                    <input type="hidden" name="status" id="user_status" value="">

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-danger pull-left"  data-dismiss="modal">No</button>

                    <button type="submit" name="submit" action="<?php echo base_url(); ?>welcome/users" class="btn btn-success">Yes</button>

                </div>

            </div>

        </form>

    </div>

 </div>][1]][1]

Answer 1

您只需要使用 $(this).closest("form").serialize(); 获取最接近的表单数据，然后只需使用 $(".mybtn").not($this).attr("disabled", false); 启用所有按钮而不是按下的按钮。

$(document).ready(function() {

  //Stops the submit request
  $("#form").submit(function(e) {
    e.preventDefault();
  });

  //checks for the button click event
  $(".mybtn").click(function(e) {
    var $this = $(this)//use as selector
    dataString = $(this).closest("form").serialize(); //get closest form only 
    console.log(dataString)

    /*  $.ajax({
       //your codes
        complete: function(jqXHR, textStatus) {*/

    $this.attr("disabled", true); //set attr disable
    //enable all button not (this)
    $(".mybtn").not($this).attr("disabled", false);
    /* }
    });*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="form">
<button class="btn btn-success user_status mybtn" >Active</button>
 <input type="hidden" name="userStatus" value="1">
 <input type="hidden" name="uid" value="1">

</form>
 
<form name="form"> 
<button class="btn btn-primary user_status mybtn" >Inactive</button>
<input type="hidden" name="userStatus" value="2">
<input type="hidden" name="uid" value="1">
</form>

<form name="form">
<button class="btn btn-warning user_status mybtn" >Deny</button>
<input type="hidden" name="userStatus" value="3">
<input type="hidden" name="uid" value="1">
</form>

<form name="form">
<button class="btn btn-dark user_status mybtn" >Block</button>
<input type="hidden" name="userStatus" value="4">
<input type="hidden" name="uid" value="1">
</form>

用4个按钮打开的模式。

每个按钮只需要 id & hidden value。

<form name="form">
<button class="btn btn-success user_status" >Active</button>
 <input type="hidden" name="userStatus" value="1">
  <input type="hidden" name="uid" value="<?php echo $users->id; ?>">
</form>
 
<form name="form"> 
<button class="btn btn-primary user_status" >Inactive</button>
<input type="hidden" name="userStatus" value="2">
<input type="hidden" name="uid" value="<?php echo $users->id; ?>">
</form>

<form name="form">
<button class="btn btn-warning user_status" >Deny</button>
<input type="hidden" name="userStatus" value="3">
<input type="hidden" name="uid" value="<?php echo $users->id; ?>">
</form>

<form name="form">
<button class="btn btn-dark user_status" >Block</button>
<input type="hidden" name="userStatus" value="4">
<input type="hidden" name="uid" value="<?php echo $users->id; ?>">
</form>

控制器方法代码：

  public function user_status_changed()
{
    //get hidden values in variables
    $id = $this->input->post('uid');
    $status = $this->input->post('userStatus');

    // do update query.
        
}

使用 codeigniter 中的按钮打开模态时用户状态发生变化 ajax

user status change when modal open with buttons in codeigniter ajax

javascript

ajax

jquery

codeigniter

modal-dialog