Updating XML data in real time with jQuery.get

Question

Updating XML data in real time with jQuery.get

Navigation

#1 by (0 votes)

0

I'm building a page that has a (with bootstrap 4) carousel that displays some information about temperatures. This information comes from an XML that will be updated whenever a change occurs.

I'm doing the tests by manually changing the XML file, but I can not see the changes. I've already tried setTimeout and setInterval (the setInterval repeats the entire HTML block) and can not see the changes, it seems that in the case of setTimeout , it does not load the < in> XML again.

Could anyone help me to unravel this mystery? Thank you in advance for your attention:)

Code:

function temperatures() {
    'use strict';
    $.get('temperature.xml', function (data) {
        $(data).find('temperature').each(function () {
            let $temperature = $(this);
            let type = $temperature.find('type').text();
            let value = $temperature.find('value').text();

            let temperatures = '<div class="carousel-item temperature">';
            temperatures += '<span class="sensor-value">' + value + '</span>';
            temperatures += '<span class="sensor-title">' + type + '</span>';
            temperatures += '</div>';

            $('.temperatures').append($(temperatures));
        });
    });
    setTimeout(temperatures, 1000);
}

$(function () {
    temperatures();
});

jquery html5 ajax xml bootstrap

asked by anonymous 19.02.2018 / 17:19

1 answer

While with PHP and Datapicker Query works in MySQL, but not in Laravel

score 0 · Answer 1

setTimeout serves as a "pause ", it runs only once, at the scheduled time. Already the setInterval , it creates a range that it will be repeated infinitely (or until you use the command clearInterval() ).

Since you only want the new results (and do not repeat them), you need to create a single ID f for each value. This way you can check, by ID , whether the value is new or repeated.

Example:

<div class="temperatures"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>functiontemperatures(){'usestrict';$.get('xml.xml',function(data){$(data).find('temperature').each(function(){let$temperature=$(this);lettype=$temperature.find('type').text();letvalue=$temperature.find('value').text();/*Converteparabase64eremoveosinaldeigual*/letid=btoa(value).replace(/=/g,"")

                /**
                 * Verifica se a div com o ID já existe,
                 * caso já exista, ignora. Caso contrário,
                 * adiciona na tela.
                 */
                if (! $("div#"+id).length ) {
                    let html = '<div class="carousel-item temperature" id="' + id + '">';
                    html += '<span class="sensor-value">' + value + '</span>';
                    html += '<span class="sensor-title">' + type + '</span>';
                    html += '</div>';

                    $('.temperatures').append( html );
                }
            });
        }).done( function() {
            setTimeout( temperatures, 1000 )
        } );
    }

    setTimeout(temperatures, 1000)
</script>

Example Xml:

<temperature>
    <type>Tipo</type>
    <value>Valor</value>
</temperature>

You can use multiple ways to create a ID . It can be converting to hex , base64 ; using bitwise , md5 , sha1 ; concatenating the type with the value ; add in array and perform checks with method Array.find or Array.indexOf etc.