I am using combo box - select custom, using gentelella template. On example , gentelella select custom, we can type text on the combo box and the list on the combo box will change accordingly to the text we type.
But In my case, I can not type the text on the combo box. It won't work.
this is my view
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">NIK</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" tabindex="-1">
<option></option>
<?php foreach ($listkary as $key => $value) { ?>
<option value="<? echo $value['idnik']?>"><? echo $value['kodenik']?> - <? echo $value['namakary']?></option>
<? } ?>
</select>
</div>
</div>
Related
hai everyone i want to fetch data (affected device name, device intended use, class of device) from database based on my selected dropdown (mda registration num),i get the registration numb er from database but i don't how to fetch other related datas based on registration num.How i can gets datas.Here my controller n create.blade.php,pls help me
create.blade.php
<div class="form-group row">
<label for="inputMedName col-auto" class="col-lg-3 col-form-label " for="mdaRegisNo1">1. MDA Device Registration No. <span style="color:red;">*</span></label>
<div class="col-6 col-lg-6">
<select name="mdaRegisNo" class="form-control " id = "mdaRegisNo1" select data-size="5" data-live-search="true">
<option > Select MDA Registration Number</option>
#foreach($devices as $key=>$device)
<option value="{{$key}}">{{$device->device_reg_no}}</option>
#endforeach
</select>
</div>
<input type='button' value='Seleted option' id='but_read'>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label ">2. Affected Device Name <span style="color:red;">*</span></label>
<div class="col-9 col-lg-9">
<input name="devName" type="text" class="form-control" >
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label ">3. Device intended use <span style="color:red;">*</span></label>
<div class="col-9 col-lg-9">
<input name="devUse" type="text" class="form-control" >
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label ">4. Class of Device<span style="color:red;">*</span></label>
<div class="col-9 col-lg-9">
<input name="devClass" type="text" class="form-control" >
</div>
</div>
RecallControlle.php
public function create()
{
$recall = Recall::latest()->first();
$ref_recall = 'MDA/Recall/P'.$this->getRefSuffix($recall);
//$devices = DB::table('devices');
$devices = Device::get();
$post = Device::query();
$device = DB::table('devices')->select('device_reg_no')->distinct()->get()->pluck('device_reg_no')->sort();
//dd($devices);
//return json_encode($devices);
return view('recall.create',['devices'=>$devices])->with([
'ref_recall' => $ref_recall,
'ref_mpr' => ''
]);
}
You have to use js to request data when your dropdown been selected.
Follow this doc to request data: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
pass your selected value to your api
get result from api
append value to input
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.
So I have built the script below to take an array, group them by one of the fields, which then generates the accordion headings. The data within the array is then build as rows within the accordion.
What I would like to do is have the containing card be of fixed height, so that which ever accordion is clicked, then has the data scroll within the area of the card....
Bootstrap is standard for the card class.
<div class="card" style="height: 80%; width: 100%">
<div class="card-header">Service History for <?php echo $vesseldata['vesselTag']; echo $own;?></div>
<div id="accordion">
<?php $newArray=array();
foreach($history as $val){
$key=$val['component'];
$grouped[$key][]=$val;
}
foreach($grouped as $group){?>
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#<?php echo str_replace(' ', '',$group[0]['component']);?>">
<?php echo $group[0]['component']; ?>
</a>
</div>
<div id="<?php echo str_replace(' ', '',$group[0]['component']); ?>" class="collapse" data-parent="#accordion">
<div class="card w-100">
<?php foreach ($group as $occurance){?>
<div class="row no-gutters">
<div class="col-md-2 col-lg-2 d-flex">
<input type="text" class="form-control text-primary" disabled value="<?php echo $occurance['date'];?>">
</div>
<div class="col-md-2 col-lg-2">
<input type="text" class="form-control" disabled value="<?php echo $occurance['engineer'];?>">
</div>
<div class="col-md-4 col-lg-4">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['comment'];?></textarea>
</div>
<div class="col-md-3 col-lg-3">
<textarea class="form-control" rows="6" disabled ><?php echo $occurance['parts'];?></textarea>
</div>
<div class="col-md-1 col-lg-1 d-flex align-items-center justify-content-center">
<img src="small-globe.jpg" alt="Map" style="width:20px;height:20px;border:0;">
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php }?>
</div>
Hope someone is able to help.
Your card has its height set to 80%. You are using relative units which means the card will be 80% of it's parent's height. You have it fixed to be 80% of its parent and I'm not sure if that's what you want.
However, to enable scrolling within your card when content is too big to fit inside the card, add this property within your style attribute:
overflow: scroll;
I have about 30 different forms that will be displayed in a wizard, a form will be displayed based on the value from the dropdown selected, if all forms are created in a view file it doesn't seem effective, I try to save each form in the database and it will Called based on the dropdown value but not as expected, please help with this problem.
this is the code example that I saved into the database:
<label>Yang Bertandatangan Dibawah ini:</label>
<div class="form-group row">
<label class="col-form-label col-lg-2">Nama</label>
<div class="col-lg-10">
<select name="pemberi" class="form-control select-search" required data-fouc>
<option value="">--pilih--</option>
<?php
if(is_array($pegawai)){
foreach($pegawai as $row){
?>
<option value="<?php echo $row->nip;?>"><?php echo $row->nama;?></option>
<?php
}
}
?>
</select>
</div>
</div>
<label>MEMERINTAHKAN:</label>
<div class="form-group row">
<label class="col-form-label col-lg-2">Kepada:</label>
</div>
<div class="form-group row">
<label class="col-form-label col-lg-2">Nama:</label>
<div class="col-lg-10">
<select name="penerima" class="form-control select-search" required data-fouc>
<option value="">--pilih--</option>
<?php
if(is_array($pegawai)){
foreach($pegawai as $row){
?>
<option value="<?=$row->nip;?>"><?=$row->nama;?></option>
<?php
}
}
?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-lg-2">Jabatan:</label>
<div class="col-lg-10">
<select name="jabatan_penerima" class="form-control select-search" required data-fouc>
<option value="">--pilih--</option>
<?php
if(is_array($pembuat)){
foreach($pembuat as $row){
?>
<option value="<?=$row->id;?>"><?=$row->nama_jabatan;?></option>
<?php
}
}
?>
</select>
</div>
</div>
<label>Untuk:</label>
<div class="row">
<div class="col-md-9">
<div class="form-group">
<textarea rows="10" cols="4" class="form-control" placeholder="Isi Perintah" name="isisurat" id="isisurat" required></textarea>
</div>
</div>
</div>
The code runs well if it is directly written in source code, but different if called from the database
as expected if I write the code in page directly:
If I save the code in database and call based on value of dropdown,it will show error:
Why don't you use normal load views based on a condition like in your index you would do this:
VIEW ONE
VIEW TWO
// and so on ...
Then in your controller:
public function your_method($your_view)
{
$data['view'] = $this->load->view($your_view, null, TRUE);
// Setting third param as true will return the view as a string
$this->load->view('main_view', $data);
}
Now in your main view you have a variable called view of your requested view just echo it in your main content area.
I have created a form which has 2 select box which also generate the options from database but the problem is when I do click on submit button the select box becomes empty.
here is the codes:
View:
<ol class="breadcrumb-icon">
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="icon fa fa-inbox"></i> Add Courses</li>
</ol>
<div class="page-header">
<h1>Add Courses:</h1>
</div>
<div class="well">
<?php if(isset($error)) echo $error;?>
<?php
$this->load->helper('form');
$attributes = array('role' => 'form','class'=>'form-horizontal');
echo form_open_multipart('admin/addcourses',$attributes);
?>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Course Category:</label>
<div class="col-sm-10">
<select name="category" class="form-control">
<?php
foreach ($cat as $row)
{
echo "<option value='".$row->category_id."'>".$row->category_name."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Course Location:</label>
<div class="col-sm-10">
<select name="location" class="form-control">
<?php
foreach ($loc as $row)
{
echo "<option value='".$row->location_id."'>".$row->location_name."</option>";
}
?>
</select>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Course Language:</label>
<div class="col-sm-10">
<select name="language" class="form-control">
<option value="English">English</option>
<option value="Arabic">Arabic</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Course Name</label>
<div class="col-sm-10">
<input type="text" name="coursename" class="form-control" id="inputPassword3" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Course Date:</label>
<div class="col-sm-10">
<input type="text" name="date" id="range-picker" readonly class="form-control kd-daterange">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Course Image</label>
<div class="col-sm-10">
<input type="file" name="course_image" class="upload" readonly class="form-control kd-upload">
<p>keep it empty to use the default image.</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Add Course</button>
</div>
</div>
</form>
</div>
</div> <!-- /.container laaast -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/extended.min.js"></script>
<script>
extended = new Extended();
</script>
Controller addcourses.php
public function addcourses()
{
if ($this->session->userdata('is_logged_in'))
{
$this->load->model('admin/read_cat_loc');
$data['cat']= $this->read_cat_loc->read_categories();
$data['loc']= $this->read_cat_loc->read_locations();
$this->load->view('admin/header_view');
$this->load->view('admin/addcourses_view',$data);
$this->load->view('admin/footer_view');
}
else {
redirect('admin/home');
}
}
model codes
class Read_cat_loc extends CI_Model {
public function read_categories() {
$query= $this->db->get('course_category');
return $query->result();
}
public function read_locations() {
$query= $this->db->get('course_location');
return $query->result();
}
}
ok solved:
I did this in main controller section :
$this->load->model('admin/read_cat_loc');
$data['cat']= $this->read_cat_loc->read_categories();
$data['loc']= $this->read_cat_loc->read_locations();
$this->load->view('admin/header_view');
$this->load->view('admin/addcourses_view',$data);
$this->load->view('admin/footer_view');
but in other areas where I have to reload the view I did this only:
$this->load->view('admin/header_view');
$this->load->view('admin/addcourses_view',$data);
$this->load->view('admin/footer_view');
without the model part to retain the data again ...
If you know better way It will be great. Thanks