澄清

Question

我有一份ERB文件：

<!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>

我想拥有它，以便每半秒钟它会完成两件事。首先，它需要将<div id="target">的内容移动到<div id="2">，然后重新加载<div id="target">的内容，从另一条路线（@chat）获取变量post \content do ... end。< / p>

我正在使用sinatra和heroku。请不要使用JQUERY。我不知道如何使用JQUERY，我想知道答案如何运作。

我很乐意添加您回答此问题所需的任何资源，我会尽快做到这一点。

澄清

这是我的代码，自从提出这个问题后我已经稍微修改了一下（我希望这段代码能澄清我的问题）。当我进入循环以将内容从<div id="target">移动到<div id="2">到浏览器中的控制台（谷歌浏览器最新版本）时，它运行正常并正确移动所有内容。这是循环：

while (document.getElementById('target').childNodes.length > 0) {
    document.getElementById("2").appendChild(document.getElementById('target').childNodes[0]);
}

现在我唯一的问题是从我的应用文件<div id="target">中的路线重新加载post '/chatContent' do ... return @chat end的内容，其中@chat是每0.5秒动态更改的变量，并且在每次重新加载之前运行上面的循环。这是我目前尝试使用循环重新加载（也是大部分是来自各种来源的复制粘贴，所以我真的不明白）：

            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]);
                }
            }

只是为了澄清一下，我正在寻找的是上述代码的替代品，包括第一个）运行循环以将<div id="target">的内容移动到<div id="2">然后第二个）重新加载{{1} }。订单很重要。

我希望这一澄清缩小了我的问题的范围。如果没有，请留下评论为什么它太宽泛，因为我不明白它是怎么回事。

编辑2 总之，每个答案必须按顺序执行以下操作：

将<div id='target'>的内容移至<div id="target">
重新加载<div id="2">，使其包含我的Sinatra路线的<div id="target">，return

重新加载Div并移动上一内容

澄清

0 个答案: