отображать данные после выбора опций из выпадающего кода - PullRequest
1 голос
/ 08 июля 2019

Я очень новичок здесь, а также для codeigniter и Ajax.

Мне нужно отобразить данные после выбора из выпадающего меню без перезагрузки страницы / кнопки отправки.Он отображается после выбора параметра, поскольку я могу правильно отображать данные для параметров, теперь мне просто нужно отобразить данные, основанные на этом параметре, в двух отдельных полях.

Например:

paket: paket 1

описание: это что-то что-то

jadwal: скоро будет объявлено

варианты - это тот продукт, который мне нуженв отдельных полях будет отображаться описание в поле description и поле jadwal в поле jadwal.

Вот код, который у меня есть для представления:


//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>

У меня естьНе пишите никакого кода для моделей и контроллеров, любая помощь и объяснение процесса (если вам не о чем спрашивать) будут очень благодарны, спасибо.

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Разделите ваше представление на два:

Первое представление: с именем sand_main.php в папке 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>

Где JS должно быть следующим:

<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>

Второе представление: с именем sand_view_2.php в папке 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>

Контроллер: в моем примере 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
                            ]); 
    }  
}

Модель: 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;
    }

}

Проверьте это.У меня это работает.

0 голосов
/ 08 июля 2019

Попробуйте реализовать этот код, ссылка в W3schools Jquery

$(document).ready(function(){
    $("#btn_form_submit").click(function(){
        $.ajax({
           cache:false,
           type:"POST"
           //equivalent of action attribute in form tag
           url:"path/to/your/php/"
           data: $("my_form").serialize(),
           success: function(data){
               //returns data from php if success
           }
        });
    });

});

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...