我曾尝试实施解决方案here,但我似乎无法得到它正常工作。

I have tried implementing the solution here, but I can't seem to get it working correctly.

我有一个使用Django模板内的循环填充一个div。右下面，我有一个输入框，在这里我可以键入一些文字，然后点击提交。提交操作应触发一个jQuery脚本，得到一个模型对象从服务器。这个模型对象应该再给予股利和股利应随后将刷新。这里的目的是，一旦DIV是刷新，由for循环访问的变量将被更新，从而显示更多的新成果。

I have a div that is populated using a loop inside a Django template. Right below that, I have a input box where I can type some text and click Submit. The Submit action should trigger a Jquery script that gets a model object from the server. This model object should then be given to the div, and the div should subsequently be 'refreshed'. The intention here is that once the div is 'refreshed', the variable accessed by the for loop would have been updated, thus displaying the additional new results.

我的模板code：

<h1> This is a Test Ajax Page</h1>
<div id="refresh-this-div">
    {% for comment in question.comment_set.all %}
        <p class="">{{ comment.body }}</p>
    {% endfor %}
        <input id="my-text-input-id" type="text" />
        <button type="submit" class="add-comment-button">Add</button>
    </div>
</div>

我的jQuery的：

My Jquery:

<script type="text/javascript">
    $(document).ready(function() {
        $("button.add-comment-button").click(function() {
            var com_body = $('#my-text-input-id').val();
            $.ajax({
                    url: '/test_login_url',
                    success: function(data) {
                    $('#refresh-this-div').html(data);
                    }
                  });
        });
    });
</script>

我的看法：

def test_login_url(request):
    question = Question.objects.get(id=1)
    com = Comment(question=question, body='This is a new Comment!')
    question.comment_set.add(com)
    return render_to_response('application/ajax_test_template.html', { 'question': question })

当我点击提交按钮，在div被刷新，但被刷新的div部分现在包含h1标签的副本。当我点击提交多次，还有额外的H1标签，人口的意见。

When I click the Submit button, the div is refreshed, however the div section that was refreshed now contains a copy of the h1 tag. As I click Submit multiple times, there are additional h1 tags and comments populated.

下面是页面的一个示例点击前： before_clicking_submit

Here is an example of the page before clicking: before_clicking_submit

这里是点击提交后一个例子： after_clicking_submit

And here is an example after clicking Submit: after_clicking_submit

我已经双重检查，我的实现是尽可能相同，以我刚才提到的解决方案，但是，我觉得我可能失去了一些东西简单的在这里。什么是刷新新更新的变量股利的正确方法？

I've double checked that my implementation is as identical as possible to the solution I referenced earlier, however, I feel like I'm probably missing something simple here. What is the correct way to refresh the div with the new updated variable?

推荐答案

在HTML从 test_login_url 认为你打电话通过AJAX包含模板中的h1元素返回。在你的ajax成功回调，您正在加载的HTML，其中包括H1，到更新 - 这-DIV DIV，但你不能删除旧的h1元素这是坐在容器外。与您的浏览器的开发工具的DOM的快速检查应说明发生了什么事情。

The HTML returned from your test_login_url view that you call via ajax includes the h1 element in your template. In your ajax success callback, you're loading that HTML, which includes the h1, into your refresh-this-div div, but you're not deleting the old h1 element that's sitting outside the container. A quick inspection of the DOM with the developer tools on your browser should illustrate what's going on.

最简单的解决方法是可能包装在一个容器当前模板的内容。

The easiest fix is probably to wrap the contents of your current template in a container.

模板code：

<div id="refresh-this-div">
    <h1> This is a Test Ajax Page</h1>
    {% for comment in question.comment_set.all %}
        <p class="">{{ comment.body }}</p>
    {% endfor %}
    <input id="my-text-input-id" type="text" />
    <button type="submit" class="add-comment-button">Add</button>
</div>

jQuery的：

Jquery:

$(document).ready(function() {
    $("button.add-comment-button").click(function() {
        var com_body = $('#my-text-input-id').val();
        $.ajax({
                url: '/test_login_url',
                success: function(data) {
                    // grab the inner html of the returned div 
                    // so you don't nest a new div#refresh-this-div on every call
                    var html = $(data).filter('#refresh-this-div').html();
                    $('#refresh-this-div').html(html);
                }
        });
    });
});