Hello I do have data which needs to be refreshed every 5 seconds but I can't retrieve the value after the refresh. I've tried this: First, I've used the refresh function:
$(document).ready(function(){
$('#div_refresh').load("userdetail.html");
setInterval(function(){
$('#div_refresh').load("userdetail.html")
}, 5000);
});This it is loading + refreshing my DIV, as per the 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>
This is working, DIV it is refreshing, however, after the first refresh all data that it is being populated through the 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();
});
No longer appears, it just returns the paragraph within the names, but the 'span' value doesn't. On my main HTML (index.html) this is how the setup it is set:
<div id="div_refresh"></div>
<script id="agent" type="text/javascript" src="./agent.js"></script>
<script src="./reload.js"></script>
This is how it looks like before the refresh and the span data disapear https://iili.io/c6p8pS.png Any ideas?
A different approach to this is instead of reloading the div every x seconds is to trigger a function on the agent.onRefresh event in streams. For example...
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 ;
}
}
This way the routing profile name will update automatically when streams reports that it has changed. and you don't have to reload at all.
This is totally untested and will not actually run here. Uing a promise we can get the results, paste them in, then once that is done to the "agent" thing, then after 5 seconds, trigger it to start over.
FWIW, I change the id since "#divxxx" making the id match the tag is not a good practice. I also used some CSS and remove your invalid </br> and used CSS to style it instead - but that is not part of your question, more me formatting it with 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>