how to show selected values in multi-select - laravel

I'm facing one issue about multi-select.
onchange i'm runnig ajax and on ajax success option appends to multiselect.
but at the time of edit i'm not able to trigger ajax and not able to show selected option in multiselect.
please check my code
form fleds
<div class="form-group {{ $errors->first('preferred_city', 'has-error') }}">
<label class="control-label col-lg-2">Preferred City
: </label>
<div class="col-lg-10">
<select name="preferred_city[]" class="form-control" id="preferred_city" multiple="multiple" style="color: #333">
#foreach($cities as $preferred_city)
#if(!empty($studentsDetails->preferred_city))
<option value="{{$preferred_city->id}}" {{ (in_array($preferred_city->id,\GuzzleHttp\json_decode($studentsDetails->preferred_city) )) ? 'selected' : '' }}>{{$preferred_city->city_name}}</option>
#else
<option value="{{$preferred_city->id}}">{{$preferred_city->city_name}}</option>
#endif
#endforeach
</select>
<span class="help-block">{{ $errors->first('preferred_city', ':message') }}</span>
</div>
</div>
<div class="form-group {{ $errors->first('collage_preferences', 'has-error') }}">
<label class="control-label col-lg-2">College Preferences
: </label>
<div class="col-lg-10">
<select id="collage_preferences" name="collage_preferences[]" class="form-control" multiple="multiple">
</select>
<span class="help-block">{{ $errors->first('collage_preferences', ':message') }}</span>
</div>
</div>
js
collage id's i'm fetching from database
var collage_pref = {!! $studentsDetails->collage_preferences !!}
I'm triggering preferred_city on page load
$(document).ready(function(){
if(studentsDetails !=null){
$('#preferred_city').trigger('change');
// $('#pic_file').trigger('change');
}
});
$('#preferred_city').on('change',function(){
$("#collage_preferences").multiselect('rebuild');
$.ajax({
url:'{{route('student.getInstituteslists')}}',
type:'get',
async: false,
data:{grad_course:$('#grad_course').val(),preferred_city:$('#preferred_city').val()},
success:function(e){
$('#collage_preferences').multiselect('refresh');
e.forEach(function(inst){
var data = '';
data +='<option value="'+ inst.id+'" >'+ inst.institute_name+'</option>';
$('#collage_preferences').append(data);
});
$('.collage_preferences').multiselect('rebuild');
}
});
});

$data = [];
$data['airlines'] = '';
$airlines = (Airline::select('Code','Name')->get())->toArray();
$myairlines = BlackoutAirline::where('SupplierId',$request->SupplierId)->pluck('AirlineCode')->toArray();
foreach($airlines as $airline) {
if(in_array($airline['Code'], $myairlines) ){
$data['airlines'] .= '<option value="'.$airline['Code'].'" selected>'.$airline['Name'].'</option>';
}
else{
$data['airlines'] .= '<option value="'.$airline['Code'].'">'.$airline['Name'].'</option>';
}
}
return json_encode($data);

Related

Laravel 8 Dynamic Dependent Input

it's been a while since I stuck in this problem. So I want to make a dynamic selection, when I select a nis (student_id) then the column nama (name) is filled with the student name.
Input form
Output i want
method create
public function create()
{
return view('admin.counseling.create', [
'title' => 'Tambah Bimbingan dan Konseling',
'students' => Student::all()
]);
}
create_blade.php
<form action="/admin/counseling/store" method="post" enctype="multipart/form-data">
#csrf
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Nomor Induk Siswa</label>
<select name="nis" required class="form-control" id="nis">
<option value="0" disabled="true" selected="true">-Pilih-</option>
#foreach($students as $student)
<option value="{{$student->id}}">{{$student->nis}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" name="name" required />
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<button
type="submit"
class="btn btn-success px-5"
>
Simpan
</button>
</div>
</div>
</div>
</form>
I have watched and read some questions with similar problems, and yet I still didn't get it
UPDATE
My method in my controller
public function find_nis(Request $request)
{
$data = Student::find($request->id); //Counseling::with('student', 'student.student_class')->where('student_id', $request->id)->first();
return response()->json(['view' => view('admin.counseling.create', ['data' => $data])->render()]);
}
My Ajax in create.blade.php
<script type="text/javascript">
$(document).ready(function (){
$(document).on('change','.student_nis',function () {
var student_id = $(this).val();
var a = $(this).parent();
console.log(student_id);
var op="";
$.ajax({
type : 'GET',
url : '{!! URL::to('find_nis') !!}',
data : 'id=' + student_id,
success:function(data){
console.log(data);
a.find('.student_name').val(data.name);
},
error:function(){
}
});
});
});
</script>
My Route
Route::get('/admin/counseling/find_nis', [CounselingController::class, 'find_nis'])->name('find_nis');
this is output in my browser console when i select nis 1212
i think for getting response from DB without refresh page you should use ajax,
post student_id with ajax to Controller get username from DB and return your view like this:
in your blade:
first you must set this meta tag inside of :
<meta name="csrf-token" content="{{ csrf_token() }}">
then config and post your data with ajax like this:
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var studentId = $("input[name=student]").val();
$.ajax({
xhrFields: {withCredentials: true},
type:'POST',
url:"{{ route('getStudentInfo') }}",
data:{studentId:studentId},
success:function(data){
$('html').html(data.view);
}
});
</script>
in your Controller inside of getStudentInfo():
$student = DB::table('user')->find($studen_id);
$username = $student->username;
return response()->json(['view' => view('admin.counseling.create', compact('username'))->render()]);
Here the working solutions
*Route
Route::get('/admin/counseling/find_student', [CounselingController::class, 'find_nis'])->name('find_student');
*Controller
public function create()
{
return view('admin.counseling.create', [
'title' => 'Tambah Bimbingan dan Konseling',
'students' => Student::all(),
'problems' => Problem::all()
]);
}
public function find_nis(Request $request)
{
$student = Student::with('student_class')->findOrFail($request->id);
return response()->json($student);
}
*blade
<div class="container-fluid mt--7">
<div class="mt-8">
<div class="dashboard-content">
<div class="row">
<div class="col-12">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="/admin/counseling/store" method="post" enctype="multipart/form-data">
#csrf
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Nomor Induk Siswa</label>
<select name="nis" required class="form-control" id="nis">
<option value="0" disabled="true" selected="true">-Pilih-</option>
#foreach($students as $student)
<option value="{{$student->id}}">{{$student->nis}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" name="student_name" id="student_name" disabled required/>
</div>
<div class="form-group">
<label>Kelas</label>
<input type="text" class="form-control" name="student_class_name" id="student_class" disabled required/>
</div>
<div class="form-group">
<label>Permasalahan</label>
<div class="row">
<div class="col">
#foreach ($problems as $problem)
<div class="form-check">
<input type="checkbox" id="" name="problem_name[]" value="{{ $problem->name }}">
<label class="fs-6 fw-light">{{ $problem->name }}</label>
</div>
#endforeach
</div>
</div>
</div>
<div class="form-group">
<label>Bobot Permasalahan</label>
<select name="priority" required class="form-control" id="nis">
<option value="null" disabled="true" selected="true">-Pilih-</option>
<option value="1">Normal</option>
<option value="3">Penting</option>
<option value="5">Sangat Penting</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<button
type="submit"
class="btn btn-success px-5"
>
Simpan
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
*ajax
<script type="text/javascript">
$(document).ready(function (){
$(document).on('change', '#nis', function() {
var student_id = $(this).val();
var a = $('#student_name').parent();
$.ajax({
type : 'GET',
url : '{{ route('find_student') }}',
data : 'id=' + student_id,
success:function(data){
a.find('#student_name').val(data.name);
},
error:function(){
}
});
});
$(document).on('change', '#nis', function() {
var student_id = $(this).val();
var a = $('#student_class').parent();
$.ajax({
type : 'GET',
url : '{{ route('find_student') }}',
data : 'id=' + student_id,
success:function(data){
a.find('#student_class').val(data.student_class.name);
},
error:function(){
}
});
});
});
</script>

select2 not showing options within livewire component

I am working with laravel livewire.There is a component to update brands and categories of a product. category and brand select option is a select2 option. dropdown showing as a select2, but does not show the options.
This is my component
<?php
namespace App\Http\Livewire\Components\MemberArea\Product;
use App\Models\ProductBrand;
use App\Models\ProductCategory;
use App\Models\Product;
use Illuminate\Support\Facades\Session;
use Livewire\Component;
class UpdateProductBrand extends Component
{
public $product_id;
public $product_category_id;
public $product_brand_id, $categories, $brands, $product;
public function render()
{
return view('pages.products.components.update-product-brand');
}
public function mount()
{
$this->product = Product::get($this->product_id);
$this->categories = ProductCategory::all();
$this->brands = ProductBrand::all();
$this->product_category_id = $this->product->product_category_id;
}
public function submit()
{
$data = $this->validate();
$product = Product::get($this->product_id);
Product::update($product, $data);
session()->flash('message', 'Brand Details Updated Successfully.');
}
}
This is My Blade
<div class="card-body">
<form wire:submit.prevent="submit">
<div class="row">
<div class="form-group col-lg-6">
<label class="h5">Product Category <sup class="text-danger">*</sup>|<button type="button"
id="new-category" class="btn btn-light ">+</button></label>
<select required class="form-control" wire:model="product_category_id" id="categories_edit">
<option value=""></option>
#foreach ($categories as $category)
<option {{ $product->product_category_id === $category->id ? 'selected' :'' }}
value="{{ $category->id }}">{{
$category->title }}</option>
#endforeach
</select>
</div>
#error('product_brand_id')
<span class="text-danger error">{{ $message }}</span>
#enderror
<div class="form-group col-lg-6">
<label class="h5">Product Brand <sup class="text-danger">*</sup>| <button type="button" id="new-brand"
class="btn btn-light">+</button></label>
<select class="form-control" wire:model="product_brand_id" id="brands_edit">
#foreach ($brands as $brand)
<option {{ $product->product_brand_id === $brand->id ? 'selected' :'' }} value="{{ $brand->id }}">
{{ $brand->title }}
</option>
#endforeach
</select>
</div>
#error('product_category_id')
<span class="text-danger error">{{ $message }}</span>
#enderror
<div class="form-group col-lg-12 text-center">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</div>
</form>
</div>
#push('js')
<script>
document.addEventListener("livewire:load", function (event) {
window.livewire.hook('afterDomUpdate', () => {
$('#categories_edit, #brands_edit').select2({
placeholder: 'Select an option',
});
});
});
$(document).ready(function () {
$('#categories_edit').select2();
$('#brands_edit').select2();
});
//set category on select
$('#categories_edit').on('change', function (e) {
var category_select = $('#categories_edit').select2("val");
console.log("category when select= " + category_select);
#this.product_category_id = category_select;
});
//set brand on select
$('#brands_edit').on('change', function (e) {
var brand_select = $('#brands_edit').select2("val");
console.log("brand when select= " + brand_select);
#this.product_brand_id = brand_select;
});
</script>
#endpush
this is how show it
when use wire:ignore it also not working. show only dropdown as select2 , but it does not show the options

I want to get data to the dropdown by using another dropdown in the same page

I have a dropdown on my page to load districts. And I have another dropdown to load Divisions according to that selected district. The below code I have got all the divisions. But I want only the divisions according to the selected districts. How can I do?
#php
$districtAll=\App\District::all();
#endphp
<div class="row">
<label class="col-md-4 control-label" for="district">9. District</label>
<div class="col-md-8">
<select name="district">
<option type="text" class="detail-wp" value="">Select District</option>
#foreach($districtAll as $all)
<option value="{{$all->DISTRICT_ID}}">{{$all->DISTRICT}} </option>
#endforeach
</select>
</div>
</div>
<br>
#php
$getDsAll=\App\DsDivision::all();
#endphp
<div class="row">
<label class="col-md-4 control-label" for="ds_division">10. DS Division</label>
<div class="col-md-8">
<select name="ds_division" class="form-control">
<option type="text" class="detail-wp" value=""></option>
#foreach($getDsAll as $all)
<option value="{{$all->DIVISION_ID}}">{{$all->DIVISION}} </option>
#endforeach
</select>
</div>
</div>
You can do it using ajax request:
$('select[name=district]').on('change', function(){
$districtId = $(this).val();
$.get('/division/district/'+$districtId).done(function(res){
$.each(res, function (key, value) {
$('select[name=ds_division]').append(`<option value='` + value.id + `'>` + value.name +`</option>`);
});
});
to make this working you will need a route like
Route::get("/division/district/{district}", "DivisionController#getByDistrictId");
DivisionController#getByDistrictIdwill be
public function getByDistrictId($district)
{
return Division::where('district_id',$district)->get();
}
this code just to give you an idea of how you can do it.

How to stay data on dropdown list after page reloading in laravel 5.7?

I am creating task like dependent dropdown but i want to stay data as it is after reloading of page. I am successful to achieve this task for first dropdown but i am confuse how can i stay data for second dropdown Plz need help. I am putting value in session and check in option value but i am confuse in second option value that how can i check session value in javascript option value.
Blade :
<?php $reason_id=Session::get('reason_id');?>
<div class="row">
<div class="col-lg-4">
<span><label><b>Reason for return</b></label></span>
</div>
<div class="col-lg-8 mt-1">
<div class="form-group">
<select class="form-control" id="reason" name="reason">
<option readonly>Select reason</option>
#foreach($reason as $id => $p_reason)
<option value="{{ $id }}" #if($reason_id==$id) selected="selected"#endif>{{$p_reason}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<span><label><b>Reason Details</b></label></span>
</div>
<div class="col-lg-8 mt-1">
<div class="form-group">
<select class="form-control" id="reason_detail" name="reason_detail">
</select>
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$('#reason').change(function(){
var ID = $(this).val();
if(ID){
$.ajax({
type:"GET",
url:"{{url('get-reason-details')}}?reason_id="+ID,
success:function(res){
if(res){
$("#reason_detail").empty();
$("#reason_detail").append('<option>Select Reason Detail</option>');
$.each(res,function(key,value){
$("#reason_detail").append('<option value="'+key+'">'+value+'</option>');
});
}else{
$("#reason_detail").empty();
}
}
});
}else{
$("#reason_detail").empty();
}
});
controller:
public function set_session(Request $req)
{
$data=$req->all();
Session::put('reason_id',$data['reason']);
Session::put('reason_detail_id',$data['reason_detail']);
$data=DB::table('product_details')->select('product_details.*')->where('product_id',$data['product_id'])->first();
$reason=DB::table('reason')->pluck('description','reason_id');
return view('returnproduct',['reason'=>$reason],['data'=>$data->product_id]);
}
public function get_reason($id)
{
$data=DB::table('product_details')->select('product_details.*')->where('product_id',$id)->first();
$reason=DB::table('reason')->pluck('description','reason_id');
return view('returnproduct',['reason'=>$reason],['data'=>$data->product_id]);
}
public function get_reason_details(Request $req)
{
$reason_detail_id=Session::get('reason_detail_id');
$reason_details = DB::table("reason_details")
->where("reason_id",$req->reason_id)
->pluck("reason_detail","reason_detail_id");
return response()->json($reason_details);
}

How to display data to textfield from combo selection in laravel

I'd like to display data to textfield based on combo/drop box selection in laravel 5.8. then save the data. is there complete tutorial how to do it from model, view and controller.
In Customer Controller
public function create()
{
$customer= Customer::all();
return view('Customer.create', compact('Customer'));
}
in view create.blade
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>CUSTOMER</strong>
<select type="text" class="form-control" name="kde_cust" id="cde_customer" required>
<option value=""> -- PICK CUST-- </option>
#foreach($cust as $cust)
<option value="{{ $cust->cde_cust }}" selected>{{ $cust->nme_customer }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>NAME</strong>
<input type="text" name="cust_name" id="cust_name" class="form-control" value="{{ $cust->nme_customer }}">
</div>
</div>
This should helps:
Create a route to get the user address:
Route::get('user-address/{user_id}','YourController#method')->name('user.address');
Your controller method should look like this:
public function yourFunction($cde_customer)
{
$customer = Customer::where('cde_customer', $cde_customer)->first();
$address = $customer->address;
return response()->json([
'address' => $address,
]);
}
Add this script to your blade:
$("#cde_customer").on('change', function(){
var user_id = $(this).val();
$.ajax({
url: '/user-address/' + user_id,
method: 'GET',
success: function(response){
$("#textfield").html(response.address);
}
});
});
Hope it helps.

Resources