skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Data tidak muncul pada modal bootstrap menggunakan ajax

hallo selamat siang, mau bertanya. kenapa yah data dari DB tidak muncul di modal bootstrap, dan gak ada error, jadi seperti ajax nya tidak berfungsi.

ini menu nya, jadi saya gunakan data table buat button modal nya... jadi pas data di klik muncul modal

<tr>
    <td  ><center><input type="checkbox" value="1" ></center></td>
    <td  ><center><?php echo ++$no_urut;?></center> </td>
    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_cid']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_mate']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_hues']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_width']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_name']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_unit']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_cury']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_pack']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_price']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_date']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_weight']?></center></td>

    <td  class=" md-trigger" data-toggle="modal" data-modal="myModal" class="view_data" ><center><?php echo $data['cp_cprice']?></center></td>
</tr>

ini modal bootstrap nya


    <div class="md-modal md-effect-10 md-drak colorize-overlay" id="myModal"   >

      <div class="md-content">

        <h3>Description</h3>
          <div>
            <div class="modal-body" id="data">

              </div>

                 <button class="md-close btn btn-default">Close me!</button>
                </div>
              </div>
            </div>
         </div>

   <div class="md-overlay"></div><!-- the overlay element -->
    <!-- /Custom Modals -->

ini ajax


$(document).ready(function(){
        $('.view_data').click(function () {
            var id_data = $(this).attr("id");
            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
		url : 'detail.php',
                method : 'post',
                data :  {id_data:id_data},
                success : function(data){
                $('#data').html(data);//menampilkan data ke dalam modal
		$('#myModal').modal("show");



                }
            });
         });
    });

ini detail nya data yg muncul di modal

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8" />

  <!-- Bootstrap -->
    <link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../../maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/vendor/animate/animate.css">
    <link type="text/css" rel="stylesheet" media="all" href="assets/js/vendor/mmenu/css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="assets/js/vendor/jgrowl/css/jquery.jgrowl.min.css">
    <link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">
    <link rel="stylesheet" href="assets/js/vendor/typeahead/css/typeahead.js-bootstrap.css">
    <link rel="stylesheet" href="assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="assets/js/vendor/no-ui-slider/css/jquery.nouislider.min.css">
    <link rel="stylesheet" href="assets/js/vendor/tabdrop/css/tabdrop.css">
    <link rel="stylesheet" href="assets/js/vendor/modals/css/component.css">

    <link href="assets/css/minimal.css" rel="stylesheet">
<?php

   include "conection.php";

$sql =("SELECT cp_cid,cp_mate,cp_hues,cp_width,cp_mode,cp_name,cp_unit,cp_cury,cp_pack,cp_price,cp_date,cp_weight,cp_cprice,cp_uprice,cp_temp FROM [cust_pric] LIMIT WHERE cp_flag=2 ");

$result = mssql_query($sql);

$row = mssql_fetch_array($result)?>


            <table class="table table-hover table-custom ">
	<tbody>
                <tr>
                    <th>cp_cid</th>

                    <td><?php echo $row['cp_cid'];?></td>
                </tr>
                <tr>
                    <th>cp_mate</th>

                    <td><?php echo $row['cp_mate'];?></td>
                </tr>
                <tr>
                    <th>cp_hues</th>

                    <td><?php echo $row['cp_hues'];?></td>
                </tr>
		<tr>
                    <th>cp_width</th>

                    <td><?php echo $row['cp_width'];?></td>
                </tr>
		<tr>
                    <th>cp_mode</th>

                    <td><?php echo $row['cp_mode'];?></td>
                </tr>
		<tr>
                    <th>cp_name</th>

                    <td><?php echo $row['cp_name'];?></td>
                </tr>
		<tr>
                    <th>cp_unit</th>

                    <td><?php echo $row['cp_unit'];?></td>
                </tr>
		<tr>
                    <th>cp_cury</th>

                    <td><?php echo $row['cp_cury'];?></td>
                </tr>
		<tr>
                    <th>cp_pack</th>

                    <td><?php echo $row['cp_pack'];?></td>
                </tr>
		<tr>
                    <th>cp_price</th>

                    <td><?php echo $row['cp_price'];?></td>
                </tr>
		<tr>
                    <th>cp_date</th>

                    <td><?php echo $row['cp_date'];?></td>
                </tr>
		<tr>
                    <th>cp_weight</th>

                    <td><?php echo $row['cp_weight'];?></td>
                </tr>
		<tr>
                    <th>cp_cprice</th>

                    <td><?php echo $row['cp_cprice'];?></td>
                </tr>
		<tr>
                    <th>cp_uprice</th>

                    <td><?php echo $row['cp_uprice'];?></td>
                </tr>
		<tr>
                    <th>cp_temp</th>

                    <td><?php echo $row['cp_temp'];?></td>
                </tr>
	</tbody>
            </table>
php ajax
avatar Obbytokun
@Obbytokun

186 Kontribusi 16 Poin

Diperbarui 5 tahun yang lalu

Tanggapan

  1. coba kode yang dipaste yang relevan aja, kalau terlalu banyak bacanya susah. 2. inspect element > lihat di tab console errornya apa

ga ada error

2 Jawaban:

Di kode kamu saat kelas .view_data di click idnya akan diambil <pre> $('.view_data').click(function () { var id_data = $(this).attr("id"); //... </pre> Padahal kalau dilihat elemen .view_data tidak punya attribute id, cek pelan pelan, menebak error dimana susah

Mulai dari backendnya pastikan saat diakses biasa (tidak lewat ajax) datanya sudah keluar sesuai yang di mau dengan die(var_dump($data));

berikutnya di javascriptnya tiap ngelakuin sesuatu biasakan console.log($variable) untuk nilainya pelan-pelan dilihat sudah sesuai yang dimau atau tidak

avatar hilmanski
@hilmanski

2670 Kontribusi 2132 Poin

Dipost 5 tahun yang lalu

Jawaban Terpilih

Ya ,benar kata mas Hilman silahkan cek kode kamu pelan-pelan karena saya juga melihat ada 2 atribut class dalam 1 elemen yg kamu buat sehingga kode yg kamu tulis seperti ini <pre> $('.view_data').click(function () { var id_data = $(this).attr("id"); // Ini tidak akan ada efek </pre> karena class yg di anggap falid untuk element tersebut adalah atribut class pertama <pre> class=" md-trigger" </pre> Seharusnya bisa kamu gabung seperti ini, <pre> class="md-trigger view_data" </pre>

avatar Rismal
@Rismal

131 Kontribusi 105 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban