CODEWITHSUNDEEP
javascriptjquery
Amit Bondwal
Amit Bondwal

Reputation: 161

How to replace appendto to something else to update the data

I am listing AJAX data in cards using the below code. It works well, but if I run it with setinterval with other function with some condition, if that becomes true it calls the below function to update the listed data.

It append all the new data to the existing listing data and duplicates it. I know this is because I am using the appendTo function, I tried to replace it with HTML but that did not work, it didn't list the data at all.

I want to update the data when this function is called again, rather than appending data. What should I use for this? Thanks. 

function orderlist() {
    return  $.getJSON( "/restaurant/order/list/100/1", 
        function( orderdata ) 
            {
            var items = [];
            $.each( orderdata, function( key, val ) {
                var $o_on  = val.ordernumber;
                var $o_odate  = val.bizorderdate;
                var $o_userid = val.userid;
                var $o_tnumber = val.tablenumber;
                var $o_a   = "<div class='card' id="+$o_on+">"
                            + "<div class='title'>"
                            + "Order No." + $o_on + "</div>"
                            + "Date & Time: " + $o_odate + " </br>"
                            + "User: " + $o_userid + " </br>"
                            + "Table No: " + $o_tnumber + " </br>"
                           +    "</div>";
                items.push($o_a);
                })

        $( "<div/>", 
                    {
                    "class": "row",
                    html: items.join( "" )
        }).appendTo( "#list_of_orders" );  
    });
}

Upvotes: 0

Views: 660

Answers (1)

misantronic
misantronic

Reputation: 1211

Use empty() to clear out the list and then append your new stuff.

$('#list_of_orders').empty().append($( "<div/>", 
    {
       "class": "row",
       "html": items.join( "" )
    }

Upvotes: 1

Related Questions