Passing data to a bootstrap modal from Laravel - php

Question

Wonder if someone can help me with this one. I am a complete newbie with JS and JQuery.
I want to avoid accidents with deleting posts in my blog, so I want to have it so that when I hit delete it will pop up a modal to confirm I do want to delete the post and then do it or not.
I have added the following code.
<!-- Button trigger modal to delete post -->
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#deletePost">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="deletePost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete Blog Post</h4>
</div>
<div class="modal-body">
<p>You are about to delete a blog post, are you sure all that effort is to be sent to the unrecoverable trash can?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">OMG, NO!!!</button>
<form action="/blog/{{ $post->id }}" method="POST">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="pull-right btn btn-danger">Delete it!</button>
</form>
</div>
</div>
</div>
</div>
Now all that works fine, all I now want to do is that when I click the "delete it!" button it will do just that.
It all works apart from deleting the right post, I want to pass
{{ $post->id }}
to the modal so that it will send the post id to the controller.
My question is how I pass the id above to the modal? I have read a lot of examples and they are all so different so thought it better to get some views.
Thanks!

Answer 1

I would very much recommend using SweetAlert plugin, it is visually compatible with Twitter Bootstrap and much more pleasant to use.
This is a piece of code for multilingual, model-independant delete function:
$('body').on('click', 'sweet-delete', function (e) {
e.preventDefault();
var id = $(this).data('id');
var model = $(this).data('model');
swal({
title: lang.confirm_please,
text: lang.delete_warning,
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: lang.delete_button,
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function(){
$.post('/'+model+'/'+id, {_method: 'DELETE'}, function(data){
swal({
title: lang.delete_title,
text: lang.delete_success,
type: "success",
timer: 5000
}, function(){
window.location.href = '/'+model;
});
});
});
})
And in you view:
<button data-id="{{$post->id}}" data-model="blog" class="pull-right btn btn-danger sweet-delete">#lang('app.delete')</button>
I have to mention that in order to attach CSRF token to my ajax forms I use:
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
in my app.js, and
<meta name="csrf-token" content="{{csrf_token()}}">
in my main layout file.

Answer 2

To pass the post ID to the modal form, it should be inserted in the modal using jQuery.
Button:
<button type="button" class="btn btn-default btn-xs delete-post" data-post-id="{{ $post->id }}">Delete</button>
Note: we will trigger the modal using the following, so we can also insert the ID.
jQuery:
$(document).ready(function() {
var modalObj = $('#deletePost');
$('.delete-post').click(function(e) {
var postId = $(this).data('post-id');
modalObj.find('form').attr('action', '/blog/' + postId);
modalObj.modal('show');
});
});
In this case, the action attribute is set dynamically, according to the relevant post id.