I'm currently trying to do multiple deletion in Laravel 5.3. I'd like to be something just like how emails are deleted using checkbox.
But before deleting, I'd like to do confirmation using a modal.
form in my blade looks like this
<form id="linkForm" action="/links/deleteLinks" method="POST">
{{ csrf_field() }}
{{ method_field('POST') }}
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example footable toggle-arrow-tiny">
<div class="btn-group btn-group-sm pull-right">
<a data-toggle="modal" class="btn btn-primary" href="#modal-form-add" data-dismiss="modal"><i class="fa fa-plus-square-o"></i> Add</a>
<input class="btn btn-danger" type="submit" value="Delete">
</div>
<thead>
<tr>
<th></th>
<th data-toggle="true" data-hide="all">Company</th>
{{-- <th>Category</th> --}}
<th>Page Url</th>
<th data-hide="all">Domain Url</th>
<th>Destination Url</th>
<th>Contact Email</th>
<th data-hide="all">Trust Flow</th>
<th data-hide="all">Estimated Traffic</th>
<th data-hide="all">Domain Authority</th>
<th>Status</th>
<th>Note</th>
<th data-hide="all">Live</th>
<th>Action</th>
{{-- <th>Delete</th> --}}
</tr>
</thead>
<tbody>
#foreach($links as $link)
<tr>
<td align="center"><input type="checkbox" class="i-checks" id="input" name="input[]" value="{{ $link->page_url }}"></td>
<td>{{ $link->company->name }}</td>
{{-- <td>{{ $link->category_id }}</td> --}}
<td>{{ $link->page_url }}</td>
<td>{{ $link->domain_url }}</td>
<td>{{ $link->destination_url }}</td>
<td>{{ $link->contact_email }}</td>
<td>{{ $link->trust_flow}}</td>
<td>{{ $link->estimated_traffic }}</td>
<td>{{ $link->domain_authority }}</td>
<td>{{ $link->status }}</td>
<td>{{ $link->comment }}</td>
<td>
#if($link->is_live)
{{ 'Live' }}
#else
{{ 'Down' }}
#endif
</td>
<td>
<a data-toggle="modal" href="#modal-form-{{ $link->id }}" data-dismiss="modal"><i class="fa fa-pencil"></i> Edit</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</form>
modal.blade.php
<div id="myModal" class="modal inmodal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<i class="fa fa-exclamation-triangle modal-icon"></i>
<h2><strong>Are you sure?</strong></h2>
{{-- <p class="text-muted">Are you sure you want to delete the following link(s)?</p> --}}
<p id="checkid"></p>
<div class="row">
<button id="cancelDelete" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn-primary btn" id="SubForm">Confirm and Submit The Form</button>
</div>
</div>
</div>
</div>
javascript
$("#linkForm").validate({
submitHandler: function (form) {
$("#myModal").modal('show');
$('#SubForm').click(function () {
form.submit();
});
}
});
How can I submit my array to the controller without creating another function and route for multiple delete and just use links.destroy?
You can pass the array from the form like this
<input type="checkbox" name="ids[]" value="{{$row->id}}"/>
In your controller you can do
Model::whereIn('id', $request->ids)->destroy();
You can always collect the links through JS and send them along. In the Laravel controller you'll simply add an if condition to differentiate between the two requests.
By the by, whether it is only one id or several, you should always make sure that permissions over them are enforced.
Elaborating on my answer,
Suppose you've got a collection of articles, each of which can be marked for deletion
<input type="checkbox" name="article[]" value="1" checked>
<input type="checkbox" name="article[]" value="2" checked>
<input type="checkbox" name="article[]" value="3" checked>
<input type="checkbox" name="article[]" value="4">
Then you can collect those ids with
let ids = Array.from(document.querySelectorAll('input[name="article[]"'))
.filter(el => el.checked)
.map(el => el.value);
And later on send them thorugh an XMLHttpRequest
Related
i have a problem where when i submit edit and redirect back the show page with message, the previous table not showing.
This is the previous table
This is after submit where only back to the previous page and show message not the details.
the page only show the successful message but not the details of the case as the previous case.
This is my feedbackController for show() and update() class
public function show(Feedback $feedback){
$feedback->load('user');
return view('feedback.show',compact('feedback'));
}
public function update(Request $request, Feedback $feedback){
$request->validate([
'status' => 'required|not_in:0',
'remark' => ['string', 'max:255', 'nullable']
]);
$feedback->fill($request->post())->save();
return redirect()->back()->with('success','Feedback updated successfully');
}
This is my blade file
#if (session('success'))
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ session('success') }}
</div>
#else
<h2><i class="fa fa-arrow-left" aria-hidden="true"></i> Case ID - {{ $feedback->id }}</h2>
<div class="table-responsive-lg pt-4">
<table class="table table-active table-borderless table-hover" style="width:100%;border-radius: 5px">
<tr>
<th scope="col" style="width:10%">Name</th>
<td>{{ $feedback->user->name }}</td>
</tr>
<tr>
<th scope="col" style="width:10%">Title</th>
<td>{{ $feedback->title }}</td>
</tr>
<tr>
<th scope="col" style="width:10%">Message</th>
<td>{{ $feedback->details }}</td>
</tr>
<tr>
<th scope="col" style="width:10%">Created at</th>
<td>{{ $feedback->created_at }}</td>
</tr>
<tr>
<th scope="col" style="width:10%">Reply</th>
<td>Email</td>
</tr>
<tr>
<form action="{{ route('feedback.update',$feedback->id) }}" method="post">
#csrf
#method('PUT')
<th scope="col" style="width:10%">Status</th>
<td>
<select name="status" class="custom-select #error('status') is-invalid #enderror">
<option #if(( old('status') ?? $feedback->status)==NULL)selected
#endif value="0">Choose...</option>
<option #if(( old('status') ?? $feedback->status)==1)selected
#endif value="1">Received</option>
<option #if(( old('status') ?? $feedback->status)==2)selected
#endif value="2">Reply</option>
</select>
#error('status')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</td>
</tr>
<tr>
<th scope="col" style="width:10%">Remark</th>
<td>
<textarea name="remark" class="form-control #error('remark') is-invalid #enderror" placeholder="Write your remark here" rows="4">{{ old('remark') ?? $feedback->remark }}</textarea>
#error('remark')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</td>
</tr>
<tr>
<th scope="col" style="width:10%"></th>
<td style="text-align: right;width:100%">
<button type="submit" class="btn btn-primary">Save</button>
</form>
</td>
</tr>
<tbody>
</tbody>
</table>
I hope anyone can help me :)
According to your blade file you created session success message in if and html code in else file why?
Please don't use else part if you want to show both blade file and success message.
In your case if success message will come then else part will not show
#if (Session::has('success'))
<div class="alert alert-success">
<ul>
<li>{{ Session::get('success') }}</li>
</ul>
</div>
#endif
Try Accessing like this
I am trying to make a filter for my table but i see a problem there. Maybe the problem is from table structure couse i fetch all structure as it is on mysql. Does anyone help to make this filter in right way.
The collapse content under comment is the head i display when i want to filter
<table class="table table-hover align-middle mb-0">
<thead class="">
<tr>
<th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
<th v-if="!isHidden[index]" v-for="(header, index) in visibleHeaders" :key="index" scope="col">
{{ header }}
</th>
<th>ACTION</th>
</tr>
</thead>
<!-- Collapsed content ./ -->
<thead class="collapse" id="collapseFilter">
<tr>
<th>#</th>
<th v-for="(header, index) in visibleHeaders" scope="col">
<select id="" class="form-select" >
<option v-for="column in leads">
<div v-for="(atr, key, index) in column">
{{atr}}
</div>
</option>
</select>
</th>
</tr>
</thead>
<!-- ./ Collapse contet -->
<tbody>
<tr v-show="leads.length" v-for="column in leads" >
<td>
<input type="checkbox" class="form-check-input" v-model="selected" :value="column.id" />
</td>
<td v-if="!isHidden[index]" v-for="(atr, key, index) in column">
<div v-if="atr == 'new'">
<span class="badge bg-info">{{ atr }}</span>
</div>
<div v-else-if="atr == 'contract'">
<span class="badge bg-success">{{ atr }}</span>
</div>
<div v-else>
<span >{{ atr }}</span>
</div>
</td>
<td>
<button #click="editLead(column.id)" type="button" class="btn btn-sm btn-secondary" data-mdb-toggle="modal" data-mdb-target="#editLeadModal" >
<i class="fa-solid fa-eye"></i>
</button>
</td>
</tr>
<tr v-show="!leads.length">
<td colspan="12" class="text-center">Sorry :( No data found.</td>
</tr>
</tbody>
</table>
If i try to loop only v-for="column in lead"
I Have a Blade Form that will execute Post Method, this is my blade
#foreach ($dataku as $row => $order)
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 text-center">
<b>{{ $order->delivery_order_no }}</b>
<input type="hidden" name="order[{{ $row }}][do_id]" value="{{ $order->id }}">
<input type="hidden" name="order[{{ $row }}][so_id]" value="{{ $order->sales_order->id }}">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive m-t-40" style="clear:both;">
<table class="table table-hover" style="font-size: 9pt;">
<thead>
<tr><th class="text-center">No</th>
<th class="text-center">SKUID</th>
<th class="text-center">Item Name</th>
<th class="text-center">UOM</th>
<th class="text-center">Qty So</th>
<th class="text-center">Qty Do</th>
<th class="text-center">Qty Confirm</th>
<th class="text-center">Qty Minus</th>
<th class="text-center">Remark Confirm</th>
</tr>
</thead>
<tbody>
#foreach ($order->delivery_order_details as $do =>$detOrder )
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $detOrder->skuid }}</td>
<td>{{ $detOrder->sales_order_detail->item_name }}</td>
<td>{{ $detOrder->uom->name }}</td>
<td>{{ $detOrder->sales_order_detail->qty }}</td>
<td>{{ $detOrder->qty_do }}</td>
<td>
<input type="hidden" class="form-control" name="order[{{ $row }}][detail[][{{ $do }}][skuid]]" value="{{ $detOrder->skuid}}">
<input type="number" class="form-control" name="order[{{ $row }}][detail[][{{ $do }}][qty_do]]" value="{{ $detOrder->qty_do }}">
</td>
<td>
<input type="number" min="0" class="form-control" name="order[{{ $row }}][detail[][{{ $do }}][qty_minus]]" value="0">
</td>
<td>
<input type="text" placeholder="Remark Confirm" class="form-control" name="order[{{ $row }}][detail[][{{ $do }}][remarks]]">
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
#endforeach
I Just want to get the data from the blade as an array ,... and then this is my controller
public function update(Request $request)
{
return $request->all();
}
I Get The Data Like This
is the return value from my blade $request->all(); correct? looks like something wrong ???
#sta provided an answer but I would make it more detailed:
When you build more complex structure (nested) in a html form input, every next key or list has to be surrounded by [].
So if you do just a nested keys it will be something[key1][key2][key3].
And if you do an array and a nested keys it will be something[key1][key2][][key3], where [] means that [key2] will be an array (and every array element will have a key3 key with provided value in input value attribute.
That's why this input name can't work:
order[0][detail[][0][skuid]]
but this one will work:
name="order[0][detail][0][qty_minus]
I have question on it for the vue.js I already have a library vue.js in my web application site. Now my problem is when i try to use the Form Input Bindings the v-model this line of code here below
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
what i notice is it says
Use of undefined constant test - assumed 'test'
So i try to see the solution on this one by adding a # beacuase laravel is using blade template. Now when i add a # the error is gone but the render goes this way {{ test }} . Why does it not rendered correctly in my browser?. Can someone help me figured this thing out?. Any help is muchly appreciated. TIA.
Here is my code
#extends('layouts.app')
#section('title', 'Cases New Invoice | RMTG')
#section('content')
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">Cases New Invoice</li>
</ol>
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-file"></i>
New Invoice</div>
<div class="card-body">
<div class="form-group">
<div class="form-row">
<div class="col-md-6" >
<div class="table-responsive">
<form action="" method="post">
{{ csrf_field() }}
<table class="table table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th width="150px;">Contact Name: </th>
<td>{{ $opp->contacts }}</td>
</tr>
<tr>
<th>Case Number:</th>
<td>OPP -{{ $opp->code }}</td>
</tr>
<tr>
<th>Case Name:</th>
<td>{{ $opp->tax_year }}</td>
</tr>
<tr>
<th>Item Code:</th>
<td>
<div id="app-item">
<select name="itemCode" class="form-control">
<option v-for="item in items" v-bind:value="item.value">
#{{ item.text }}
</option>
</select>
</div>
</td>
</tr>
<tr>
<th>Notes: </th>
<td>
<input type="text" name="notes" class="form-control" />
</td>
</tr>
<tr>
<th>Amount: </th>
<td><input v-model="test" type="text" name="amount" class="form-control" required />
</td>
</tr>
<tr>
<th>VAT 20% Amt: </th>
<td>
<input type="text" name="vatAmount" class="form-control" />
</td>
</tr>
<tr>
<th>Total Amount: </th>
<td>
<input type="text" name="totalAmount" class="form-control" />
</td>
</tr>
</thead>
</table>
<div class="pull-right">
<button type="submit" class="btn btn-success">
<i class="fa fa-save" aria-hidden="true" style="font-size:24px"></i> Save
</button>
</div>
</form>
</div>
</div>
<div class="col-md-6" >
<h3>Amount Due: £ #{{ test }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//Item code
new Vue({
el: '#app-item',
data: {
items:[
{ text:'Tax Returns', value: 'Tax Returns' },
{ text:'UTR Filing', value: 'UTR Filing'}
]
}
})
</script>
#endsection
Why won't checkbox pass into Input? With other input types (text,password,select) it works fine.
form
<form method="POST" enctype="multipart/form-data" id="form">
#foreach ($query as $article)
<tr>
<td>{{ $article->title }}</td>
<td>{{ $article->slider }}</td>
<td><i class="fa fa-edit"></i> Edit</td>
<td><input type="checkbox" class="group-checkable" name="article[]" value="{{ $article->id }}"></td>
</tr>
<input name="test" value="tedt" hidden>
#endforeach
</form>
and controller
if (Request::isMethod('post'))
{
dd(Input::get('article'));
}