#javascript #jquery #ajax #codeigniter #modal-dialog
#javascript #jquery #ajax #codeigniter #модальный диалог
Вопрос:
Я работаю над 4 кнопками, где он устанавливает userstatus.
- 1 = Принять
- 2 = Неактивный
- 3 = отказано
- 4 = Блок
. Моя цель — когда я нажимаю кнопку «Принять», статус пользователя будет установлен на «1». Если я нажму неактивную кнопку, userstatus будет установлен на 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">amp;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]
Комментарии:
1. пожалуйста, уточните, что это означает, укажите ваш запрос, а также это проблема javascript или проблема php
2. Проблема с Php. Спасибо
3. этот модальный режим откроется при нажатии на
user status
?4. ДА. Он откроет модальный и появятся 4 кнопки.
5. теперь, что вы хотите??
Ответ №1:
вам просто нужно использовать $(this).closest("form").serialize();
для получения ближайших данных формы, а затем просто использовать $(".mybtn").not($this).attr("disabled", false);
для включения кнопки all, а не кнопки, которая нажата.
$(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
amp; 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.
}