-
Star
(194)
You must be signed in to star a gist -
Fork
(62)
You must be signed in to fork a gist
-
-
Save JeffreyWay/5112282 to your computer and use it in GitHub Desktop.
| /* | |
| <a href="posts/2" data-method="delete"> <---- We want to send an HTTP DELETE request | |
| - Or, request confirmation in the process - | |
| <a href="posts/2" data-method="delete" data-confirm="Are you sure?"> | |
| */ | |
| (function() { | |
| var laravel = { | |
| initialize: function() { | |
| this.methodLinks = $('a[data-method]'); | |
| this.registerEvents(); | |
| }, | |
| registerEvents: function() { | |
| this.methodLinks.on('click', this.handleMethod); | |
| }, | |
| handleMethod: function(e) { | |
| var link = $(this); | |
| var httpMethod = link.data('method').toUpperCase(); | |
| var form; | |
| // If the data-method attribute is not PUT or DELETE, | |
| // then we don't know what to do. Just ignore. | |
| if ( $.inArray(httpMethod, ['PUT', 'DELETE']) === - 1 ) { | |
| return; | |
| } | |
| // Allow user to optionally provide data-confirm="Are you sure?" | |
| if ( link.data('confirm') ) { | |
| if ( ! laravel.verifyConfirm(link) ) { | |
| return false; | |
| } | |
| } | |
| form = laravel.createForm(link); | |
| form.submit(); | |
| e.preventDefault(); | |
| }, | |
| verifyConfirm: function(link) { | |
| return confirm(link.data('confirm')); | |
| }, | |
| createForm: function(link) { | |
| var form = | |
| $('<form>', { | |
| 'method': 'POST', | |
| 'action': link.attr('href') | |
| }); | |
| var token = | |
| $('<input>', { | |
| 'type': 'hidden', | |
| 'name': 'csrf_token', | |
| 'value': '<?php echo csrf_token(); ?>' // hmmmm... | |
| }); | |
| var hiddenInput = | |
| $('<input>', { | |
| 'name': '_method', | |
| 'type': 'hidden', | |
| 'value': link.data('method') | |
| }); | |
| return form.append(token, hiddenInput) | |
| .appendTo('body'); | |
| } | |
| }; | |
| laravel.initialize(); | |
| })(); |
This would even work in bootstrap-modal and dynamic inserted button.
https://github.com/a1iraxa/restful-delete-object
Return response must be:
{
"success":true,
"hide":false,
"reload":false,
"remove":false,
"message":"Deleted!"
}
Inspired by:
https://gist.github.com/dirkpostma/5442850
How would I then send any data that is outside of the form to the form, if the form is appended to the body?
i.e. I have multiple checkboxes in a table. How would these get sent to the form so they can be deleted?
Here's a Vue version - https://gist.github.com/kevdotbadger/7dfd81d51c975156b50a717908cba891
turn your <a href="MY_PUT_URL" class="button">Go!</a> into <method-link href="MY_PUT_URL" method="PUT" classes="button">Go!</method-link>
Nice one Jeffrey, Thanks!
Thank you @JeffreyWay just what i needed you rock!
Here's a simple update that uses vanilla JS and a default confirmation message: https://gist.github.com/guilhermemuller/114064dfe4e8ee49c37cce6f1a824081
add <meta name="csrf-token" content="{{ csrf_token() }}" /> into head
then
Change below code
'name': 'csrf_token',
'value': '<?php echo csrf_token(); ?>' // hmmmm...
into
'name': '_token',
'value': document.getElementsByName('_token')[0].value,
else it gives 419 | PAGE EXPIRED Error
If the event is not firing it is probably because document is not ready yet. Try this: https://gist.github.com/hakankozakli/3b76daa8cb49193f366178b98b64b71d