laravel delete form is not working - laravel

#extends('layouts.app')
#section('content')
<div class="row">
<div style="float:left;" class="col-md-8">
<h3>Currency</h3>
</div>
<div style="float:right;" class="col-md-4">
<i class="fa fa-edit" style="color:white;"></i>Add New
<input type="text" id="search" name="search" placeholder="search" class="form-control-sm col-md-8 ml-1" style="float:right;"><br><br>
</div>
</div>
#if(count($currencies) > 0 )
<table class="table table-striped table-sm" >
<thead>
<tr><th scope="col">ID</th><th scope="col">Currency</th><th scope="col">Country</th><th scope="col" colspan="2" style="text-align:right">Actions</th></tr>
</thead>
#foreach($currencies as $currency)
<tr><td scope="row">{{$currency->id}}</td>
<td>{{$currency->title}}</td>
<td>{{$currency->country}}</td>
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
{{Form::hidden('_method','DELETE')}}
#csrf
<td><button type="submit" class="btn btn-danger btn-sm" style="float:right"><i class="fa fa-remove" style="color:white;"></i>Delete</button>
</i>Edit</td></tr>
{!!Form::close() !!}
#endforeach
</table>
{{$currencies->links()}}
#else
<p> No Data Available </p>
#endif
#endsection
Hi all, The delete form is not submitting in this code and I tried so many thing but I could not figure out the issue. Please help me with this.

It looks to me that your html is wrong, you open, close your form and place #csrf outside your td tag while submit button is inside it
Try to move your form definition inside td tag like:
<td>
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
{{Form::hidden('_method','DELETE')}}
#csrf
<button type="submit" class="btn btn-danger btn-sm" style="float:right"><i class="fa fa-remove" style="color:white;"></i>Delete</button>
</i>Edit
{!!Form::close() !!}
</td>

Try changing the method in the actual form tag to DELETE? By default if you are using something like route::resource in your routes, it will automatically assign the DELETE method to the route, not the POST.
I can see you're specifying the delete method in a hidden element anyway, but its worth a try.
{!!Form::open(['action'=>['CurrencyController#destroy', $currency->id], 'method'=>'POST'])!!}
If you're never quite sure, run php artisan route:list in your terminal inside your project root directory, and it will give you a full list of the routes and methods for your application.

Related

Laravel pretty url in edit method

can someone tell me how can I still have pretty URL when trying to edit my post? I have slugs etc but for edit method, we need to use GET|HEAD which means we will have something like this:
www.our-domen.com/admin/posts/this-is-my-post-for-edit/edit?_token=0GXpk4oaLdGy8YOdp0591ogAOIHF89ZCciWk79h&btn-editPost=
Instead of this:
www.our-domen.com/admin/posts/this-is-my-post-for-edit/edit
Here is the part of the code:
<td>
<form action="{{ route('posts.edit', $post->slug) }}" method="get">
#csrf
<button type="submit" name="btn-editPost" class="btn btn-info btn-sm" style="color: white;">Edit</button>
</form>
</td>
Note : slugs are set up correctly, it is not a problem :)
You don't need the form actually, if you just delete #csrf, it will work.
Or, change your code :
<td>
<form action="{{ route('posts.edit', $post->slug) }}" method="get">
#csrf
<button type="submit" name="btn-editPost" class="btn btn-info btn-sm" style="color: white;">Edit</button>
</form>
<td>
To,
<td>
Edit
</td>

Trying to delete data using modal popup, not getting correct id of selected item

I have a table view with many records and I want to have a delete button for each record, which will prompt a modal box for the user to confirm a delete. I am able to have the correct buttons (viewed from the table) to prompt the modal, but the button within the modal, which is the button to confirm a delete doesnt pass the right id. For example, I have 3 records in my table that is shown, with an ID of 1, 2 and 3. But the way I have code my table (will show code below) makes it where the user clicks any of the delete button on the desired record, the modal box pops up, with the "Delete(confirm)" button with an ID of the newest amongst all records. In this situation would be an ID of 3. I want it to pass the correct ID. Meaning if I want to delete record 1 it will pass ID 1 and record 2 and so on
I have tried researching what I did wrongly with my JavaScript but it seems ok and nothing seems to help for now. I have tried putting the whole modal into my table but it still has the same problem...
<!-- DataTables Example -->
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-table"></i>
Advertisements
<div></div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Image</th>
<th>Status</th>
<th>Sort No.</th>
<th>Updated By</th>
<th>Expired At</th>
<th>Updated At</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
#foreach ($advertisements as $advertisement)
<tr>
<td>{{ $advertisement->media->title }}</td>
<td>{{ $advertisement->media->description }}</td>
<td><img src="{{asset('/storage/uploads/images/').'/'.$advertisement->image}}" height="65" width="100"></td>
#php
if ($advertisement->media->status == 1){
$current_status = 'Active';
} elseif ($advertisement->media->status == 0){
$current_status = 'Inactive';
}
#endphp
<td>{{ $current_status }}</td>
<td>{{ $advertisement->media->sort}}</td>
<td>{{ $advertisement->media->admin->username}}</td>
<td>{{ $advertisement->expired_at}}</td>
<td>{{ $advertisement->media->updated_at}}</td>
<td><a href="/advertisements/{{$advertisement->id}}/edit" class="btn btn-success">Edit</td>
<td>
<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-url="/advertisements/{{$advertisement->id}}">Delete , {{$advertisement->id}}</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>
Above code is the table view showing my data, and each record will have a delete button next to it.
<form action="" method="post" id="deleteForm">
#method('DELETE')
#csrf
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
Are you sure you want to delete this record?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="delete" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
</form>
The code above is my modal box code, with a form that creates a delete request.
The code below is the javascript that is handling the delete and the passing of id and the action:-
$(document).ready(function () {
$('.delete-record').click(function () {
var url = $(this).attr('data-url');
$("#deleteForm").attr("action", url);
});
});
I want it to pass the correct ID. Meaning if I want to delete record 1 it will pass ID 1 and record 2 and so on.
You try to send your form via POST method, but there is no post data such as advertising id in it.
Can you please show your web.php route file ?
Because if it's POST method here, you should to add hidden input in your form.
Try with this,
Instead of url you should use route,
<button class="btn btn-danger delete-record" data-toggle="modal" data-target="#deleteModal" data-id="{{$advertisement->id}}" data-action="{{ route('advertisements.destroy', $advertisement->id) }}">Delete , {{$advertisement->id}}</button>
In your JS code
$("#deleteForm").attr("action", $(this).data('action'));
And if you don't put your modal code outside foreach then put it in at end of file
Hope this helps :)

pass data from table to modal using angular

Im using Spring MVC and AngularJS to build my app and I been looking for a way to pass a table registry data to a modal in order to edit that registry but I haven´t find a working example so, thats my question how can a I pass the registry data to a modal?
This is what I have so far:
Table
<table class="table table-hover table-responsive">
<thead class="table-striped">
<th>Email</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Rol</th>
<th>Acciones</th>
</thead>
<tbody>
<tr data-ng-show="allUsuarios.length === 0">
<td colspan="4" class="warning">No hay registros para mostrar</td>
</tr>
<tr data-ng-repeat="usuarios in allUsuarios">
<td>{{usuarios.email}}</td>
<td>{{usuarios.nombre}}</td>
<td>{{usuarios.apellidos}}</td>
<td>{{usuarios.idRol.tipoRol}}</td>
<td>
<input type="hidden" value="{{usuarios.idUsuario}}"/>
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" data-toggle="modal" data-target="#formModalEliminar"><i class="glyphicon glyphicon-trash"></i></button>
</td>
</tr>
</tbody>
</table>
And the Modal:
<!--EDIT MODAL-->
<div class="col-lg-12">
<div class="modal fade" id="formModalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H2">Editar Usuario</h4>
</div>
<div class="modal-body">
<form role="form" action="add" method="post">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" required=""/>
<label>Nombre</label>
<input class="form-control" type="text" required=""/>
<label>Apellidos</label>
<input class="form-control" type="text" required=""/>
<label>Rol</label>
<br>
<div class="btn-group open">
<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-success">Guardar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!--END EDIT MODAL-->
PS: I don´t know why when I press Ctrl+K to format the code, it gets displayed like that, sorry.
First of all you have to define a registery in you angular component
currentRegistery : Registery;
In your table you have to add an onclick on the edit icon of each registery to be able to set the current Registery with the selected registery
<button class="btn btn-primary" data-toggle="modal" data-target="#formModalEditar" onclick=“currentRegistery=usuarios”><i class="glyphicon glyphicon-pencil"></i></button>
Finally on your modal you can deal directly with the currentRegistery object.

Not working below angularjs code

<tr data-ng-repeat="myTrack in myTrackList">
<td class="project-status" data-ng-switch="myTrack.opened">
<span data-ng-switch-when="true" class="label label-primary">Active</span>
<span data-ng-switch-when="false" class="label label-default">Inactive</span>
</td>
<td class="project-title"><a
id="{{myTrack.trackId}},{{myTrack.file.fileId}}"
href="getDocumentByFileId?fileId={{myTrack.file.fileId}}&trackId={{myTrack.trackId}}">{{myTrack.trackName}}</a>
<br /><small>Description: {{myTrack.description}}</small>
<br /> <small>Created: {{myTrack.createdTime}}</small></td>
<td class="project-people" colspan="2">
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<a href=""><img alt="image" title="persons.firstName"
class="img-circle" src="persons.profilePictureUrl"></a>
</div>
</td>
<td class="project-actions"><a href="#"
class="btn btn-white btn-sm"><i class="fa fa-folder"></i>
View </a></td>
</tr>
I taken list of objects and in single object there is set of user with their profile picture. I used ng-repeat in ng-repeat for repeating users set from list of objects but my inner ng-repeat not working correctly. please help me.
As for the code bellow :
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<img alt="image" title="persons.firstName" class="img-circle" src="persons.profilePictureUrl">
</div>
The browser do not know that you are using angular js variable for title or src. So you will need.
<div class="project-people" ng-repeat="persons in myTrack.personTrack">
<img alt="image" ng-attr-title="{{persons.firstName}}" class="img-circle" ng-src="{{persons.profilePictureUrl}}">
</div>
So you will need to include the ng tags when you want to use the angular js for tags.

Retrieving table row information using ajax and pdo to display in bootstrap modal

Im trying to retrieve information from a table which is populated by a PDO array into a html table. I want to grab the row information when a user clicks on the 'delete button' for that row into a modal which i have for the delete confirmation.
I'm not sure how to go about doing this because the information returned is from the database and not hard-coded in.
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
Course Code
</th>
<th class="text-center">
Course Title
</th>
</tr>
</thead>
<tbody>
<?php foreach ($courses as $row) {
echo "<tr><td>";
echo $row['course_code'];
echo "</td><td>";
echo $row['course_title'];
echo "</td><td>";
echo '<p data-placement="top"
data-toggle="tooltip"
style="margin-left:18px"
title="Delete">';
echo '<button class="btn btn-danger btn-xs"
data-title="Delete"
data-toggle="modal"
data-target="#delete">';
echo '<span class="glyphicon glyphicon-trash" />';
echo '</button></p>';
echo "</tr>"; }
?>
this is the code for the modal:
<div id="delete" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Record</h4>
</div>
<div class="modal-body">
<p class="text-danger"><small>Are you sure you would like to delete this record?</small></p>
<p class="text-danger"><small>You will not be able to un-do this action</small></p>
<div class="form-group">
<input class="form-control " type="text" placeholder="Course Title">
</div>
</div>
<div class="modal-footer">
<button id="can" type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button id= "upd" type="submit" class="btn btn-danger">Delete</button>
</form>
</div>
</div>
</div>
</div>
I know i will need AJAX to do this dynamically. Does anyone have any ideas of a solution? thanks
Here's the solution.
http://getbootstrap.com/javascript/#modals-related-target
You should add a new data attribute here:
'<button class="btn btn-danger btn-xs"
data-title="Delete"
data-index="yourItemIndex" <----- here
data-toggle="modal"
data-target="#delete">';
Your script should be something like this:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Best regards.

Resources