如何在Django模板中使用Jquery / Ajax正确刷新div [英] How to correctly refresh a div using Jquery/Ajax in a Django template

问题描述

我已经尝试实施解决方案此处，但是我似乎无法使其正常工作。

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

我有一个使用Django模板中的循环填充的div。在下面，我有一个输入框，我可以输入一些文本，然后单击提交。 提交操作应触发从服务器获取模型对象的Jquery脚本。那么这个模型对象应该被赋予div，然后div应该被刷新。这里的意图是，一旦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.

我的模板代码：

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

<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

我已经检查过，我的实现与解决方案尽可能相同我之前提到，我觉得我可能在这里遗漏了一些简单的东西。使用新的更新变量刷新div的正确方法是什么？

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?

推荐答案

从 test_login_url 通过ajax调用的视图包括模板中的h1元素。在您的ajax成功回调中，您正在将包含h1的HTML加载到您的 refresh-this-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.

模板代码：

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

$(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);
                }
        });
    });
});

这篇关于如何在Django模板中使用Jquery / Ajax正确刷新div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！