Delete data using modal box in laravel - laravel

I have some problem to delete data with confirmation (in this case using modal box) in laravel.
This is my delete button
{{ Form::open(array(
'route' => array('delete_spk', $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-danger btn-line btn-rect" type="submit" data-toggle="modal" data-target="#delSpk" data-title="Delete SPK" data-message='Are you sure you want to delete this data ?'>
<i class="icon-trash icon-white"></i> Delete</button>
{{ Form::close() }}
This is the modal box
<!--MODAL DELETE SPK-->
<div class="col-lg-12">
<div class="modal fade" id="delSpk" 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="H4"> Delete SPK</h4>
</div>
<div class="modal-body">
<p class="help-block">Are you sure you want to delete this data ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-line btn-rect" id="confirm">Yes</button>
<button type="button" class="btn btn-primary btn-line btn-rect" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
<!--END OF MODAL DELETE SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#delSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#delSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
This is the route
Route::get('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));
And this is the Controller for delete the data
public function destroy()
{
$spk= Spk::find(Input::get('id'))->delete();
Session::flash('message', 'Successfully deleted the SPK !');
return Redirect::to('spk_view');
}
The modal box is working, but when I'm getting the ID to delete, this will be ended with results "method not allowed http exception". Can someone help me please?

This issue happens because you have defined the route as GET but submitting the form as PUT
If you define you route as below then it must work
Route::put('spk/destroy/{id}', array('as'=>'delete_spk','uses'=>'SpkController#destroy'));

Related

Getting a modal to pop up when validation is false

I'm trying to create a page that when you click on add product button a modal pops up with a form that gets filled out.
What I'm trying to do is after you've submitted the form and there are errors then I would like for it to redirect back
and have the modal popup with the error messages.
Here is my code
My controller
public function addProduct(Product $product)
{
$validator = Validator::make(request()->all(), [
'title' => 'required'
]);
if($validator->fails())
{
return redirect()->back()->with([
'errors' => $validator->errors()
])
}
}
My blade file
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#addProductModal">
<i class="fa fa-plus"></i> Add Product
</button>
#include('admin.product.add-product')
and this is my modal
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addProductModalLabel">Add a Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{ route('admin.product.addProduct') }}" method="post">
#csrf
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Save changes</button>
</div>
</form>
</div>
</div>
</div>
You can achieve that using sessions.
I'm using Form Requests for validation, and in my CreateCategoryRequest I added:
public function withValidator($validator)
{
if ($validator->fails()) {
\Session::flash('create_category_error', 'Create category validation failed!');
}
}
In blade:
#if (session('create_category_error'))
<script type="text/javascript">
$('#myModal').modal('show');
</script>
#endif
Yes it's that simple :P
Happy coding!
You can use this also.
<!-- Test if validation failed; hence show modal -->
#if($errors->getBag('default')->first('name') != '')
<script type="text/javascript">
$(document).ready(function(){
$("#addProductModal").modal('show');
});
</script>
#endif

How to change a variable value with onclick?

I have a variable in my view which I want it's value to change according to a button I press. I tried this but It doesn't work:
<button type="button" data-dismiss="modal" onclick="{{ $product1 = $p->id }}" class="btn btn-primary">Pick</button>
This is inside a #foreach. Is there a way to have the $product1 variable change it's value with the button click? Preferably pure HTML or Laravel. If not, then how do I do it? Javascript?
You could do this easily using a Vue component, create a button for picking the product like so:
<button v-bind:class="buttonColor" #click="pickProduct" v-text="buttonText"></button>
Then create your function to make an Ajax call to update that product and at the same time update your button based on the response.
methods: {
pickProduct() {
axios.post('/product/' + this.productId)
.then(response => {
this.status = response.data;
}
})
}
then just realtime update the button copy and maybe color for when a product is picked
computed: {
buttonText() {
return (this.status=='picked') ? 'Picked' : 'Pick Product';
},
buttonColor() {
return (this.status=='picked') ? 'btn btn-primary' : 'btn btn-secondary';
}
}
If you are looking for an easy solution I would think something like this could work for you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- in your foreach !-->
#foreach($data as $p)
<!-- data-target #openModal{{$p->id}} !-->
<a role="button" data-toggle="modal" data-target="#openModal{{$p->id}}" ></a>
<!-- id = #openModal{{$p->id}} !-->
<div class="modal fade" id="openModal{{$p->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here your code, for example you can display the id or any data
!-->
<p>Your id: {{$p->id}}</p>
<!-- <p>Your name: {{$p->name}}</p> !-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
#endforeach
You can do this with boostrap,I leave you an example.
This is only to show data, if you want to modify data you have to use js

Laravel file upload from modal is returning blank

i have created a modal for file uploading, this is a client request, so i need to do it this way, i have already this:
{{-- Single Take Photo modal --}}
<div class="modal modal-success fade" tabindex="-1" id="takephoto_modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="voyager-photo"></i> Tomar Foto</h4>
</div>
<div class="modal-footer">
<form action="#" id="takephoto_form" method="POST" enctype="multipart/form-data" method="post" files="true">
{{ csrf_field() }}
<input type='file' accept="image/x-png, image/jpeg" capture="camera"/>
<input type="submit" class="btn btn-success pull-right" value="Tomar Foto">
</form>
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Now, the js:
$('td').on('click', '.takephoto', function (e) {
$('#takephoto_form')[0].action = '{{ route('voyager.'.$dataType->slug.'.submitphoto', ['id' => '__id']) }}'.replace('__id', $(this).data('id'));
$('#takephoto_modal').modal('show');
});
And the function in controller:
// POST
public function submitPhoto(Request $request, $id)
{
$input = Input::all();
dd($input);
die();
}
Ok, everything is working, the js is taking the action to the function, and sending the id so i can update then the db, this is an edit function, this is what im getting, no files ,
Im using Laravel Voyager, its Laravel...so i can use any Laravel class.
Already fixed by adding an id on html:
<input type='file' accept="image/x-png, image/jpeg" name="photo" id="photo" capture="camera"/>
Then you can do $request->hasFile('photo');

Bootstrap modal not close after submit data through jquery ajax method

i wanna put data into database through bootstrap modal with ajax. But after submit data button on modal the modal not close automatically. How i can fix this.
Here is code of Bootstrap modal
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is ajax code
<script type="text/javascript">
***
SOme Code Here
****
$.ajax({
type: 'GET',
url : "YOu URL",
data: {},
success: function(feedback){
$('#feedback').html(feedback);
}
});
});
});
</script>
In your success method, you call to close the model by using
$('#yourModal').modal('hide');
Btw, it is advisable to do a http POST rather than a GET for submissions.
The syntax for modal closing seems fine. But I'm not sure if you are targetting right modal element. See if the target id on which you are triggering the modal close code is right. Hope it solves your problem.

Bootstrap 3.1 with laravel 4.0

I have problem to display confirmation dialog box when I click the delete button it show the confirmation dialog and also submit the form without clicking the button in confirmation dialog box.
I'm using bootstrap and laravel. here is the code.
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" 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">Delete Confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this data(s) ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
$('#confirmDelete').on('show.bs.modal', function (e) {
// Pass form reference to modal for submission on yes/ok
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
{{ Form::open(array('route' => array('subscription.delete.all'), 'method' => 'delete')) }}
<button class='btn btn-xs btn-danger' type='submit' data-toggle="modal" data-target="#confirmDelete">
<i class='glyphicon glyphicon-trash'></i> Delete
</button>
{{ Form::close() }}
on top of your modal add this
<a href="#" type="button" class="btn btn-default btn-danger" data-toggle="modal" data-target="#confirmDelete">
delete
and in your modal code change the button
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
by your delete button code
{{ Form::open(array('route' => array('subscription.delete.all')......
Change button (inside the form) type from "submit" to "button"

Resources