How to call controller method with array - ajax

Controller import() Import data from csv file and redirect with array of data
//import data from csv file
return redirect('school/student/import')->with('result', $result);
import.blade.php
This is a modal form and imported data is shown to user.
#if(Session::has('result'))
#php
$result = Session::get('result');
#endphp
<table class="table table-hover">
<thead>
...
<tr>
#foreach($result as $datarow)
<tr>
<td>{{$datarow['student_no']}}</th>
....
</tr>
#endforeach
</tbody>
</table>
#endif
<button type="submit" class="btn btn-primary">Save changes</button>
#section('js')
<script>
#if(Session::has('result'))
//$result = IS IT POSSIBLE TO ACCESS $result;
$('#exampleModalCenter').modal('show');
$("form#myForm").submit(function(event) {
event.preventDefault();
$('#exampleModalCenter').modal('hide');
$.ajax({
type: "POST",
url: "savedata",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: **$result**,
success: function(data){
window.location = '{{ url("school/student") }}';
},
});
});
#endif
</script>
#stop
Once submit is clicked, I want to call Controller savedata() with $result data array.
I tried with both form submit and ajax post but the issue is since $result is an array, it's difficult to pass. Also unable to access session values from JavaScript.

Need to provide the route name
routes/web.php
Route::post('savedata', 'ExampleController#savedata')->name('example.savedata');
After naming the route, you need to provide the route name to the URL for ajax.
$("form#myForm").submit(function(event) {
event.preventDefault();
$('#exampleModalCenter').modal('hide');
$.ajax({
type: "POST",
url: '{{route("example.savedata")}}',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: $result,
success: function(data){
window.location = '{{ url("school/student") }}';
},
});
});

Related

How to prevent ajax request before clicking on OK button of onclick="confirm(' ')" message?

$(document).ready(function(){
$(document).on('click', '.dlt', function () {
var id = $(this).attr('data-id');
var token= '{{ csrf_token() }}';
$.ajax({
method: 'post',
url: '{{route('product.delete')}}',
data: {id:id, _token:token},
success: function (response) {
location.reload();
}
});
});
});
<tbody>
#if($products->count()>0)
#foreach($products as $product)
<tr>
<td class="p_name">{{$product->name}}</td>
<td class="p_details">{{$product->details}}</td>
<td class="p_price">{{$product->price}}</td>
<td><a class="add" data-id="{{$product->id}}" title="Add" data-toggle="tooltip" style="display: none"><i class="fa fa-book"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit"></i></a>
<a class="dlt" onclick="confirm('Are you sure to delete it?')" title="Delete" data-toggle="tooltip" data-id="{{$product->id}}"><i class="fa fa-trash"></i></a>
</td>
</tr>
#endforeach
#else
<tr>
<td colspan="4" class="text-center bg-danger">No Product Data Found</td>
</tr>
#endif
</tbody>
Although I click on Cancel button of Confirm() message, but onclick ajax request already done. How to prevent it until I click on OK button of confirm() message?
Inside a function, you have to use this script -
var result = confirm("Want to delete?");
if (result) {
//Logic to Ajax
}
In your code
$(document).ready(function() {
$(document).on('click', '.dlt', function() {
var result = confirm("Want to delete?");
if (result) {
//logic to AJAX
var id = $(this).attr('data-id');
var token = '{{ csrf_token() }}';
$.ajax({
method: 'post',
url: '{{route('
product.delete ')}}',
data: {
id: id,
_token: token
},
success: function(response) {
location.reload();
}
});
}
});
});

Django csrf_token works in one form but not in other

I have a page with two lists: for tasks (tareas) and sales (ventas). When you click their links each one opens it´s own modal and retrieves the info with AJAX.
One works with no problem (tareas). The other one gives me a csrf_token error.
I thought maybe it was a problenm of using two tokens in the same template, but I´m doing it in other templates with no problem.
And if I completely remove the tareas part, the ventas one still get´s the same error.
Venta form call
<form name="ventas_form" action="#" id="form_venta_{{operacion.comprobante}}" method="POST">
{% csrf_token %}
<input name="id" id="venta_id_submit" type="text" value="{{operacion.comprobante}}" hidden="true"/>
<a style="padding-left: 1rem;" href="" id="{{operacion.comprobante}}" class="show_venta" data-toggle="modal" >{{operacion.comprobante}}</a>
</form>
Tarea form call
<form name="form" action="#" id="form_tarea_{{tarea.id}}" method="POST">
{% csrf_token %}
<input name="id" id="tarea_id_submit" type="text" value="{{tarea.id}}" hidden="true"/>
<a style="padding-left: 1rem;" href="" id="{{tarea.id}}" class="show_tarea" data-toggle="modal" >{{ tarea.titulo }}</a>
</form>
Venta Ajax
<script>
$(function(){
$('.show_venta').on('click', function (e) {
e.preventDefault();
let venta_id = $(this).attr('id');
$.ajax({
url:'/catalog/ventas-detail/',
type:'POST',
data: $('#form_venta_'+venta_id).serialize(),
success:function(response){
console.log(response);
$('.show_venta').trigger("reset");
openModalVentas(response);
},
error:function(){
console.log('something went wrong here');
},
});
});
});
function openModalVentas(venta_data){
$('#fecha').text(venta_data.venta.fecha);
$('#comprobante').text(venta_data.venta.comprobante);
$('#cliente').text(venta_data.venta.cliente);
$('#vendedor').text(venta_data.venta.vendedor);
$('#lista').text(venta_data.venta.lista);
$('#prod_codigo').text(venta_data.venta.prod_codigo);
$('#prod_nombre').text(venta_data.venta.prod_nombre);
$('#uds').text(venta_data.venta.uds);
$('#vu').text(venta_data.venta.vu);
$('#subtotal').text(venta_data.venta.subtotal);
$('#bonif').text(venta_data.venta.bonif);
$('#modal_ventas').modal('show');
};
</script>
Tarea Ajax
<script>
$(function(){
$('.show_tarea').on('click', function (e) {
e.preventDefault();
let tarea_id = $(this).attr('id');
$.ajax({
url:'/catalog/tareas-detail/',
type:'POST',
data: $('#form_tarea_'+tarea_id).serialize(),
success:function(response){
console.log(response);
$('.show_tarea').trigger("reset");
openModal(response);
},
error:function(){
console.log('something went wrong here');
},
});
});
});
function openModal(tarea_data){
$('#creador').text(tarea_data.tarea.creador);
$('#destinatario').text(tarea_data.tarea.destinatario);
$('#titulo').text(tarea_data.tarea.titulo);
$('#tarea').text(tarea_data.tarea.tarea);
$('#resuelto').text(tarea_data.tarea.resuelto);
$('#fecha_creacion').text(tarea_data.tarea.fecha_creacion);
$('#fecha_limite').text(tarea_data.tarea.fecha_limite);
$('#fecha_resuelto').text(tarea_data.tarea.fecha_resuelto);
$('#empresa').text(tarea_data.tarea.empresa);
$('#persona_empresa').text(tarea_data.tarea.persona_empresa);
$('#modal_tareas').modal('show');
};
</script>
Venta view
def VentaDetailView(request):
ID = request.POST.get('id')
ventas_todas = Ventas.objects.filter(pk=ID).get()
venta = {
"fecha": ventas_todas.fecha,
"comprobante": ventas_todas.comprobante,
"cliente": ventas_todas.cliente,
"vendedor": ventas_todas.vendedor.nombre,
"lista": ventas_todas.lista,
"prod_codigo": ventas_todas.prod_codigo,
"prod_nombre": ventas_todas.prod_nombre,
"uds": ventas_todas.uds,
"vu": ventas_todas.vu,
"subtotal": ventas_todas.subtotal,
"bonif": ventas_todas.bonif,
}
return JsonResponse({'venta': venta})
Tarea view
def TareaDetailView(request):
ID = request.POST.get('id')
tarea_select = Tareas.objects.filter(pk=ID).get()
tarea = {
"creador": tarea_select.creador.username,
"destinatario": tarea_select.destinatario.username,
"titulo": tarea_select.titulo,
"tarea": tarea_select.tarea,
"resuelto": tarea_select.resuelto,
"fecha_creacion": tarea_select.fecha_creacion,
"fecha_limite": tarea_select.fecha_limite,
"fecha_resuelto": tarea_select.fecha_resuelto,
"empresa": tarea_select.empresa.Nombre,
"persona_empresa": tarea_select.persona_empresa.nombre,
}
return JsonResponse({'tarea': tarea})
No idea why the tareas part works ... but for sure I would add 'X-CSRFToken' header to both ajax calls:
$.ajax({
url:'/catalog/ventas-detail/',
type:'POST',
data: $('#form_venta_'+venta_id).serialize(),
headers: {'X-CSRFToken': getCookie('csrftoken')}
...
});
where:
function getCookie(name) {
var value = '; ' + document.cookie,
parts = value.split('; ' + name + '=');
if (parts.length == 2) return parts.pop().split(';').shift();
}
You can add CSRF token to header like that too :
$.ajaxSetup({
beforeSend: function(xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
});
Then you didn't need to manually add your CSRF token to all your ajax request.

Laravel Ajax delete record with button

I do not understand why it does not work:
Route
Route::delete('/dashboard/booking/deletebooking/{id}','ResourceController#deletebooking')->name('works.deletebooking');
ResourceController
public function deletebooking($id){
$booking = Booking::where('id','=',$id)->get();
$booking->delete();
return response()->json(['success' => true],200);
}
Table
<tr id="{{$booking->id}}">
<td class="roomId">{{$booking->room_id}}</td>
<td class="roomName">{{$booking->name}}</td>
<td class="roomLocation">{{$booking->sede}}</td>
<td class="start">{{$booking->start_date}}</td>
<td class="end">{{$booking->end_date}}</td>
<td>
<input type="hidden" name="_method" value="delete" />
<button class="btn btn-danger btn-xs" id="destroy" data-id="{{$booking->id}}" data-token="{{ csrf_token() }}">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
Request Ajax
$(".btn").click(function(){
var id = $(this).data('id');
// var $tr = $(this).closest('tr');
$.ajax({
url: "/dashboard/booking/deletebooking/"+id,
dataType: "JSON",
type: 'POST',
data: {
'_token': $('meta[name=csrf-token]').attr("content"),
'_method': 'DELETE',
"id": id
},
success: function ()
{
console.log("it Work");
}
});
console.log("It failed");
});
I have this error:
Request URL: http://pickbooking.local/dashboard/booking/deletebooking/1
Request Method: POST
Status Code: 500 Internal Server Error
Remote Address: 192.168.10.10:80
The issue is in the method used for the ajax call post
// var $tr = $(this).closest('tr');
$.ajax(
{
url: "/dashboard/booking/deletebooking/"+id,
dataType: "JSON",
type: 'POST',
data: {
'_token': $('meta[name=csrf-token]').attr("content"),
'_method': 'DELETE',
"id": id
},
success: function ()
{
console.log("it Work");
}
});
the data will be sent in the body of the request, and in a DELETE request, there is no body. so laravel wont see the _method, or the _token. Either you send them in a GET request and let the _method do it's job (it will be in the url, not in the body), Or use the DELETE method in the ajax call
// var $tr = $(this).closest('tr');
$.ajax(
{
url: "/dashboard/booking/deletebooking/"+id,
dataType: "JSON",
type: 'DELETE',
data: {
'_token': $('meta[name=csrf-token]').attr("content"),
},
success: function ()
{
console.log("it Work");
}
});
Because I think you have an error something like
Method Illuminate\Database\Eloquent\Collection::delete does not exist.
Instead try something like this
$booking = Booking::where('id', '=', $id)->first();
$booking->delete();
so that $booking can have method delete()

ID received from post - send via ajax

I would like to read the post id from html and send it via AJAX to the controller. How can I get the post ID ($post->id) and transfer it via AJAX? Or is there a better solution to save the post seen by the user?
#foreach ($posts as $post)
<div id="post_container_{{$post->id}}" class="row waypoint">
</div>
#endforeach
This is my AJAX code:
$('.waypoint').waypoint(function() {
$.ajax({
url: '/posts/view',
type: "post",
data:
success: function(request){
console.log(request);
},
error: function(response){
console.log(response);
},
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
}, {
offset: '100%'
});
Get the id from the focused waypoint.
let waypoint_id = this.getAttribute('id'); // something like 'post_container_1'
Get only the string after the _
let post_id = waypoint_id.split("_").pop(); // something like '1'
in ajax() function
data: {
post_id: post_id
}
You could add a data-id attribute like so:
#foreach ($posts as $post)
<div id="post_container_{{$post->id}}" data-id="{{$post->id}}" class="row waypoint">
</div>
#endforeach
And then access it using the attr()
$('.waypoint').waypoint(function() {
let post_id = $(this).attr('data-id'); //this specifies the particular post row in focus.
$.ajax({
url: '/posts/view',
type: "post",
data: {post_id: post_id}
//and so on.
});
}, {
offset: '100%'
});

Update paginator laravel in ajax

I create a page on which there is a table with a paginator. I post a request to specify the output of rows from the database for insertion into the table. However, the paginator remains old. How should I change it?
Get a request for a new page or insert all the HTML code that comes from the controller is not satisfied.
Code view:
<table class="table table-bordered text-center table-hover" id="table_list">
<thead>
<tr>
<th>id</th>
</tr>
<tr>
<td><input type="text" class="form-control" id="id_card" value=""></td>
</tr>
</thead>
<tbody>
#if($dats)
#foreach($dats as $data)
<tr>
<td><div class="help" data-id="{{ $data['id'] }}"> {{$data['id']}}</div></td>
</tr>
#endforeach
#endif
</tbody>
</table>
{{ $dats->links() }} // After completing the ajax, the link remains old and allows you to navigate through the old table
Js code in view:
$('#id_card').on('keyup', function(){ // search
value = $(this).val();
$.ajax({
type: 'POST',
url: '/home',
data: {
search: value,
code: 1,
_token: '{{csrf_token()}}'
},
success: function (data) {
$('#table_list').empty();
$('#table_list').append(data); // update table
//update paginator links
},
error: function(data){
console.log(data);
}
})
})
Code controller
public function search(Request $request){
$models= Model::where('table','LIKE','%'.$request->input('search').'%')->paginate(4);
$str = "";
foreach($models as $model){
$str .= '<tr>'.
'<td>'. $model["id"].'</td>'.
'</tr>';
}
print($str);
return;
}
In Laravel 5, you could do it by changing your controller to something like this.
public function search(Request $request){
$models= Model::where('table','LIKE','%'.$request->input('search').'%')->paginate(4);
$str = "";
foreach($models as $model){
$str .= '<tr>'.
'<td>'. $model["id"].'</td>'.
'</tr>';
}
return response()->json([
'rows' => $str,
'links' => $models->render()
], 200);
}
In your ajax response, render the links with $('ul.pagination').replaceWith(data.links);
eg.
$.ajax({
type: 'POST',
url: '/home',
data: {
search: value,
code: 1,
_token: '{{csrf_token()}}',
page: page
},
success: function (data) {
$('#table_list').empty();
$('#table_list').append(data.rows); // update table
$('ul.pagination').replaceWith(data.links); // update links
},
error: function(data){
console.log(data);
}
});

Resources