CODEWITHSUNDEEP
javascripthtmlyii2
han06
han06

Reputation: 57

ajax with 2 parameters yii2

I'm a beginner at yii2. I want to reload the page using ajax and based on the 2 selected parameters, but nothing happens. I don't know what's wrong. Can you help me to find the problem?Thanks

controllers code, i want to display based on 2 parameters (id and employee)

public function actionGetDataPegawai($pegawai, $id)
{
    $dataMatriksPegawai = new \yii\db\Query();
    $dataMatriksPegawai->select('c.abk_id, k.*, p.nama_petugas')->from('{{%alokasi_beban_kerja}} c');
    $dataMatriksPegawai->join('INNER JOIN', '{{%kegiatan}} k', 'c.id_kegiatan = k.id_kegiatan');
    $dataMatriksPegawai->join('INNER JOIN', '{{%petugas}} p', 'c.petugas_id = p.petugas_id');
    $dataMatriksPegawai->where("MONTH(tanggal_mulai) = $id");
    $dataMatriksPegawai->andwhere("c.petugas_id= $pegawai");
    $data = $dataMatriksPegawai->all();

    $total = count($data);

    return $this->renderAjax('_matriksPegawai', ['data' => $data, 'total' => $total]);

    
}

view code,i want to replay gantchart

$urlData = Url::to(['site/get-data-pegawai']);
$js = <<<js
$('._pilih').on('click', function(event){
event.preventDefault();
var data = {};
data.id = $('#bulan').val();
data.pegawai = $('#pegawai').val();
$.ajax({
    url:"{$urlData}",
  type:'GET',
  dataType:'json',
  data:data,
  success:function(data){
    $("#tabel").html(data);    } }); }); js; $this->registerJs($js)?>

<div class="col-lg-3">
    <?php echo '<b>Pilih Bulan : </b>' ?>
    <?= Html::dropDownList(
        'bulan',
        null,
        $items =
            [
                1 => 'Januari',
                2 => 'Februari',
                3 => 'Maret',
                4 => 'April',
                5 => 'Mei',
                6 => 'Juni',
                7 => 'Juli',
                8 => 'Agustus',
                9 => 'September',
                10 => 'Oktober',
                11 => 'November',
                12 => 'Desember',
            ],
        ['class' => 'form-control', 'id' => 'bulan', 'prompt' => '- Pilih bulan -']
    ) ?>
</div>
<div class="col-lg-3">
    <?php echo '<b>Pilih Pegawai : </b>' ?>
    <?= Html::dropDownList('pegawai', null, $dafpetugas, ['class' => 'form-control', 'id' => 'pegawai', 'prompt' => '- Pilih Pegawai -']) ?>


</div>
<div class="col-lg-3">
    <button class="btn btn-primary _pilih">Pilih</button>

</div>

<head>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['gantt']
        });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'id_kegiatan');
            data.addColumn('string', 'nama_kegiatan');
            data.addColumn('string', 'fungsi');
            data.addColumn('date', 'tanggal_mulai');
            data.addColumn('date', 'tanggal_selesai');
            data.addColumn('number', 'durasi');
            data.addColumn('number', 'persentase_selesai');
            data.addColumn('string', 'ketergantungan');

            data.addRows([
                <?php


                foreach ($result as $row) {
                    $date = new DateTime($row['tanggal_mulai']);
                    $date2 = new DateTime($row['tanggal_selesai']);
                    echo "['" . $row['abk_id'] . "',
                '" . $row['nama_petugas'] . "',
                '" . $row['nama_kegiatan'] . "',
                new Date (" . date("Y", strtotime($row['tanggal_mulai'])) . "," . DATE_FORMAT($date, 'm') . "," . DATE_FORMAT($date, 'd') . "),
                new Date (" . date("Y", strtotime($row['tanggal_selesai'])) . "," . DATE_FORMAT($date2, 'm') . "," . DATE_FORMAT($date2, 'd') . "),
                " . $row['durasi'] . ",
                " . $row['persentase_selesai'] . ",
                " . 'null' . "],";
                };
                ?>
            ]);

            var options = {
                height: 500,
                gantt: {
                    trackHeight: 30
                }
            };

            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

            chart.draw(data, options);
        }
    </script>
</head>

<body>
    <div id="chart_div"></div>
</body>

Upvotes: 0

Views: 63

Answers (1)

PDA3
PDA3

Reputation: 16

You can debug this by using inspect on your browser to see where the get/post request is going. It also helps to add throw new \Exception('ajax call was made'); in the action your trying to use to verify the request is going to right place.

I think it is either the request is not reaching action or that ajax is not rendering in the destination div.

Upvotes: 0

Related Questions