Tips for displaying data using AJAX with a variable

Question

Tips for displaying data using AJAX with a variable

I am currently working with AJAX code:

 <script type="text/javascript">

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

        $("#list-format").html("");
        let facility_name = $(this).data('nama');
        let facility_id = $(this).data('id');
        let number = $(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(facility_name);
                $("#exampleModalCenter").modal('show');
                $("#button-submit").html(`<a href="${base_url}dinas/view_monitor/${facility_id}" id="submit_modal" class="btn btn-primary">View Data</a>`)
                $("#button-submit2").html(`<a href="https://wa.me/${number}?text=Incomplete%20Report%20Details:%20Below%20is%20the%20List." id="submit_modal" class="btn btn-primary">Send Message</a>`)

               
            }


            
        })      

    })
</script>

When executed, the program will display the following data:

Data that has not been uploaded yet:
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

I intend to pass this data to another function through an echo statement.

Is there a way to store this data as a variable?

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

To display it using this code:

$("#button-submit2").html(`<a href="https://wa.me/${number}?text=Incomplete%20Report%20Details:%20Below%20is%20the%20List." id="submit_modal" class="btn btn-primary">Send Message</a>`)

Alternatively, can I replace the content of #button-submit2 by echoing the data?

javascript ajax

Answer 1

Answer №1

<script type="text/javascript">
// A newly created element, not yet added to the DOM, is stored in this variable
var $receivedItems = $('<div></div>');
$(".monitor").click(function(){

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


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

            // ... other actions go here

            var buttonHtml = `<a href="https://wa.me/${number}?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) {
                 e.preventDefault();
                // On click, you can append the list items stored in $receivedItems
                $("#list-format").append($receivedItems.children());
            });
           
            $("#button-submit2").append($button2);

        }

    })      

})
</script>

Comments have been added to explain the code. By following this approach, you can save all received items in a jQuery object and trigger the on-click event when adding them to the submit2 button.

Answer 2

<script type="text/javascript">
// A newly created element, not yet added to the DOM, is stored in this variable
var $receivedItems = $('<div></div>');
$(".monitor").click(function(){

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


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

            // ... other actions go here

            var buttonHtml = `<a href="https://wa.me/${number}?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) {
                 e.preventDefault();
                // On click, you can append the list items stored in $receivedItems
                $("#list-format").append($receivedItems.children());
            });
           
            $("#button-submit2").append($button2);

        }

    })      

})
</script>

Comments have been added to explain the code. By following this approach, you can save all received items in a jQuery object and trigger the on-click event when adding them to the submit2 button.

Tips for displaying data using AJAX with a variable

Answer №1

Similar questions

What is the best way to prevent an HTML table from having columns that adjust their width dynamically based on the content in the <td>?

Enhancing Element Generation and Data Association through jQuery

Is it possible for a single field to validate and accept multiple types of data?

Preventing Internet Explorer browsers from accessing

Concealing a Div element without the use of Jquery or JavaScript

The putImageData function in HTML5, CSS, and JS does not automatically resize or adjust the video/image to fit within the canvas

Scroll to make the div slide in from the bottom

AngularJS implemented a header authorization feature

The React component fails to update upon pressing the button

ErrorPlacement in jQuery validation is causing an issue where errors cannot be removed even after they have been corrected

Adjusting the filter location in React-admin

Retrieving information from dynamically created elements with JQuery

Obtaining the previous element with aria-selected using Jquery Selector rather than the current one

trouble with v-for in Vue.js causing data not to show on page

Ensure the browser only reloads a single file

Does assigning a value to the localStorage count as a side effect?

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

How can I populate a dropdown list in JavaScript with JSON data from a file?

Utilize AJAX to upload files to Blobstore in Google App Engine

Tips for deleting a duplicate identifier within an li element that possesses a particular class through javascript