/* | |
<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 comment has been minimized.
This comment has been minimized.
Wonder if it would be easier to add an additional data* method for token?
|
This comment has been minimized.
This comment has been minimized.
Yeah, the embedded PHP is a temporary thing. Maybe store the csrf token in a meta tag, and then just grab that value from the script. That way, the user never has to worry about passing the token custom attribute. |
This comment has been minimized.
This comment has been minimized.
Yep, grab that guy from a meta tag. Otherwise |
This comment has been minimized.
This comment has been minimized.
Looks interesting, although I've always thought the best way around this is to define a new HTML helper function that spits out the form and button (with appropriate link styling or whatever) directly from PHP. Added bonus is that there's no bodging for the token, and non-JS people get the correct experience. Incidentally, I've only ever seen one framework actually include this functionality for 'delete' action buttons (either using a 'proper' DELETE form or back when we just POSTed to a /delete and didn't pass a method or care about being RESTful) out of the box although can't currently remember which. Maybe Yii. |
This comment has been minimized.
This comment has been minimized.
I recently created an ajax way of sending DELETE requests. I'm a jQuery newbee (getting better using your tuts, thanks again!), but I gave it a try. https://gist.github.com/dirkpostma/5442850
|
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
Thanks a bunch! This helped so much! |
This comment has been minimized.
This comment has been minimized.
Hi Jeffrey! I just started using Laravel for my web app projects. Can you pls elaborate on your js script? Sorry, I am a bit confused. What link should I provide in the anchor tag? Same link as the one in the form prior to it or should I create another route that uses a different method in the controller? I am already using a form for the update process so I want the delete request to be done outside of it. Thanks. |
This comment has been minimized.
This comment has been minimized.
thanks!!! that helped me so much. |
This comment has been minimized.
This comment has been minimized.
Thanks for this script, seems quite useful! I am having an issue, my |
This comment has been minimized.
This comment has been minimized.
I don't know why I cannot implement this function. I use Debugbar and it displayed the error: View [posts.record] not found. Any idea? |
This comment has been minimized.
This comment has been minimized.
Updated the script for Laravel 5 (the token-input was renamed to _token): |
This comment has been minimized.
This comment has been minimized.
Thanks, work like charm. You are the best Jeffrey :) |
This comment has been minimized.
This comment has been minimized.
What would be the be the best way to style the dialog/popup like a JQuery dialog/modal, with the script in laravel.js? I'm more of a back-end developer, so my Javascript knowledge needs improving... |
This comment has been minimized.
This comment has been minimized.
Perfect. I'm using laravel 4.2 and took me a while to realise that As always, thanks again Jeffrey. |
This comment has been minimized.
This comment has been minimized.
Im curious, how did you guys managed to get this to work with the missing '$' before starting the function? It doesnt work for me unless i add the '$'. |
This comment has been minimized.
This comment has been minimized.
how to make it work with L5 ?! i try to change 'name': 'csrf_token', to 'name': '_token', but i get TokenMismatchException in VerifyCsrfToken.php line 46: |
This comment has been minimized.
This comment has been minimized.
updated to larevel 5 |
This comment has been minimized.
This comment has been minimized.
You are genious. |
This comment has been minimized.
This comment has been minimized.
hi im new in larave and mine got tokenMismatch can anyone guide me on how am i suppose to include it into my tag thanks :) |
This comment has been minimized.
This comment has been minimized.
I get a View [places.show] not found. I understand it, but don't know how to fix it. Here are my route list PUT | places/{places} | places.update | App\Http\Controllers\PlaceController@update | auth,auth | |
This comment has been minimized.
This comment has been minimized.
Got a problem with this where the link gets redirected instead of triggering the event. So I transferred |
This comment has been minimized.
This comment has been minimized.
Thanks a lot guys! Works perfectly and saves lives! |
This comment has been minimized.
This comment has been minimized.
Something like this maybe?
and then send it in the form:
|
This comment has been minimized.
This comment has been minimized.
Folks using L5 Line 57 to 62
to ->
|
This comment has been minimized.
This comment has been minimized.
^^ |
This comment has been minimized.
This comment has been minimized.
@dialyy +1 |
This comment has been minimized.
This comment has been minimized.
unbelievable! How crazy is that i need to paste 80 custom lines of Javascript to simply get a non-GET link to work? Missing the super useful Rails helpers and the magic UJS:
|
This comment has been minimized.
This comment has been minimized.
Thanks @dialyy !!! |
This comment has been minimized.
This comment has been minimized.
Thx @dially |
This comment has been minimized.
This comment has been minimized.
How can you test this links on laravel ?
In this case I get a method not allowed exception. Ideas ? |
This comment has been minimized.
This comment has been minimized.
I tried to modify alert layout with other js library but when i click delete it does not wait for confirm to delete.can anybody give some idea on this? |
This comment has been minimized.
This comment has been minimized.
Cant seem to get this to work.
|
This comment has been minimized.
This comment has been minimized.
I've made Javascript Vanilla version of this: https://gist.github.com/antoniputra/410af23ecc59b77d69dab0b2530718a1 no longer depend on jQuery anymore |
This comment has been minimized.
This comment has been minimized.
This is a nice way for links. But for forms, in my opinion it's better to change the form attributes (and the "_method"-field if necessary). I couldn't find any solution for this, so i made my own script. It's built very like Jeffreys code. Examples: <input type="submit" value="Submit to alternative action" data-submit-action="/new-target">
<input type="submit" value="Submit to alternative target" data-submit-target="_blank">
<input type="submit" value="Submit as delete" data-submit-method="delete">
<input type="submit" value="Submit with confirmation" data-submit-confirmation="Are you sure?"> {{ Form::submit('Submit alternative', [ 'data-submit-action' => '/new-target',
'data-submit-target' => '_blank',
'data-submit-method' => 'delete',
'data-submit-confirmation => 'Are you sure?' ]); }} I uploaded the full script to my own gist: https://gist.github.com/kohlerdominik/af78ecaec7a83e566e6fe8170f5f11bd |
This comment has been minimized.
This comment has been minimized.
If the event is not firing it is probably because document is not ready yet. Try this: https://gist.github.com/hakankozakli/3b76daa8cb49193f366178b98b64b71d |
This comment has been minimized.
This comment has been minimized.
This would even work in bootstrap-modal and dynamic inserted button. https://github.com/a1iraxa/restful-delete-object Return response must be:
Inspired by: |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
Here's a Vue version - https://gist.github.com/kevdotbadger/7dfd81d51c975156b50a717908cba891 turn your |
This comment has been minimized.
This comment has been minimized.
Nice one Jeffrey, Thanks! |
This comment has been minimized.
This comment has been minimized.
Thank you @JeffreyWay just what i needed you rock! |
This comment has been minimized.
Nice one Jeffrey, Thanks!