Tengo el siguiente código que su función es eliminar registros, y lo hace. Pero el registro sigue mostrándose hasta que manualmente actualizo la página, no lo hace ajax. El error que me muestra es el siguiente: ReferenceError: toastr is not defined
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link" id="v-pills-2016-tab" data-toggle="pill" href="#v-pills-2016" role="tab" aria-controls="v-pills-2016" aria-selected="true">2016</a>
<a class="nav-link" id="v-pills-2017-tab" data-toggle="pill" href="#v-pills-2017" role="tab" aria-controls="v-pills-2017" aria-selected="false">2017</a>
<a class="nav-link" id="v-pills-2018-tab" data-toggle="pill" href="#v-pills-2018" role="tab" aria-controls="v-pills-2018" aria-selected="false">2018</a>
<a class="nav-link" id="v-pills-2019-tab" data-toggle="pill" href="#v-pills-2019" role="tab" aria-controls="v-pills-2019" aria-selected="false">2019</a>
<a class="nav-link active" id="v-pills-2020-tab" data-toggle="pill" href="#v-pills-2020" role="tab" aria-controls="v-pills-2020" aria-selected="false">2020</a>
</div>
</div>
<div class="tab-content col-lg-10" id="v-pills-tabContent">
<div class="tab-pane fade pl-5" id="v-pills-2016" role="tabpanel" aria-labelledby="v-pills-2016-tab">
</div>
<div class="tab-pane fade pl-5" id="v-pills-2017" role="tabpanel" aria-labelledby="v-pills-2017-tab">
<div id="main">
@foreach($photos as $photo)
@if($photo->year == '2017')
<div class="box">
<div class="pic">
<div class="item{{$photo->id}}">
<img class="img-fluid" src="{{ asset($photo->dir . $photo->filename . '.' .$photo->extension) }}" alt="">
<button class="delete-button delete-modal btn btn-danger" data-id="{{$photo->id}}" data-title="{{$photo->title}}">
<i class="fas fa-times-circle"></i>
</button>
</div>
</div>
</div>
@endif
@endforeach
</div>
</div>
<div class="tab-pane fade pl-5" id="v-pills-2018" role="tabpanel" aria-labelledby="v-pills-2018-tab">
</div>
<div class="tab-pane fade pl-5" id="v-pills-2019" role="tabpanel" aria-labelledby="v-pills-2019-tab">
</div>
<div class="tab-pane fade show active pl-5" id="v-pills-2020" role="tabpanel" aria-labelledby="v-pills-2020-tab">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal form to delete a form -->
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<h5 class="text-center">Confirme que quiere eliminar la fotografía</h5>
<div class="form-group">
<label class="control-label col-sm-2" for="id">ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="modal-footer col-lg-12">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
Sí
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
No
</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('click', '.delete-modal', function() {
$('.modal-title').text('Delete');
$('#id_delete').val($(this).data('id'));
$('#deleteModal').modal('show');
id = $('#id_delete').val();
});
$('.modal-footer').on('click', '.delete', function() {
$.ajax({
type: 'DELETE',
url: 'photos/' + id,
data: {
'_token': $('input[name=_token]').val(),
},
success: function(data) {
console.log(data);
toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
$('.item' + data['id']).remove();
$('.col1').each(function (index) {
$(this).html(index+1);
});
}
});
});
public function destroy($id)
{
$delete = Photo::find($id);
$delete->delete();
return response()->json($delete);
}
Errores: