Last active
October 9, 2024 03:43
-
-
Save JeffreyWay/5112282 to your computer and use it in GitHub Desktop.
Want to send a DELETE request when outside of a form? This will handle the form-creation bits for you dynamically, similar to the Rails implementation. (Requires jQuery, but doesn't have to.) To use, import script, and create a link with the `data-method="DELETE"` attribute.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
<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(); | |
})(); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?