Hola, tengo datos que deben actualizarse cada 5 segundos, pero no puedo recuperar el valor después de la actualización. He intentado esto: Primero, he usado la función de actualización:
$(document).ready(function(){ $('#div_refresh').load("userdetail.html"); setInterval(function(){ $('#div_refresh').load("userdetail.html") }, 5000); });Esto está cargando + actualizando mi DIV, según el HTML (userdetail.html)
<html> <p>Username: <span id="Name"></span></br> Routing Profile: <span id="routingProfile"></span></br> Agent State: <span id="State"></span></br> State TimeStamp: <span id="TimeStamp"></span></br> State Duration: <span id="Duration"></span></p> </html>Esto está funcionando, DIV se está actualizando, sin embargo, después de la primera actualización, todos los datos que se están completando a través del script:
/* agent.js */ connect.agent(function(agent) { document.getElementById("Name").innerHTML = agent.getName(); document.getElementById("routingProfile").innerHTML = agent.getRoutingProfile().name; document.getElementById("State").innerHTML= agent.getState().name; document.getElementById("TimeStamp").innerHTML = agent.getState().startTimestamp; document.getElementById("Duration").innerHTML = agent.getStateDuration(); });Ya no aparece, solo devuelve el párrafo dentro de los nombres, pero el valor 'span' no lo hace. En mi HTML principal (index.html), así es como se establece la configuración:
<div id="div_refresh"></div> <script id="agent" type="text/javascript" src="./agent.js"></script> <script src="./reload.js"></script>Así es como se ve antes de que la actualización y los datos de intervalo desaparezcan https://iili.io/c6p8pS.png ¿Alguna idea?
Un enfoque diferente para esto es, en lugar de recargar el div cada x segundos, activar una función en el evento agent.onRefresh en las transmisiones. Por ejemplo...
connect.agent(async function (agent) { agent.onRefresh(handleAgentRefresh); }); function handleAgentRefresh(agent) { var changedRoutingProfileName = agent.getRoutingProfile().name; if (changedRoutingProfileName != document.getElementById('routingProfile').innerHTML ) { document.getElementById('routingProfile').innerHTML = changedRoutingProfileName ; } }De esta forma, el nombre del perfil de enrutamiento se actualizará automáticamente cuando las transmisiones informen que ha cambiado. y no tienes que recargar en absoluto.
Esto no se ha probado en absoluto y en realidad no se ejecutará aquí. Usando una promesa, podemos obtener los resultados, pegarlos, luego, una vez que se haya hecho con el "agente", luego, después de 5 segundos, activarlo para comenzar de nuevo.
FWIW, cambio la identificación ya que "#divxxx" hacer que la identificación coincida con la etiqueta no es una buena práctica. También usé algo de CSS y eliminé su </br> inválido y usé CSS para diseñarlo en su lugar, pero eso no es parte de su pregunta, más yo lo formateé con CSS.
$(function() { function fetchMe(url) { return jQuery.ajax(url, { type: 'GET', dataType: 'html' }); } $('#refreshed-content').on("go-get-another", function() { $.when(fetchMe('userdetail.html')) .then(function(results) { // Resolve $('#refreshed-content').html(results.data); }, function() { // Reject! console.log('Something broke!'); }).then(function() { // you decide if this is the right place to go get what was pasted in: I have less experience with this area. connect.agent(function(agent) { document.getElementById("Name").innerHTML = agent.getName(); document.getElementById("routingProfile").innerHTML = agent.getRoutingProfile().name; document.getElementById("State").innerHTML = agent.getState().name; document.getElementById("TimeStamp").innerHTML = agent.getState().startTimestamp; document.getElementById("Duration").innerHTML = agent.getStateDuration(); }); }) // set a 5 second delay then trigger next load .then(value => new Promise(resolve => setTimeout(() => resolve(value), 5000) ) ).then(function() { $('#refreshed-content').trigger('go-get-another'); }); }) // start the ball rolling: .trigger('go-get-another'); }); .content-block { padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-direction: coumn; } .content-row { display: block; margin: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="refreshed-content" class="content-block"> <div class="content-row user-name">Username:<span id="Name"></span></div> <div class="content-row"> Routing Profile:<span id="routingProfile"></span></div> <span class="content-row"> Agent State:<span id="State"></span></span> <p class="content-row"> State TimeStamp:<span id="TimeStamp"></span></p> <div class="content-row"> State Duration:<span id="Duration"></span></div> </div>