如何从ajax制作锚

时间:2018-11-26 18:59:51

标签: jquery html json ajax

我只是使用数据类型为json的ajax从数据库mysql传输数据。这是以下代码

$("#klik_cari").click(function()
        {   
            //ajax config
            $.ajax({
                url: "<?php echo base_url('pengembalian/load_transaksi'); ?>",
                type: "POST",
                dataType: "JSON",
                success: function(response)
                {
                    //declare default variable
                    var html    = "";
                    var text    = "Tidak ada transaksi yang aktif.";
                    var urut    = 1;
                    //looping the variable
                    for (var i=0; i < response.length; i++)
                    {
                        //if condition
                        if (response.length < i)
                        {
                            html += '<tr>'
                                    +
                                    '<td colspan="6">'+text+'</td>'
                                    +
                                    '</tr>'
                        } else {
                            //if corresponding then parsing data from json
                            html += '<tr>'
                                    +
                                    '<td>'+urut+'</td>'+
                                    '<td>'+response[i].transaksi_no+'</td>'+
                                    '<td>'+response[i].anggota_nis+'</td>'+
                                    '<td>'+response[i].anggota_nama+'</td>'+
                                    '<td>'+response[i].transaksi_pinjam+'</td>'+
                                    '<td><a href="#" class="btn btn-info" id="tambah" transaksi_no="'+response[i].transaksi_no+'"><span class="fa fa-plus"></span></a></td>'
                                    +
                                    '</tr>';
                        }
                        //write in html id="list_transaksi"
                        $("#list_transaksi").html(html);
                        urut++; //increment for number rows>#
                    }
                }
            })
        })

我创建带有锚标记的新按钮,并且以下ID为“ tambah”,我想对“ tambah”进行一些功能,单击它会触发一些ajax并将其转移到,但是当我单击时此功能不起作用,这是以下代码:

//config the plus button
$("a#tambah").click(function(){
    //grab values from transaksi_no
        var no = $(this).attr("transaksi_no");
    //passing value using ajax
    $.ajax({
        url: "<?php echo base_url('pengembalian/get_selected');?>/" +no,
        type: "GET",
        dataType: "JSON",
        success: function(response) //if success then do this statement
        {
            //parsing data with response variable
            $("#anggota_nis").val(response.selected[0].anggota_nis);
            $("#anggota_nama").val(response.selected[0].anggota_nama);
            $("#transaksi_no").val(response.selected[0].transaksi_no);
            $("#tgl_pinjam").val(response.selected[0].transaksi_pinjam);
            $("#tgl_kembali").val(response.selected[0].transaksi_kembali);
            $("#banyak_buku").val(response.selected[0].banyak);
            //config for looping selected data
            var panjang = response.selected.length;
            var text = "";
            var html = "";
            //do looping
            for (var i=0; i < panjang; i++)
            {
                //write the value on looping progress
                html += '<tr>'
                        +
                        '<td>'+response.selected[i].buku_isbn+'</td>'+
                        '<td>'+response.selected[i].buku_judul+'</td>'+
                        '<td>'+response.selected[i].buku_penulis+'</td>'
                        +
                        '</tr>';
            }
            //write in id="data_buku" if looping success
            $("#data_buku").html(html);
            //calculate the fines from loan 
            var miliday     = 24 * 60 * 60 * 1000; // insert formula /day
            var firstDate   = new Date(response.selected[0].transaksi_kembali);// insert the value to some variable
            var secondDate  = new Date; //date now
            //calculate the diff
            var diff = secondDate - firstDate;
            var res  = Math.floor(diff / miliday)
            var banyak = response.selected[0].banyak;
            //if the result < 0 then write 0
            if (res < 1 ) 
            {
                //write the statement for the late return
                res = 0;
                //parsing the data to html input text as value
                $("#terlambat").val(res + " hari");
                $("#denda").val(res);
                convertToRupiah();
            } else {
                /*  
                    if the late return >= 1
                    then get a fine
                */
                /*
                    delay * fine (1000)
                */
                var denda = (res * 1000) * banyak;
                //pass to the input html
                $("#terlambat").val(res + " hari");
                $("#denda").val(denda);
                //do some convert currency
                convertToRupiah();
            }
            //tutup modal ketika data sudah selesai dimuat.
            $("#myModal_sizing").modal('hide');
        }, 
        error: function(jqXHR, textStatus, errorThrown) 
        {
            //if error then show this message
            alert('Error get data from ajax');
        }
    })
});

我已经检查了控制台日志,但未显示任何内容。上次我使用此方法使用foreach php及其它的功能,但是当我更改为ajax时,它没有运行。

我的表结构:

<table id="table_buku" class="table table-responsive table-striped table-hovered">
        <thead>
            <tr>
                <th>#</th>
                <th>No. Transaksi</th>
                <th>NIS Peminjam</th>
                <th>Nama Peminjam</th>
                <th>Tanggal Pinjam</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="list_transaksi">

        <!-- load data dari ajax -->

        </tbody>
        <tfoot>
            <tr>
                <th>#</th>
                <th>No. Transaksi</th>
                <th>NIS Peminjam</th>
                <th>Nama Peminjam</th>
                <th>Tanggal Pinjam</th>
                <th></th>
            </tr>
        </tfoot>

    </table>        

已经困了整整一天,但仍然没有得到解决方案,所以我来这里寻求帮助,而我的当地小组却未对我的问题做出任何回应:( << here's the picture table

1 个答案:

答案 0 :(得分:-3)

在$ .ajax调用中尝试使用小写字母类型和dataType

    type: "get",    // lowercase get
    dataType: "json",   // lowercase json

忽略上方。在较小的更正下做

将$(“ a#tambah”)。click(function()更改为表ID和tr click函数,并获取编号为Transaksi的第二个单元锚标记属性。如下所示:

$("#table_buku tr").click(function() {
...

...
 }