Question

我有ajax代码

 <script type="text/javascript">

    $(".monitor").click(function(){

        $("#list-format").html("");
        let nama_puskesmas = $(this).data('nama');
        let id_puskesmas = $(this).data('id');
        let nomor = $(this).data('nomor');
        let base_url = '<?php echo base_url();?>'


        $.ajax({
            url     : 'get_data',
            method  : 'post',
            dataType: 'json',
            data    : {id_puskesmas:id_puskesmas},
            success : function(response){

                $.each(response, function(i, obj){
                    $("#list-format").append("<li>"+obj.format+"</li>");
                });

                $("#title-modal").html(nama_puskesmas);
                $("#exampleModalCenter").modal('show');
                $("#button-submit").html(`<a href="${base_url}dinas/view_monitor/${id_puskesmas}" id="submit_modal" class="btn btn-primary">Lihat data</a>`)
                $("#button-submit2").html(`<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`)


            }



        })      

    })
</script>

，如果运行该程序将显示如下内容

Data yang belum diupload
1.Form Lap PTM
2.Form Lap Posbindu
3.Form Lap IVA
4.Form Lap Jiwa
5.Form Lap Indera dan Gimul
6.Form Lap Diare
7.Form Lap LROA
8.Form Lap Thypoid
9.Form Lap Laporan Hiv Aids dan IMS
10.Form Laporan Hepatitis

并且我会将这些数据回显到我的另一个函数

如何从此代码中创建变量：

 $.each(response, function(i, obj){
                    $("#list-format").append("<li>"+obj.format+"</li>");
                });

对此进行回应：

$("#button-submit2").html(`<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`)

或有任何想法可以使其与此＃button-submit2相呼应？非常感谢你:)对英语不好感到沮丧

Answer 1

<script type="text/javascript">
// this var contains a new element, which is not yet appended to the DOM
var $receivedItems = $('<div></div>');
$(".monitor").click(function(){

    $("#list-format").html("");
    let nama_puskesmas = $(this).data('nama');
    let id_puskesmas = $(this).data('id');
    let nomor = $(this).data('nomor');
    let base_url = '<?php echo base_url();?>'


    $.ajax({
        url     : 'get_data',
        method  : 'post',
        dataType: 'json',
        data    : {id_puskesmas:id_puskesmas},
        success : function(response){
            $.each(response, function(i, obj){
                // instead of echoing it directly by appending it to the DOM, store your list items in the hidden or not-appended element in your variable
                $receivedItems.append("<li>"+obj.format+"</li>");
                $("#list-format").append("<li>"+obj.format+"</li>");
            });

            // ..... your other stuff

            var buttonHtml = `<a href="https://wa.me/${nomor}?text=Laporan%20Yang%20Masih%20Belum%20Lengkap%20Adalah%20Sebagai%20Berikut%20Ini" id="submit_modal" class="btn btn-primary">Kirim Pesan</a>`;
            var $button2 = $(buttonHtml);

            $button2.on('click', function(e) {
                // be aware to use href only as a fallback if js does not work. otherwise your url will change and js won’t be executed
                e.preventDefault();
                // on click, you can append the list items stored in $receivedItems
                $("#list-format").append($receivedItems.children());
            });
            // be aware of nesting a and button tags, you shouldn’t
            $("#button-submit2").append($button2);

        }

    })      

})
</script>

我在代码中添加了一些注释。通过这种方法，您可以将所有收到的项目存储在尚未附加到DOM节点的jQuery对象中。这将通过触发添加到Submit2按钮的单击事件。

如何使变量在ajax上回显此数据

1 个答案: