So basically I’m trying to make a plan list page with with the input Name, total price, total gems, and image input is manually key in but for plan category input do a dropdown which the dropdown data is from plan_category table. The ‘add new plan’ modal works but the edit modal only fades but no form was shown.
plan-list page
@extends('mainLayouts/contentLayoutMaster')
@section('title', 'Plan List')
@section('vendor-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
@endsection
@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection
@section('content')
<!-- plan list start -->
<section class="app-user-list">
<!-- list and filter start -->
<div class="card">
<div class="card-datatable table-responsive pt-0">
<table class="table">
<button class="dt-button add-new btn btn-primary float-end m-1" tabindex="0"
aria-controls="DataTables_Table_0" type="button"
data-bs-toggle="modal" data-bs-target="#addPlanModal">
<span>Add New Plan</span>
</button>
<thead class="table-light">
<tr>
<th>No</th>
<th>Plan Name</th>
<th>Total Price</th>
<th>Total Gems</th>
<th>Image</th>
<th>Plan Category</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($plans as $plan)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $plan->name }}</td>
<td>{{ $plan->total_price }}</td>
<td>{{ $plan->total_gems }}</td>
<td>{{ $plan->image }}</td>
<td>{{ optional($plan->planCategory)->id }}</td>
<td>
<a href="javascript:;" class="btn" data-bs-target="#editPlan{{ $plan->id }}" data-bs-toggle="modal">
<i data-feather='edit' style="color: #7367F0; width:20; height:20;"></i>
</a>
<form method="POST" action="{{ route('plan.delete', ['id' => $plan->id]) }}" accept-charset="UTF-8" style="display:inline">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<button href="javascript:;" class="btn" type="submit">
<i data-feather='trash-2' style="color: #EA5455; width:20; height:20;"></i>
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- Modal to add new plan starts-->
<div class="modal fade" id="addPlanModal" tabindex="0" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
<div class="modal-content">
<div class="modal-header mb-1">
<h5 class="modal-title" id="exampleModalLabel">Add New Plan</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ route('plan.store')}}" method="POST" class="row gy-1 pt-75">
{!! csrf_field() !!}
<div class="modal-body flex-grow-1">
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Plan Name</label>
<input
type="text"
class="form-control dt-full-name"
id="name"
placeholder="Plan Name"
name="name"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Total Price</label>
<input
type="text"
class="form-control dt-full-name"
id="total_price"
placeholder="Total Price"
name="total_price"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Total Gems</label>
<input
type="text"
class="form-control dt-full-name"
id="total_gems"
placeholder="Total Gems"
name="total_gems"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Image</label>
<input
type="text"
class="form-control dt-full-name"
id="image"
placeholder=""
name="image"
/>
<div class="mb-1">
<label class="form-label" for="plan_category_id">Plan Category</label>
<select class="form-select" id="plan_category_id" name="plan_category_id">
@foreach ($planCategories as $planCategory)
<option value="{{ $planCategory->id }}">{{ $planCategory->name }}</option>
@endforeach
</select>
</div>
<div class='text-center'>
<button type="submit" class="btn btn-primary me-1 data-submit">Submit</button>
<button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal to add new plan Ends-->
@foreach($plans as $plan)
<!-- Modal to edit plan Start -->
<div class="modal fade" id="editPlan{{ $plan->id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-edit-user">
<div class="modal-content">
<div class="modal-header mb-1">
<h5 class="modal-title" id="exampleModalLabel">Edit Plan Information</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{{ route('plan.update', ['id' => $plan->id] )}}" method="POST" class="row gy-1 pt-75">
{!! csrf_field() !!}
<div class="col-12 col">
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Plan Name</label>
<input
type="text"
class="form-control dt-full-name"
id="name"
placeholder="Plan Name"
name="name"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Total Price</label>
<input
type="text"
class="form-control dt-full-name"
id="total_price"
placeholder="Total Price"
name="total_price"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Total Gems</label>
<input
type="text"
class="form-control dt-full-name"
id="total_gems"
placeholder="Total Gems"
name="total_gems"
/>
<div class="mb-1">
<label class="form-label" for="basic-icon-default-fullname">Image</label>
<input
type="text"
class="form-control dt-full-name"
id="image"
placeholder=""
name="image"
/>
<div class="mb-1">
<label class="form-label" for="plan_category_id">Plan Category</label>
<select class="form-select" id="plan_category_id" name="plan_category_id">
@foreach ($planCategories as $planCategory)
<option value="{{ $planCategory->id }}">{{ $planCategory->name }}</option>
@endforeach
</select>
</div>
<div class='text-center'>
<button type="submit" class="btn btn-primary me-1 data-submit">Submit</button>
<button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal to edit plan Ends -->
@endforeach
</div>
<!-- list and filter end -->
</section>
<!-- plan list ends -->
@endsection
@section('vendor-script')
{{-- Vendor js files --}}
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
@endsection
@section('page-script')
{{-- Page js files --}}
<script src="{{ asset(mix('js/scripts/pages/app-user-list.js')) }}"></script>
@endsection
plancontroller
<?php
namespace AppHttpControllers;
use AppModelsPlan;
use AppModelsPlanCategory;
use IlluminateHttpRequest;
class PlanController extends Controller
{
public function index()
{
$plans = Plan::with('planCategory')->get();
$planCategories = PlanCategory::all();
return view('main.plan.plan-list')->with(['plans' => $plans, 'planCategories' => $planCategories]);
}
public function store(Request $request)
{
//Create new plan
$plan = new Plan();
$plan->name = $request->name;
$plan->total_price = $request->total_price;
$plan->total_gems = $request->total_gems;
$plan->image = $request->image;
$plan->plan_category_id = $request->plan_category_id;
$plan->save();
return redirect('plan')->with('flash_message', 'Plan Added!');
}
/**
* Display the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function edit($id)
{
$plan = Plan::find($id);
return view('main.plan.plan-list')->with('plan', $plan);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function update(Request $request, $id)
{
$plan = Plan::findOrFail($id);
$plan->name = $request->name;
$plan->total_price = $request->total_price;
$plan->total_gems = $request->total_gems;
$plan->image = $request->image;
$plan->plan_category_id = $request->plan_category_id;
$plan->save();
return redirect('plan')->with('flash_message', 'Plan Info Updated!');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function destroy($id)
{
Plan::destroy($id);
return redirect('plan')->with('flash_message', 'Plan deleted!');
}
}
I tried to match the data-bs-target and tabindex, the problem could be caused by the controller but all credentials are matched, can anybody see what is going on?
2
Answers
Never mind it was just a
</div>missing thank you everyoneMake a simple button named Edit Record in your foreach loop as followed:
Make a single modal at the bottom of body of your document. give it the same id as given in data-target of the Edit Record button above.
Then make a form with csrf token and all the labels and input fields (including a hidden input field for id of the record we will edit and save) inside your modal. Make sure to give ids to all input fields you want to populate.
Now I would recommend using jQuery for handling on-click event of the Edit Record button but you can do it with JavaScript as well. Just trigger a function on on-click event and fetch data for each field from the where edit button was clicked upon (the nearest ). Populate the form fields with that data keep id field hidden. On save handle the post request from controller and update the record and return back.
If you use ajax to send post request then just make sure to reset the form inside the function you trigger on-click of Edit Record button for some other row and also to close modal on successful post request made using ajax.