In my Laravel
web application I am using datatable
to show data. My table has 3 actions to view
, edit
and delete
. For edit and view I am using Bootstrap 4
modal.
Here is a view of data table..
Here is my ajax request code to edit on modal:
$.ajax({
type:'GET',
url:"{{route('user.edit')}}",
data:{'id':user_id},
success:function(data){
var role;
if(data.role_id == 1){
role = 'Admin';
}else if(data.role_id == 2){
role = 'Seller';
}else{
role = 'Publisher';
}
$(header).empty();
$(header).append('<h3>'+data.details.name+'\'s details</h3>');
$('#name').empty();
$('#name').val(data.details.name);
$('#email').empty();
$('#email').val(data.details.email);
$('#contact').empty();
$('#contact').val(data.details.contact);
$('#address').empty();
$('#address').val(data.details.address);
$('#user_id').empty();
$('#user_id').val(data.details.id);
$.each(data.roles, function(index,val){
if(data.details.role_id == val.id)
var selected = 'selected';
$('#role').append('<option '+selected+' value="'+val.id+'">'+val.role_name+'</option>');
});
}
});
Now everything works fine for the first page. But when I search something in datatable
or go to another page through pagination, my ajax request does not work. I am using class to call the ajax request. When I go to another page or search a data and click on edit, Only the modal opens the ajax request does not initiate and it shows empty modal. How can I solve this issue?
$(document).on('click', '.your_button', function(){
//code for action
});
event handler only handle to those elements which exists in the dom when the code was executed so need to use delegation based event handler. try this
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.