Refresh page with button, but without blinking

Question

I wanted to click the button atualizar the page updated automatically but without flashing, without refresh

.transferencias {
width: 59%;
float: left;
margin-left: 30px;
margin-top: 25px;
}

.transferencias div.desktop {
width: 100%;
text-align: left;
border-bottom: 1px solid #000;
height: auto;
}

.transferencias div.desktop p.titulo {
font-size: 24px;
font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
color: black;
line-height: 2;
text-transform: uppercase;
}

.transferencias div.desktop span.botao_atualizar {
    float: right;
    background-color: black;
    color: #fff;
    padding: 6px;
    font-size: 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    border-radius: 5px;
    margin: 8px 6px 0px 0px;
cursor: default;
text-transform: lowercase;
}

<div class="transferencias">
<div class="desktop">
<p class="titulo">LIVE </span>
<span class="botao_atualizar"> atualizar </span> </span></p>
</div>

Answer 1

Only with HTML and CSS (as far as I know) is possible, you will need to use Javascript with AJAX technique/technology as well.

You have several options for this, among them:

• Native: XHR (XML HTTP Request) and Fetch API (without support for Internet Explorer).
• Libraries (among others): jQuery and Axios.

Which choice depends on your goal and how your project is going.

• The XHR will work in all cases, but is more verbose.
• To Fetch API is simpler, but does not yet have support broad.
• The solution of jQuery is useful if you are already using jQuery in some part of its project, because otherwise it is a burden in terms of performance.
• With the Axios simply add the library to your HTML to use, the syntax is as simple as the Fetch API and only abstracts the XHR, the which means your support is as broad as.

Example using XHR

A very simple example below.

var xhr = new XMLHttpRequest();
var url = "URL_PARA_BUSCAR_RESULTADOS";
xhr.open("GET", url);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var res = JSON.parse(xhr.response);
            /// usa os dados em 'res'
        } else {
            alert('Erro...')
        }
    }
};

xhr.send();

I got a Codepen showing up: https://codepen.io/aanizio/pen/gZxPQe