You are mixing JavaScript with the jQuery Framework. The .load() method of jQuery serves precisely what you want, but at "Vanilla JS things work differently.
With jQuery:
$( "#minhaId" ).load( "ficheiro.html" );
Your role would be:
function atualiza_dados(){
// ler conteúdo do ficheiro para dentro do elemento indicado
$( "minhaId" ).load( "ficheiro.html" );
// esperar 4 segundos e chamar
setTimeout( atualiza_dados, 4000 );
}
// executar código quando o DOM estiver pronto
$(function(){
atualiza_dados(); // primeira chamada
});
With JavaScript:
We can quickly load HTML into a <object/> tag defining its content as text/html :
document.getElementById("minhaId").innerHTML='<object type="text/html" data="ficheiro.html" ></object>';
Note that this method is becoming obsolete.
Your role would be:
function atualiza_dados(){
// inserir um objeto na página a apontar para o ficheiro
document.getElementById("minhaId").innerHTML='<object type="text/html" data="ficheiro.html" ></object>';
// esperar 4 segundos e chamar
setTimeout( atualiza_dados, 4000 );
}
// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function(){
atualiza_dados(); // primeira chamada
}, false);
In an elaborate and functional way, you should use a <iframe/> to ensure that the HTML you are about to load on the page will not interfere with it.
Your role could look like this:
function atualiza_dados() {
var con = document.getElementById('minhaId')
, xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
con.innerHTML = xhr.responseText;
}
}
xhr.open("GET", "http://www.example.com/ficheiro.html", true);
xhr.setRequestHeader('Content-type', 'text/html');
xhr.send();
}
Change image
If your goal is solely to refresh the cover image, you can greatly streamline the process if your server-side script is sending only the intended image.
Your code could look like this:
function atualiza_dados() {
// localizar a imagem
var img = document.getElementById("imagem");
// alterar a imagem com novo timestamp
img.src = (img.src).split('?')[0] + '?' + new Date().getTime();
// esperar 4 segundos e chamar novamente
setTimeout(atualiza_dados, 4000);
}
// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {
// primeira chamada
setTimeout(atualiza_dados, 4000);
}, false);
And your PHP script:
<?php
// apanhar nova capa de forma XPTO aqui ...
// enviar imagem para navegador
$file = '../caminho/para/ficheiro.jpg';
$type = 'image/jpeg';
header('Content-Type:'.$type);
readfile($file);
?>
Example
In this example, you can see the image to change, particularly the number contained in it.
var contador = 1;
function atualiza_dados() {
// localizar a imagem
var img = document.getElementById("imagem");
// alterar a imagem
img.src = img.src.replace("Zuul+" + contador, "Zuul+" + (contador + 1));
contador++;
// esperar 4 segundos e chamar novamente
setTimeout(atualiza_dados, 4000);
}
// executar código quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {
// primeira chamada
setTimeout(atualiza_dados, 4000);
}, false);
<img id="imagem" src="https://placeholdit.imgix.net/~text?txtsize=14&bg=333333&txtclr=ffffff&txt=Zuul+1&w=200&h=200"alt="BuBu" />
