CODEWITHSUNDEEP
javascriptjqueryhtmlajax
aarc
aarc

Reputation: 15

Ajax create new DIV instead of refresh

I have a problem with this code :

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>

            (function update() {
                $.ajax({
                type: 'GET',
                url: "http://192.168.4.2/home/api/stato/ambiente/living",
                dataType: "json", 
                success: renderList
                }).then(function() {           
                    setTimeout(update, 200);  
                });
            })();                              

            function renderList(data) {
                var list = data == null ? [] : (data instanceof Array ? data : [data]);
                $.each(list, function(index, data) {
                    if (data.stato ==1) {
                        $('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
                        $('#Switch').append('<button type="button">' + " OFF " + '</button>');
                    }
                    else {
                        $('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
                        $('#Switch').append('<button type="button">' + " ON " + '</button>');
                    }
                });
            }
        </script>
    </head>
    <body>  

        <div id="statoList"></div>
        <div id="Switch"></div>

    </body>

</html>

I wish to execute a DIV refresh every 200 ms but the problem is that each time creates a new DIV below the previous one.

How can I solve this?

Thank you.

Upvotes: 0

Views: 80

Answers (2)

charlietfl
charlietfl

Reputation: 171698

If there are more than one of each type empty() the containers before appending

 $('#statoList').empty();
 $.each(list, function(index, data) {
       if (data.stato ==1) {...

Upvotes: 0

PacMan
PacMan

Reputation: 1358

the append function is not the right one for what you are expecting i suggest you to use .html() so it will translate all your code (new div) to an html code 

function renderList(data) {
                var list = data == null ? [] : (data instanceof Array ? data : [data]);
                $.each(list, function(index, data) {
                    if (data.stato ==1) {
                        $('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
                        $('#Switch').html('<button type="button">' + " OFF " + '</button>');
                    }
                    else {
                        $('#statoList').html('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
                        $('#Switch').html('<button type="button">' + " ON " + '</button>');
                    }
                });
            }

Upvotes: 6

Related Questions