如何使用Ajax replaceWith（Django表单的{％csrf_token％}）

Question

I'm trying to replace a 'reply' button with a form in my Django app. 我正在尝试用Django应用程序中的表单替换“回复”按钮。

Here's my Javascript code: 这是我的Javascript代码：

$(document).on('click', '.comment-reply-link', function(e) {
$(this).replaceWith("<form method='post'>{% csrf_token %}<div class='form-group'><label for='comment'>Comment:</label><textarea class='form-control' id='comment' rows='5' maxlength='300' minlength='1' name='comment' placeholder='Tell us how you loved this product :D'></textarea></div><button type='submit' name='post_comment' value='True'>Comment</button></form>");});
// The replacing line should contain no whitespace.
// Otherwise it will raise Uncaught SyntaxError: Unexpected token ILLEGAL

I get the form element but the problem is that {% csrf_token %} is processed as just unicode in replaceWith(). 我得到了form元素，但问题是{％csrf_token％}在replaceWith（）中只是作为Unicode处理。 {% csrf_token %} is necessary in Django to submit a form. 在Django中，必须使用{％csrf_token％}才能提交表单。 Any kind of help and advice will be thankful :) 任何形式的帮助和建议将不胜感激:)

Edit: I assume that {% %} means that Django needs to be involved to retrieve the right value. 编辑：我假设{％％}意味着Django需要参与以检索正确的值。 So I thought I should render an html page with form and update that form with 'reply' button. 因此，我认为我应该使用表单呈现html页面，并使用“回复”按钮更新该表单。 Here's my logic. 这是我的逻辑。

view.html view.html

<div class="reply">
<a class='comment-reply-link' href='{% url "rango:reply_form" %}'aria-label='Reply to Araujo'>Reply</a>
</div>

reply.js Reply.js

function ajax_get_update(item){
$.get(url, function(results){
//get the parts of the result you want to update. Just select the needed parts of the response
// var reply_form = $("#reply_form", results);
var reply_form = $(".head", results);
console.log(reply_form);
//console.log(results);

//update the ajax_table_result with the return value
$(item).html(reply_form);
}, "html");
}

$(document).on('click', '.reply', function(e) {
console.log("Debuggin...");
e.preventDefault();
url = ($( '.comment-reply-link' )[0].href);
console.log(url);
ajax_get_update(this);
});

reply_form.html reply_form.html

<!DOCTYPE html>
... code omitted ....
<form id="reply_form" method="post">
{% csrf_token %}
<div class="form-group">
   <label for="comment">Reply:</label>
   <textarea class="form-control" id="comment" rows="5" maxlength="300" minlength="1" name="comment" placeholder="Tell us how you loved this product :D"></textarea>
</div>
<button type="submit" name="post_comment" value="True">Reply</button>
</form>

</body>
</html>

When I click the reply button, the button disappears but nothing updates. 当我单击“答复”按钮时，该按钮消失，但没有任何更新。 The html page variable results gets the correct html page data but it seems like html页面变量结果获取正确的html页面数据，但似乎

$(item).html(reply_form);

is not working right. 工作不正常。 Because when I do 因为当我做

$(item).html('<p>button disappears</p>');

the paragraph will appear. 该段将出现。 Any thoughts? 有什么想法吗？

Answer 1

To use django template language in javascript you should encapsulate your code in a Verbatim tag. 要在javascript中使用django模板语言，您应该将代码封装在Verbatim标记中。

example : 例如：

{% verbatim %}  
    var hello = {% if some_condition %} 'World' {% else %} 'foobar' {% endif %};
{% endverbatim %}

From the docs : Stops the template engine from rendering the contents of this block tag. 来自docs：停止模板引擎呈现此block标记的内容。 A common use is to allow a JavaScript template layer that collides with Django's syntax 通常的用途是允许与Django语法冲突的JavaScript模板层

In your case : 在您的情况下：

<script>
    {% verbatim  %}
        $(document).on('click', '.comment-reply-link', function(e) {
            $(this).replaceWith("<form method='post'>  {% csrf_token %}  </form>")
        };
    {% endverbatim %}
</script>

如何使用Ajax replaceWith（Django表单的{％csrf_token％}）

问题描述

1 个解决方案

解决方案1
0 2015-07-28 14:39:16

如何使用Ajax replaceWith（Django表单的{％csrf_token％}）

问题描述

1 个解决方案

解决方案1 0 2015-07-28 14:39:16

解决方案1
0 2015-07-28 14:39:16