Automatic update with Javascript

Asked

Viewed 4,614 times

1

I have a radio page and I need the current music cover to change automatically, updating it every 5 seconds, taking the image of an external file I call playlist.php that returns the tag:

<img src="url-da-imagem" />

I tried to use this code on the main page:

<script type="text/javascript">
    function atualiza_dados(){
        document.getElementById("tocando-agora").load("_includes/lista-musicas.php");
    }
    window.setInterval("atualiza_dados()", 4000);
</script>

<body onload="atualiza_dados()">
    <div id="tocando-agora"></div>
</body>

However, the request does not work and the tag <img> is not loaded...
I started learning Javascript 2 days ago, but I want to solve this and I can’t, someone can help me?

javascript updating requisition

2 answers

4

You are mixing Javascript with the jQuery Framework. The method .load() jQuery serves precisely for what you want, but in "Vanilla JS" things work in a different way.

With jQuery:

$( "#minhaId" ).load( "ficheiro.html" );

Your job 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
});

Javascript-enabled:

Quickly we can load the HTML into a tag <object/> 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 job 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 more functional way you should make use of a <iframe/> to ensure that the HTML you upload to the page will not interfere with the page.

Your job could be as follows:

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 and exclusively to update the cover image, you can greatly simplify the process if your server-side script is only uploading the desired 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 changing, 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" />

2

It would be somewhat clumsy to convert the method .load() of JQuery that you are trying to use for the javascript pure.

You can convert your need to 100% JQuery. Try:

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>

(...)

<div id="tocando-agora"></div>

(...)

Javascript

$(document).ready(function()
{
    setInterval(function()
    {
        $("#tocando-agora").load("_includes/lista-musicas.php");
    }, 4000);
});

Demo

JSFIDDLE

Browser other questions tagged javascript updating requisition

You are not signed in. Login or sign up in order to post.