I have an ERB document:
<!DOCTYPE html>
<html>
<head>
<script>
scrollDown = function() {
document.body.scrollTop = document.body.scrollHeight;
}
</script>
</head>
<body onload='scrollDown()'>
<div id='2'>
</div>
<div id='target'>
<%=@chat%> <!-- @chat is a variable from my ruby file -->
</div>
<form action="/addChat?n=<%=@name%>" method='post'>
<input name='nchat' type='text' onload='this.focus' autofill='no' style='width:100%;height:10em;vertical-align:top'>
<input type='submit'>
</form>
<a href='/home'>Go home!</a>
</body>
</html>
And I would like to have it so that every half of a second it will do two things. First it needs to move the contents of the <div id="target"> to <div id="2"> then reload the contents of <div id="target"> getting the variable @chat from another route (post \content do ... end).
I am using sinatra and heroku. PLEASE DO NOT ANSWER USING JQUERY. I DO NOT KNOW HOW TO USE JQUERY AND I WOULD LIKE TO UNDERSTAND HOW THE ANSWER WORKS.
I will be happy to add any resources you need to answer this question, and I will try to do so as promptly as possible.
Clarification
Here is my code which has been slightly modified since asking this question (I hope this code clarifies my question). When I enter the loop to move things from <div id="target"> to <div id="2"> into the console in browser (google chrome latest version) it runs fine and moves everything correctly. Here is the loop:
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
Now my only remaining issue is reloading the content of <div id="target"> from the route in my app file post '/chatContent' do ... return @chat end where @chat is a dynamically changing variable every 0.5 seconds and before reloading each time running the above loop. Here is my current attempt at the reloading with the loop (also most of this is copy paste from various sources, so I don't really understand it):
var refreshDelay = 5000000;
function createRequestObject() {
var ro;
if(navigator.appName == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
http.open('post', '/chatContent?n=<%=@name%>');
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('target').innerHTML = response;
setTimeout(sndReq, refreshDelay);
}
}
setTimeout(sndReq, refreshDelay);
</script>
<script>
scrollDown = function() {
document.body.scrollTop = document.body.scrollHeight;
}
function movethings() {
while (document.getElementById('target').childNodes.length > 0) {
document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}
}
Just to clarify, what I am looking for is a replacement for the above code, including 1st) Running the loop to move the contents of <div id="target"> to <div id="2"> then 2nd) reloading <div id='target'>. The order is important.
I hope that this clarification has narrowed the scope of my question. If it has not, please leave a comment about why it is too broad because I do not understand how it is.
Edit 2 In summary, each answer must, in order, do the following:
- Move content of
<div id="target">to<div id="2"> - Reload
<div id="target">so that it contains thereturnof my Sinatra route,post "/chatContent"