I have this table:
$(".deleteProduct").click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var id = $(this).data("id");
$.ajax(
{
url: "client/"+id,
type: 'delete',
dataType: "JSON",
data: {
"id": id
},
success: function (response)
{
$("#reload_table").load(window.location + " #reload_table");
}
});
});
Simply after delete first one test2 everything is good and reload the part of table, but when I go to delete test1 it does not delete it, I have to reload the whole page then delete it!
I'm use this for reload the table but it reload for just one time!:
$("#reload_table").load(window.location + " #reload_table");
How can I make it reload table ?
I'm not using any library like datatable etc, it just simple bootstrap table.
Alternative : Remove tr after ajax success
#forelse($users as $user)
//...
<tr id="{{ $user->id }}">...</tr>
//...
#empty
<p>No data Available</p>
#endforelse
//js
$(".deleteProduct").click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var id = $(this).data("id");
$.ajax(
{
url: "client/"+id,
type: 'delete',
dataType: "JSON",
data: {
"id": id
},
success: function (response)
{
$('#'+id).remove();
}
});
});
Since you are binding the event to an element inside the table row, you should be able to simply delete the table row by finding the closest tr to that element:
$(this).closest('tr').remove();
Related
I'm using ajax to send comments. This is the route
Route::post('/users/add/comment/', 'UsersController#AddComment')->name('AddComment');
The ajax call
function SendAny(){
$.ajax({
url: '/users/add/comment/',
data: {
"_token": "{{ csrf_token() }}",
"content": 'ksdflsdfnnkn',
},
type: 'post',
success: function(result) {
if (result == 0) {
location.reload();
} else {
alert("this an ereor")
}
}
});
}
and the controller
public function AddComment(Request $request){
dd($request);
}
It always throws that error. I changed the route and the func name a lot of times. but it does the same thing and the dd(); request is always empty.
Thanks in advance!
You have to set the ajax method to post with the attribute 'method', not 'type'.
function SendAny(){
$.ajax({
url: '/users/add/comment/',
data: {
"_token": "{{ csrf_token() }}",
"content": 'ksdflsdfnnkn',
},
method: 'post',
success: function(result) {
if (result == 0) {
location.reload();
} else {
alert("this an ereor")
}
}
});
}
I was trying to send the same data using <form> I tried AJAX to have more control over the request.
my form tag goes like <form method="POST" action="/users/add/comment/">
I removed the last / in the URL and it does work. I don't know how or why.
But It works !!!
Form
<form id="YourForm">
...
your inputs
...
</form>
Button
<button type="button" class="btn btn-success SendButton">Save This</button>
JS
<script type="text/javascript">
$(document).on('click', '.SendButton', function (e) {
e.preventDefault();
var data = $("#YourForm").serialize();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method : "POST",
url : "{{ url('users/add/comment/') }}",
data : data,
dataType : "JSON",
})
.done(function(response) {
alert('Success!');
location.reload();
.fail(function(response) {
console.log("Error: ", response);
});
return false;
});
</script>
You need to change type to method, you use the wrong keyword. Now it is a default GET
$.ajax({
url: '/users/add/comment/',
data: {
"_token": "{{ csrf_token() }}",
"content": 'ksdflsdfnnkn',
},
method: 'post', // it should be method: 'post'
success: function(result) {
if (result == 0) {
location.reload();
} else {
alert("this an ereor")
}
}
});
My button in the table is created by:
return Datatables::of($members)
->addColumn('action', function ($id) {
return 'Edit
<button class="btn btn-primary btn-delete" data-remote="/admin/members/' . $id->id . '">Delete</button>
'; })->make(true);
The js function:
$('#datatable-member').on('click', '.btn-delete[data-remote]', function (e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var url = $(this).data('remote');
alert(url);
$.ajax({
url: url,
type: 'DELETE',
dataType: 'json',
data: {method: '_DELETE', submit: true}
}).always(function (data) {
$('#datatable-member').DataTable().draw(false);
});
});
the return of the debugging alert is (for example): /admin/members/2
The route is this one:
DELETE | admin/members/{member} | members.destroy | App\Http\Controllers\Admin\MemberController#destroy | web
I have this error in the JS console:
jquery-3.3.1.min.js:2 DELETE http://127.0.0.1:8000/admin/members/2 404 (Not Found)
...and of course, the delete doesn't work...
I would like to read the post id from html and send it via AJAX to the controller. How can I get the post ID ($post->id) and transfer it via AJAX? Or is there a better solution to save the post seen by the user?
#foreach ($posts as $post)
<div id="post_container_{{$post->id}}" class="row waypoint">
</div>
#endforeach
This is my AJAX code:
$('.waypoint').waypoint(function() {
$.ajax({
url: '/posts/view',
type: "post",
data:
success: function(request){
console.log(request);
},
error: function(response){
console.log(response);
},
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
}, {
offset: '100%'
});
Get the id from the focused waypoint.
let waypoint_id = this.getAttribute('id'); // something like 'post_container_1'
Get only the string after the _
let post_id = waypoint_id.split("_").pop(); // something like '1'
in ajax() function
data: {
post_id: post_id
}
You could add a data-id attribute like so:
#foreach ($posts as $post)
<div id="post_container_{{$post->id}}" data-id="{{$post->id}}" class="row waypoint">
</div>
#endforeach
And then access it using the attr()
$('.waypoint').waypoint(function() {
let post_id = $(this).attr('data-id'); //this specifies the particular post row in focus.
$.ajax({
url: '/posts/view',
type: "post",
data: {post_id: post_id}
//and so on.
});
}, {
offset: '100%'
});
I have a basket where I can have items that I can delete
When I click on the bin icon, it delete it straight from the page with this script
$('.delete').on('click', function (e) {
e.preventDefault();
var value = $(this).attr('data-value');
$.ajax({
url: '{{ path('ajax_app_basket_bill_delete_item') }}',
type: 'POST',
dataType: 'json',
data: {
'itemId': value
},
success: function (data) {
$('#item' + value).remove();
if (data['success'] == 1) {
$.ajax({
url: '{{ path('ajax_app_basket_bill_refresh_price') }}',
type: 'POST',
dataType: 'json',
data: {
'credit_box' : creditBox,
'code' : code
},
success: function (data) {
$('#t1').text(data['totalWithoutTax']);
$('#t2').text(data['tax']);
$('#t3').text(data['total']);
}
});
}
}
});
});
(here is the html in case you need to see this)
<a class="delete" data-value="{{ item.id }}" href="#"><i class="mdi mdi-delete"></i></a>
And my question is, how can I actually create a very simple dialog box to confirm deletion when I click on the bin icon without to remove it instantly.
thank you
The simpliest way would be with the javascript function confirm:
$('.delete').on('click', function (e) {
e.preventDefault();
if (confirm('Really delete this item?')){
var value = $(this).attr('data-value');
$.ajax({
url: '{{ path('ajax_app_basket_bill_delete_item') }}',
type: 'POST',
dataType: 'json',
data: {
'itemId': value
},
success: function (data) {
$('#item' + value).remove();
if (data['success'] == 1) {
$.ajax({
url: '{{ path('ajax_app_basket_bill_refresh_price') }}',
type: 'POST',
dataType: 'json',
data: {
'credit_box' : creditBox,
'code' : code
},
success: function (data) {
$('#t1').text(data['totalWithoutTax']);
$('#t2').text(data['tax']);
$('#t3').text(data['total']);
}
});
}
}
});
}
});
You can get more fancy with jQueryUI's .dialog() or other additional dialog box scripts easily foundable via Google or else.
I have a site i'm working on and i'm trying to make an ajax request to a controller (codeigniter framework). I see in firebug that my controller is receiving my post value just fine but for some reason it is not sending back a response. I've set it up to be VERY simple without a database call at this point just for testing and its still not working. Any ideas?
Here is my form in my view:
<div class="purchaseState">
<input type="text" name="city" id="city" class="grayGrad"/>
</div>
<div>
<ul id="cityResults">
<!-- AJAX results here -->
</ul>
</div>
Here is my controller returning the value:
function citySearch() {
echo '<li>test</li>';
}
Here is my Jquery ajax
//New City Search
$('#city').keyup( function() {
var city = $('#city').val();
$.ajax({
type: "POST",
url: "page/citySearch",
data: { city: city },
}).done(function( data ) {
$('ul#cityResults').append(data);
});
});
you should use ajax success callback:
$('#city').keyup(function() {
var city = $('#city').val();
$.ajax({
type: "POST",
url: "page/citySearch",
data: { city: city },
success: function(data) {
$('ul#cityResults').append(data);
}
});
});
Please change the url in the AJAX function in the following way.
$('#city').keyup(function() {
var city = $('#city').val();
$.ajax({
type: "POST",
url: "<?php echo base_url; ?>page/citySearch",
data: { city: city },
success: function(data) {
$('ul#cityResults').append(data);
}
});
});