I have a problem when I want delete a register with Ajax and Symfony, in template Twig.
<tbody>
{% for entity in entities %}
<tr>
<td>
<a class="delete btn btn-danger btn-xs glyphicon glyphicon-trash" data-playgroup-id="{{ entity.id }}" ></a>
</td>
</tr>
{% endfor %}
</tbody>
Ajax:
$(document).ready(function() {
$(".delete").click(function(){
var pid = $(this).attr("data-playgroup-id");
bootbox.confirm("Are you sure?", function(result) {
if(result){
$.ajax({
url: '{{path('playergroup_delete', { 'id': pid}) }}',
type: 'delete',
success: function(result) {
console.log('Delete');
},
error: function(e){
console.log(e.responseText);
}
});
}
});
});
});
I receive the next error:
Variable "pid" does not exists.
Thanks!
As MouradK say you ar passing a variable in a twig function (server side) and you are getting this variable using javascript (client side).
to solve this do something like this :
$(document).ready(function() {
$(".delete").click(function(){
var pid = $(this).attr("data-playgroup-id");
bootbox.confirm("Are you sure?", function(result) {
url = '{{path('playergroup_delete', { 'id': 0}) }}';
url = $url.replace("0",pid);
if(result){
$.ajax({
url: url,
type: 'delete',
success: function(result) {
console.log('Delete');
},
error: function(e){
console.log(e.responseText);
}
});
}
});
});
});
It means that you did not pass the pid variable to your Twig template.
Pass it trough the controller and you'll be fine
The error is :
You are trying to set a variable comming from the client (javascript) in your twig template (which is a server side).
Related
I want to delete Image without reloading a page through Ajax but every time when I delete the Image, first it's not deleted but when I refresh the page the image can delete.
app.js:
$('.delete-image').on('click', function(e){
e.preventDefault();
let id = $(this).attr('data-id');
bootbox.confirm("Are you sure you want to delete this company?", function(result){
if(result){
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type : 'DELETE',
url : '/albums/delete',
data : {
id : id,
},
success : function(response){
if(response){
$(this).parents('.album').slideUp().remove();
}
}.bind(this)
})
}
}.bind(this));
});
AlbumController:
public function deleteImage(Request $request){
$album = Album::find($request->id);
if($album->delete())
return response()->json(true);
else
return response()->json(false);
}
blade.php:
#extends('layout.app')
#section('content')
<div class='medium-3 columns end'>
<div class="row text-center">
#foreach($album as $albm)
<h4>{{$albm->name}}</h4>
<h4>{{$albm->description}}</h4>
<a href="/albums/{{$albm->id}}" class="btn btn-link">Edit
<img class="thumbnail" src="/storage/store/{{$albm->cover_image}}" alt="{{$albm->name}}">
</a>
Delete
<br>
#endforeach
</div>
</div>
#endsection
Route:
Route::delete('/albums/delete', 'AlbumController#deleteImage');
$(this).parents('.album').slideUp().remove();
You have no elements with class="album" so the selector won't match anything.
After delete success response just delete its parent div that has class row
$('.delete-image').on('click', function(e){
e.preventDefault();
let id = $(this).attr('data-id');
let parentDiv = $(this).closest('div.row');
bootbox.confirm("Are you sure you want to delete this company?", function(result){
if(result){
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type : 'DELETE',
url : '/albums/delete',
data : {
id : id,
},
success : function(response){
if(response){
$(parentDiv).remove();
}
}.bind(this)
})
}
}.bind(this));
});
This is the function that is called when button delete is pressed. After confirmation of delete, I want to hide the delete tr :
function delete_confirmation(id) {
var $tr = $(this).closest('tr');
swal({
title: "Are you sure?",
text: "To delete this patient!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
$.ajax({
url: localStorage.getItem("base_url") + '' + 'index.php/Patient_ws/delete/',
timeout: 4000,
type: "POST",
data: ({id: id}),
}).done(function () {
$tr.remove();
})
.fail(function () {
swal({
title: ' erreur in server, try later...',
type: 'warning'
})
})
} else {
swal("Patient not deleted");
}
});
}
Html markup:
<a href="#" class="btn btn-danger btn-xs" onclick="delete_confirmation(<?php echo $patient->id_personne;?>)">
<i class="fa fa-trash-o"></i> Delete </a>
I want to hide tr - please help.
There is no explicit this in an onclick function unless you pass it in from the html. Try console.log(this) will see it is probably Window and not the element
Since you are already using jQuery I would suggest also using it for the event listener and moving the php output to a data attribute
HTML
<a class="delete-row-btn btn btn-danger btn-xs"
data-id="<?php echo $patient->id_personne;?>">
JS
$(document).on('click','.delete-row-btn', delete_confirmation)
function delete_confirmation(event) {
event.preventDefault();
// now `this` is the button
var id = $(this).data('id')
var $tr = $(this).closest('tr');
// all else should be same
swal({
.....
}
I want to delete some data from database using ajax.. I've done the following steps to run..But while I was trying to delete it's shows following Error:
Failed to load resource: the server responded with a status of 404
(Not Found)
Here is my route:
Route::post('/delete/{id}',[
'uses'=>'ItemController#delete',
'as' => 'delete'
]);
Here is the controller:
public function delete($id)
{
Item::find($id)->delete();
return Redirect::back();
}
And here is my view page:
<html>
<head>
<title> Item List</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h3> List Of Courses </h3></br>
<table class="table table-striped table-bordered dataTable" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Title</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($items as $row)
<tr>
<td>{{$i}}</td>
<td>{{$row->title }}</td>
<td>{{$row->description}}</td>
<td>
<button type="button" onclick="deleteItem({{ $row->id }})" id="Reco" class="btn btn-danger">Delete</button>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
<script>
function deleteItem(id) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: '/delete/'+id,
success: function(result) {
console.log(result);
}
});
}
</script>
</body>
</html>
If anyone find the error I've done, hope you'll help me to find it out.
Generally passing parameter while deleting is not a good idea. since we can delete the data through url e.g /delete/4 while you may want to delete only after clicking the delete button.
$.ajax({
type: "POST",
url: "{{url('/delete)}}",
data:{id:id}
success: function(result) {
console.log(result);
}
});
route:
Route::post('/delete',[
'uses'=>'ItemController#delete',
'as' => 'delete'
]);
and, the controller
public function delete(Request $request)
{
$id=$request->id;
Item::where(['id'=>$id])->delete();
return Redirect::back();
}
Try this code:
function deleteItem(id) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url:"{{url('delete')}}",
data:{id:id},
success: function(result) {
location.reload();
}
});
}
try this code
function deleteItem(id) {
var _token = $("input[name='_token']").val();
$.ajax({
type: "POST",
url: '/task/'+id,
data: '_method=DELETE&_token=' + _token,
success: function (result) {
console.log(result);
}
});
}
Try this:
$.ajax({
type: "POST",
url: url('/delete'), // The correct way to call ajax function in laravel
data:{
id: id
},
success: function(result) {
console.log(result);
}
});
You can set a method destroy in your controller which laravel automatically uses for deleting. It accepts id.
public function destroy($id){
Item::find($id)->delete();
echo 'Deleted Successfully.';
}
for ajax just send a method delete with your token.
jQuery.ajax({
url:'your-controller-route/id',
type: 'post',
data: {_method: 'delete', _token :token},
success:function(msg){
// do stuff
}
});
I am trying to figure out how to enable/disable user with checkbox without page reload.
index.html.twig
<table>
<thead>
<tr>
<th>UserName</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<td><a href="{{ path('user_show', {'id': user.id}) }}">
{{ user.username }}</a>
</td>
<td><input id="user_enable_{{ user.id }}" onclick="enabledChange({{ user.id }})"
type="checkbox" {% if user.enabled %}checked{% endif %}/>
</td>
{% endfor %}
</tbody>
</table>
<script>
var changePath = {{ path('user_enable_change', {'id': user.id}) }};
function enabledChange(id)
{
var value = $(this).val();
console.log('value: ' + value);
$.ajax({
type: "POST",
url: changePath,
async: true,
data: { },
success: function () {
console.log('success');
}
});
}
</script>
UserController
/**
* #Route("/enable/{id}", name="user_enable_change")
*/
public function userDisableAction(User $user) {
if($user->isEnabled()){
$user->setEnabled(false);
}else {
$user->setEnabled(true);
}
try {
$em = $this->getDoctrine()->getManager();
$em->persist($user);
$em->flush();
}
catch(\Exception $e) {
return new JsonResponse('error');
}
return new JsonResponse('success');
}
Question
How can I set corresponding user id to enabledChange function and change checked state depending on user state?
You need to add quotes to your variables, and pass changePath as an argument:
onclick="enabledChange('{{ user.id }}', '{{ path('user_enable_change', {'id': user.id}) }}')"
then:
function enabledChange(id, changePath) {
var value = $(this).val();
console.log('value: ' + value);
$.ajax({
type: "POST",
url: changePath,
async: true,
data: { },
success: function () {
console.log('success');
}
});
}
I hope this will help.
Another clean way of doing this is by passing parameters and routes via data attributes and accessing the button by class. In my example I had to increase product quantity without refreshing:
<button class="btn btn-sm btn-info increase"
data-id="{{ p.id }}"
data-url="{{ path('cart_add', {'pid': p.id}) }}">
Increase qty
</button>
$(document).ready(function() {
$(".increase").click(function (e) {
var value = $(this).data('id');
console.log('value: ' + value);
$.ajax({
type: "POST",
url: $(this).data('url'),
async: true,
data: {},
success: function () {
console.log('success increment');
}
});
});
});
My problem is that when I delete a line we can only do I delete a row and jQuery practice for other lines will not be executed.
<script>
$('#destroy').on('click', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $('#destroy').data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
}
});
console.log("It failed");
});
</script>
line:
<tr id="destroy_">
<td>
<a id="destroy" data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#update',[$cat->id])}}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#show', [$cat->id])}}">
{{$cat->category}}
</a>
</td>
<th class="text-right">{{$cat->id}}</th>
</tr>
Using ID's for actions that are repeated in a table is a bad idea if you don't name them dynamically. Either way I suggest using anything other than an ID, for example a custom data attribute. So use this for your delete links:
<a data-delete data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
And in your JS code instead of #destroy you can now use the following selector to match them:
$(document).on('click', '[data-delete]', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $(this).data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
},
error: function () {
// Also the failed request should be handled here
// not below the ajax call because it's asynchronous
console.log("It failed");
}
});
});