Laravel 5.8 and datatable form validation - laravel

I am using Laravel 5.8 and Yajra datatable package.
I have to build a dynamic form from the controller (it works well).
After submitting the form, when the validation fails, I want to display the old values in the form.
Display the form/datatable and validation work fine. I need the way to display the old values.
Controller (build the form) (just an excerpt as it works fine)
if (request()->ajax())
{
return datatables()
->of($memberships)
->addIndexColumn()
->addColumn('amount', function($data) use ($membership, $amounts) {
$link = '<input type="text" id="membership_id[]" name="membership_id[]" value="' . $data->id . '" style="width:100px" class="form-control">';
$link .= '<input type="number" id="amount[]" name="amount[]" value="">';
return $link;
})
->rawColumns(['amount'])
->make(true);
}
return view('my_blade', compact('memberships', 'id'));
My question here is How to set the value attribute in the amount input field when the validation fails?
my_blade (display datatable form) (just an excerpt as it works fine)
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form method="POST" id="my_form" action="{{ route('my_submit_route') }}">
#csrf
<input type="text" id="id" name="id" value="{{ $id }}">
<table id="my_datatable" class="table table-hover table-striped table-responsive">
<thead class="crud-header">
<tr>
<th>No</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="form-group row">
<div class="col text-center">
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</div>
</form>
</div>
</div>
#endsection
#section('script')
<script>
$(document).ready(function() {
/* Start Datatable */
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.noConflict();
$('#my_datatable').DataTable({
iDisplayLength: 100,
serverSide: true,
processing: true,
ajax: {
url: "{{ route('my_route', ['id' => $id]) }}",
type: 'GET',
},
columnDefs: [
{className: "dt-center", targets: "_all"}
],
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
{data: 'name', name: 'name'},
{data: 'given_name', name: 'given_name'},
{data: 'amount', name: 'amount'}
],
order: [[1, 'desc']]
});
/* End Datatable */
});
</script>
#endsection
My validation works fine. Just don't know how to display the old value when validation fails
My Controller (to process form submit)
/* get the array of membership IDs */
$membershipIDs = $request->membership_id;
$validate_array = [];
/* Loop through membership for validation */
for($i = 0; $i < count($membershipIDs); $i++)
{
$validate_array['amount.'. $i] = 'sometimes|nullable|numeric|gte:0';
}
$validator = Validator::make($request->all(), $validate_array);
if ($validator->fails())
{
/* Get the array of amounts */
$amounts = $request->amount;
// How to manage here to return in the form and display the old values and the error message on the failed fields?
}
else
{
//Process the form;
}
My question: How to manage in the controller to return in the form and display the old values and the error messages on the failed fields?
I also use the following for validation, the validation works well but I cannot display the old values in the form after the validation fails.
$this->validate($request, $validate_array);
Thanks

Try this in your controller:
if ($validator->fails()) {
return back()->withInput()->withErrors($validator);
}
Not sure if this also works in Laravel 5. But an alternate to this is:
if ($validator->fails()) {
return redirect('post/create')
->withErrors($validator)
->withInput();
}
Which works in Laravel 5

Related

How to display subnested arrays in Vue search component - Laravel

I'm having issues displaying eloquent relationship data via my vue.js search template, specifically my customer->biller fields.
models.student_first_name will display however
models.billers.biller_first_name wont show anything
The search function is working on my customers.index view using the following
CustomerDetailsController:
public function getData(Request $request){
$search = $request->search;
$customer = Customer::with('orders', 'billers', 'paymentplans', 'paidinfulls')->where(DB::raw('concat(student_first_name," ",student_last_name)'), 'like', '%'.$search.'%')->paginate(20);
return response()->json([
'model' => $customer
]);
}
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$customers = Customer::with('orders', 'paymentplans', 'billers')->orderBy('created_at', 'desc')->where('owner', Auth::user()->name)->paginate(25);
return view('customers.index', compact('customers', 'orders', 'paymentplans', 'funding'));
}
Customers.vue:
<template>
<div class="container">
<div class="field m-b-20">
<p class="control has-icons-left">
<input #keyup="fetchDataCustomer()" type="text" class="form-control input" name="search" v-model="search" placeholder="Search">
<span class="icon is-small is-left"><i class="fa fa-search"></i></span>
</p>
</div>
<table class="table">
<thead>
<tr>
<th>Student Name</th>
<th>Email</th>
<th>Biller Name</th>
<th>Biller Email</th>
<th>Courses Purchased</th>
<th>Deposit</th>
<th>Payment Plan</th>
<th>Accepted</th>
<th>Receipted</th>
</tr>
</thead>
<tbody>
<tr v-for="models in model.data">
<td>{{models.student_first_name}} {{models.student_last_name}}</td>
<td>{{models.student_email}}</td>
<td>{{models.billers.biller_first_name}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default{
data(){
return {
model: {},
search:'',
url:'api/customers'
}
},
created:function (){
this.fetchDataCustomer()
},
methods: {
fetchDataCustomer(){
var vm = this
axios.get(`${this.url}?search=${this.search}`)
.then(function (response) {
Vue.set(vm.$data, 'model', response.data.model)
})
}
}
}
</script>
JSON output of a search result
{"model":{"current_page":1,"data":[{"id":"627d0130-4dd0-11e8-91dd-69869f509337","enrolment_id":"John","student_first_name":"John","student_last_name":"Smith","student_email":"johnsmith#mail.com","address":"123 Test Street","suburb":"Townsville","postcode":"9999","state":"AAA","home_phone":null,"work_phone":null,"mobile_phone":"0444444444","dob":"1999-01-01 00:00:00","drivers_license_number":"123738974987498","owner":"Sales Man","owner_email":"salesman#business.com","created_at":"2018-05-02 16:16:43","updated_at":"2018-05-02 16:16:43","orders":[{"id":933,"fc_account":16,"customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","biller_id":246,"enrolment_id":"John","course_id":5,"delivery_mode":0,"course_cost":"2000.00","deposit":null,"gov_funding":"0","location":"0","Monday":0,"Tuesday":0,"Wednesday":0,"Thursday":0,"Friday":0,"Saturday":0,"Sunday":0,"start_time":null,"end_time":null,"start_date":null,"enrolment_issue_date":"2018-05-02","sale_type":2,"created_at":"2018-05-02 16:17:24","updated_at":"2018-05-02 16:17:24"}],"billers":[{"id":246,"customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","biller_first_name":"John","biller_last_name":"Smith","biller_email":"johnsmith#mail.com","biller_address":null,"biller_suburb":null,"biller_postcode":null,"biller_state":null,"biller_phone":null,"created_at":"2018-05-02 16:17:24","updated_at":"2018-05-02 16:17:24"}],"paymentplans":[{"id":"836e7e40-4dd0-11e8-a907-83f96c25a7d0","enrolment_id":"John","customer_id":"627d0130-4dd0-11e8-91dd-69869f509337","paysmart_id":"FIT69869f509337","biller_id":246,"biller_first_name":"John","biller_last_name":"Smith","biller_email":"johnsmith#mail.com","payment_method":-1,"contract_value":"1500.00","interest_free":1,"payment_frequency":1,"commencement_date":"2018-05-24 00:00:00","payment":"100.00","first_payment":"200.00","admin_fee":"1.30","setup_fee":"5.50","deposit":"500.00","deposit_payment_method":"Cash","special_conditions":null,"accepted":null,"accepted_student":null,"created_at":"2018-05-02 16:17:38","updated_at":"2018-05-02 16:17:38","submitted":1,"biller_ip":null,"student_ip":null}],"paidinfulls":[]}]
Vue Debug
Your models.billers is an array but you're treating it as an object. So you'll have to access it via models.billers[0].biller_first_name instead of models.billers.biller_first_name given that it is always available.

How to reload the data of a table with vue and axios?

Well, i have a table populated with v-for: "usuario in usuarios". The initial charge does it correctly. But when i push the button "Buscar" only my <p>{{nombre}}</p> shows data. Look at these pictures:
Table populated with data
In the above picture, the table was populated with data, through getUsuarios() method. But in the next picture the table only shows blank data.
Table with blank data and <p>{{nombre}}</p>
Here are my codes:
Template:
<div>
<div class="panel panel-default">
<div class="panel-heading"><h1><strong>Lista de nombres</strong></h1></div>
<div class="panel-body">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
</tr>
</thead>
<tbody>
<tr v-for="usuario in usuarios">
<td>{{usuario.Nombre}}</td>
<td>{{usuario.Apellido_P}}</td>
<td>{{usuario.Apellido_M}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p>Buscar usuario</p>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" v-model="busqueda" placeholder="Buscar usuario" />
<button class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
</div>
<p>{{nombre}}</p>
</div>
</div>
</template>
Script
<script>
import axios from 'axios'
export default {
data() {
return {
usuarios:[],
busqueda: '',
nombre: '',
}
},
methods: {
buscarUsuario() {
axios.get('http://localhost:50995/api/GetUsuario?id=' + this.busqueda)
.then(response => {
this.usuarios = response.data,
this.nombre = response.data.Nombre
}).catch(e => {
console.log(e)
})
},
getUsuarios() {
axios.get("http://localhost:50995/api/GetUsuarios")
.then(response => {
this.usuarios = response.data
})
.catch(e => {
console.log(e)
})
}
},
created() {
this.getUsuarios(),
this.buscarUsuario()
}
}
</script>
As you can see, the <p>{{nombre}}</p> is populated with the data of the ID that i put in the input. But the table only shows blank data.
The <p>{{nombre}}</p> is only for test if the buscarUsuario() method works, and it's works but not with the table.
And, how can i reload the data of the table with the properties of the ID when i push the "Buscar" button?
Thank you
Something is wrong in your buscarUsuario() logic: you are overwriting the initial correct array of usuario objects with a single object of one usuario
axios.get('http://localhost:50995/api/GetUsuario?id=' + this.busqueda)
.then(response => {
/* REMOVE THIS LINE */ this.usuarios = response.data,
this.nombre = response.data.Nombre
}).catch(e => {
console.log(e)
})

How to use variable data after Ajax Call Success - Laravel

I created a small file manager to manage my files. On the one hand, the folder structure is shown thanks to JsTree. On the right I would like that based on the click on the left folder I was shown the files contained in that folder.
At the click an Ajax call is made which calls the selectFiles method to go through the routes. Now in the console i see the correct data, but i don't know how to use it into foreach in the blade.
AJAX:
// chiamata Ajax per selezionare files in base all'id
$('#treeview').on("select_node.jstree", function (e, data) {
var id = data.node.id;
$.ajax({
type: 'POST',
url: 'archivio_documenti/+id+/selectFiles',
data: {id:id},
success: function(data) {
console.log('Succes!',data);
},
error : function(err) {
console.log('Error!', err);
},
});
});
DocumentiController.php:
/**
* Selzionare files in base all'id della cartella
*/
public function selectFiles(Request $request){
try{
$id = $request->id;
$files = \App\Documento::where('cartella_id',$id)->get();
return response()->json(compact('files'));
}
catch(\Exception $e){
echo json_encode($e->getMessage());
}
}
Route:
Route::post('archivio_documenti/{id}/selectFiles', 'DocumentiController#selectFiles');
Update:
#foreach($files as $key => $file)
<div id="myDIV" class="file-box">
<div class="file">
{!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!}
<button type="submit" class="#" style="background: none; border: none; color: red;">
<i class='fa fa-trash' aria-hidden='true'></i>
</button>
{!! Form::close() !!}
<i class='fa fa-edit' aria-hidden='true'></i>
<input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}">
<i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i>
<a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}">
<span class="corner"></span>
<div class="icon">
<i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i>
</div>
<div class="file-name">
{{$file->file}}
<br>
<small>Update: {{$file->updated_at}}</small>
</div>
</a>
</div>
</div>
#endforeach
OK, the foreach of yours is a bit complex, but the idea itself is simple: recreate the foreach loop from your Blade in Javascript and append the result to the DOM.
In your success callback you could e.g. do this:
$('#treeview').on("select_node.jstree", function (e, data) {
var id = data.node.id;
$.ajax({
type: 'POST',
url: 'archivio_documenti/+id+/selectFiles',
data: {id:id},
success: function(data) {
// Build the HTML based on the files data
var html = '';
$.each(data, function(i, file) {
html += '<div class="file" id="file_' + file.id + '">' + file.updated_at + '</div>';
});
// Append the built HTML to a DOM element of your choice
$('#myFilesContainer').empty().append(html);
},
error : function(err) {
console.log('Error!', err);
},
});
});
Obviously, this is simplified and you'd need to use the HTML structure you've shown us in the foreach loop above, but the idea is the same: (1) loop through your files in the data object and build the HTML structure row by row, (2) put the whole HTML block in the DOM, wherever you need it to be displayed after the user clicked on a folder.
Alternative:
If you'd like to keep the foreach loop in Blade instead of of Javascipt, you could move the loop to a separate blade:
folder_contents.blade.php
#foreach($files as $key => $file)
<div id="myDIV" class="file-box">
<div class="file">
{!! Form::open(['method' => 'DELETE','route' => ['documento.destroy', $file->id]]) !!}
<button type="submit" class="#" style="background: none; border: none; color: red;">
<i class='fa fa-trash' aria-hidden='true'></i>
</button>
{!! Form::close() !!}
<i class='fa fa-edit' aria-hidden='true'></i>
<input id="myInput_{{$key}}" type="text" value="{{'project.dev/'.$file->path.'/'.$file->file}}">
<i class="btnFiles fa fa-files-o" aria-hidden="true" data-id="{{$key}}"></i>
<a href="{{' http://project.dev/'.$file->path.'/'.$file->file}}">
<span class="corner"></span>
<div class="icon">
<i class="img-responsive fa fa-{{$file->tipo_file}}" style="color:{{$file->color_file}}"></i>
</div>
<div class="file-name">
{{$file->file}}
<br>
<small>Update: {{$file->updated_at}}</small>
</div>
</a>
</div>
</div>
#endforeach
Then, in your controller:
public function selectFiles(Request $request){
try{
$id = $request->id;
$files = \App\Documento::where('cartella_id',$id)->get();
// Save the view as string
$view = view('folder_contents.blade.php', compact('files')))->render();
// Pass the ready HTML back to Javasctipt
return response()->json(compact('view'));
}
catch(\Exception $e){
echo json_encode($e->getMessage());
}
}
you must set header for ajax
headers: {
'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx',
'Content-Type':'application/json'
},
and in Controller
public function selectFiles(Request $request){
try{
$id = $request->id;
$files = \App\Documento::where('cartella_id',$id)->get();
return response()->json($files);
}
catch(\Exception $e){
echo json_encode($e->getMessage());
}
}

Add delete button in Data table with Laravel

I' trying to add delete button in Data table column but it doesn't work. but my edit button works perfect. here i have post my QusLINK
edit button works perfect but delet button only errors
public function getRowDetailsData(PslCall $call)
{
$crews = Crew::Where('call_id',$call->id)->get();
return Datatables::of($crews)
->addColumn('action', function ($crew) {
return '<span class="glyphicon glyphicon-edit" data-toggle="tooltip" title="Edit"aria-hidden="true"></span>
<form action="{{ route(\'crews.destroy\', $crew->id)}}" method="POST"><input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn-xs form-btn confirmation-callback" data-placement="left"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</form>';
})
->editColumn('id', 'ID: {{$id}}')
->removeColumn('id')
->editColumn('arrival_date', function ($crew) {
return $crew->arrival_date ? with(new Carbon($crew->arrival_date))->format('d-M-Y h:i') : '';
})
->filterColumn('arrival_date', function ($query, $keyword) {
$query->whereRaw("DATE_FORMAT(created_at,'%m/%d/%Y') like ?", ["%$keyword%"]);
})->make(true);
}
My Table like this
<table class="table table-striped table-bordered table-hover datas" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>NAME</th>
<th>GENDER</th>
<th>TYPE</th>
<th>ARRIVAL /DEPARTURE</th>
<th>ACTION</th>
</tr>
</thead>
</table>
again my script like this
var table = $('.datas').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('calls/'.$call->id.'/row-details-data') }}',
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": '<span class="btn btn-xs glyphicon glyphicon-download"></span>'
},
{data: 'crew_name', name: 'crew_name'},
{data: 'gender', name: 'gender'},
{data: 'crew_type'},
{data: 'arrival_date', "render":function(data, type, row){
switch(row.crew_type) {
case 'ONSIGNER' : return 'Arrival : '+ row.arrival_date; break;
case 'OFFSIGNER' : return 'Depart : '+ row.arrival_date; break;
default : return 'N/A';
}
}},
{data: 'action', name: 'action', orderable: false, searchable: false}
],
} );
May
{!! Form::open(array('url' => '/crews/'.$crew->id, 'method' => 'delete')) !!}
<button type="submit" class="btn-xs form-btn confirmation-callback" data-placement="left"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
!! Form::close() !!}

laravel delete is not working

I am wondering how to put a csrf token in a form so that delete will work?
Here is my code:
Route:
Route::delete('category_delete/{id}',['as'=>'category_delete','uses'=>'CategoryController#destroy']);
index.blade.php
#section('adminContent')
{!! Form::token() !!}
<div class="table-responsive art-content">
<table class="table table-hover table-striped">
<thead>
<th> NAME</th>
<th> ACTIONS</th>
</thead>
<tbody>
#foreach($categoriesView as $category)
<tr>
<td>{!! $category->name!!}</td>
<td>{!! link_to_route('categories.edit', '', array($category->id),array('class' => 'fa fa-pencil fa-fw')) !!}</td>
<td><button type="button" id="delete-button" class="delete-button" data-url = "{!! url('category_delete')."/".$category->id !!}"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="pagination"> {!! $categoriesView->render() !!}</div>
</div>
#stop
CategoryController:
public function destroy($id,Category $category)
{
$category = $category->find ( $id );
$category->delete ();
Session::flash ( 'message', 'The category was successfully deleted!.' );
Session::flash ( 'flash_type', 'alert-success' );
}
If I used ajax, javascript or jquery, how should the code be?
Using jquery I would do something like the following.
Add the line below in the header of your home view
<meta name="csrf-token" content="{{ csrf_token() }}" />
Now in your javascript
function deleteMe(button)
{
// You might want to put the ajaxSetup function where it will always load globally.
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
if(confirm("Are you sure?"))
{
$.get(
'category_delete/'+button.id,
function( response )
{
// callback is called when the delete is done.
console.log('message = '+ response.message);
}
)
}
}
In index.blade.php, make your id more specific.
...
<td><button type="button" id=".$category->id" class="delete-button" data-url = "{!! url('category_delete')."/".$category->id !!}"><i class="fa fa-trash-o" onlick="deleteMe(this);></i></button>
...
In your controller
public function destroy($id,Category $category){
$category = $category->find ( $id );
$category->delete ();
return response()->json(
'message' => 'Deleted',
)
}
Note: No need to add
Form::token in your view
Hope this helps.....
Updated...........
If you were to do it using laravel only, I will suggest you use a link rather than the button you are using.
In index.blade.php, make your id more specific.
...
<td><a href="category_delete/".$category->id class="delete-button" data-url = "{!! url('category_delete')!!}"><i class="fa fa-trash-o"></i></td>
...
In your controller
public function destroy($id,Category $category){
$category = $category->find ( $id );
$category->delete ();
return view('index');//important.
}
If you want your link to look like a button, use css or a css framework like bootstrap
That should be it. hope this helps again.

Resources