[英]Codeigniter & AJAX - Reset/clear the modal form when close the edit modal
[英]user status change when modal open with buttons in codeigniter ajax
. 我的目标是当我按下“接受按钮”时,用户的状态将设置为“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">×</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]
你只需要使用$(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>
Controller 方法代码:
public function user_status_changed()
{
//get hidden values in variables
$id = $this->input->post('uid');
$status = $this->input->post('userStatus');
// do update query.
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.