I'm very new here and also to codeigniter and Ajax.
I need to display data after selecting from the drop down option without reloading the page / submit button. It displays after the option is selected as I'm able to properly display data for the options, now I just need to display data based on that option on two separate fields.
For example :
paket : paket 1
description : its something something
jadwal : soon to be announced
the options are the product, the one I need to be displayed on their separate fields is the description on description field and jadwal on jadwal field.
Here is the code I have for the view:
//this is the code for the options
<div class="form-group">
<label for="paket">Pilih Paket</label>
<select class="form-control form-control-sm" name="paket" id="paket">
<option value="">Pilih Paket</option>
<?php
foreach ($datatour as $dttour)
{
if ($id==$dttour->id)
{
$s='selected';
}
else
{
$s='';
}
?>
<option <?php echo $s ?> value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<div class="col-md-8" align="left">
<label for="jadwal">Jadwal</label>
<div style="border:1px solid #ccc;text-align:left;background-color:white;">
// this is where i display the jadwal data
</div>
</div>
</div>
<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
<div class="row">
<h3>Detail Paket</h3> <br>
// this is where i display the description data
<p></p>
</div>
</div>
I haven't written any code for the models and the controllers, any help and explanation of the process (if that's not much to ask) would be very much appreciated, thank you.
Separate your view in two views:
First view: named sand_main.php in folder sandbox_v
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group">
<label for="paket">Pilih Paket</label>
<select class="form-control form-control-sm" name="paket" id="paket">
<option selected value="">Pilih Paket</option>
<option value="123">123</option>
<option value="324">566</option>
<option value="555">333</option>
<!-- I've used my own code, for checking the result, you should use your:
<option value="">Pilih Paket</option>
<?php
foreach ($datatour as $dttour)
{
if ($id==$dttour->id)
{
$s='selected';
}
else
{
$s='';
}
?>
<option <?php echo $s ?> value="<?php echo $dttour->id;?>"><?php echo $dttour->paket;?></option>
<?php
}
?>
-->
</select>
</div>
<div id="info"></div>
Where JS should be next:
<script type="text/javascript">
$(function(){
$('#paket').unbind('change');
$('#paket').change(function(){
var opt_sel = $('#paket').val();
$.ajax({
method:"POST",
url:'/index.php/sandbox/s1',
data:{
sel_op:opt_sel
}
}).done(function(a){
$('#info').html(a);
}).fail(function(){
alert("It's an epic fail.");
});
});
})
</script>
Second view: named sand_view_2.php in folder sandbox_v
<div class="row">
<div class="col-md-8" align="left">
<label for="jadwal">Jadwal</label>
<div style="border:1px solid #ccc;text-align:left;background-color:white;">
<?= $j_info; ?>
</div>
</div>
</div>
<div class="kolom" style="border:1px solid #ccc;background-color:white;overflow:auto;" align="center">
<div class="row">
<h3>Detail Paket</h3> <br>
<?= $d_info; ?>
<p></p>
</div>
</div>
Controller: in my example sandbox.php
<?php
class Sandbox extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
// here you should get your $datatour data
$this->load->view('sandbox_v/sand_main.php', [
'datatour' => $datatour
]);
}
public function s1() {
$sel_val = $this->input->post('sel_op');
/*you can use your DB for getting a description for each value
* in this case you should add in __construct() your model as $this->load->model('your_model);
* or use your DB connection directly here.
*/
/* with your model:
* $jdwal_info = $this->your_model->your_jdwal($sel_val);
* $detail_info = $this->your_model->your_detail($sel_val);
*/
// without. It means that you've got info in the other way, for example, in predefined way:
if ($sel_val == 555) {
$jdwal_info = 'descr 1';
$detail_info = 'detail 1';
} else if ($sel_val == 123 ) {
$jdwal_info = 'descr 123';
$detail_info = 'detail 123';
} else if ($sel_val == 324 ) {
$jdwal_info = 'descr 324';
$detail_info = 'detail 324';
} else {
$jdwal_info = 'descr N\A';
$detail_info = 'detail N\A';
}
$this->load->view('sandbox_v/sand_view_2.php',[
'j_info' => $jdwal_info,
'd_info' => $detail_info
]);
}
}
Model: named your_model.php
<?php
class Your_model extends CI_Model {
function __construct()
{
$this->load->database();
}
public function your_jdwal($a) {
// process of getting result from DB over input variable $a (the name of it doesn't matter)
return $res;
}
public function your_detail($a) {
// process of getting result from DB over input variable $a (the name of it doesn't matter)
return $res;
}
}
Check it. It works for me.