[英]How do I render a Django object (form) from Javascript?
I have loaded Django form elements to localStorage for persistence of changes using localStorage.setItem("Key", JSON.stringify(obj)). 我已经使用localStorage.setItem(“ Key”,JSON.stringify(obj))将Django表单元素加载到localStorage中以实现更改的持久性。 That seems to be working. 那似乎行得通。 Now I want to retrieve the object and render it into my HTML page from Javascript. 现在,我想检索对象并将其从Javascript渲染到HTML页面中。 My script looks like this: 我的脚本如下所示:
// This script retrieves the Django form object that was stored as a JSON
// from localStorage, parses it and posts it on the html page
// Get label from document
var myLabel = document.getElementById("currLabelID" +
id_suffix).value.replace(/ /g,"");
//alert("CurrLabel = " + myLabel);
// Retrieve the form object from localStorage
var yummy = JSON.parse(localStorage.getItem(myLabel));
// Put form object into page
//var myDiv = document.getElementByName("theFieldPostDiv");
//$( myDiv ).append( yummy );
//var form = document.createElement('form');
//form.appendChild(yummy);
//document.write( yummy );
//{{ yummy }}
//$(document).ready(function() {
//
// $( "theFieldPostDiv" ).append( yummy );
//
//});
//$( "theFieldPostDiv" ).append( $(yummy) );
//document.body.appendChild(yummy);
//$.append(yummy);
//yummy.post();
$(function() {
$(".theFieldPostDiv").hide();
$("#form-group").submit(function(event) {
event.preventDefault();
var posting = $.post(".theFieldPostDiv", yummy);
posting.done(function(data) {
$(".theFieldPostDiv").show();
});
posting.fail(function(data) {
alert("Fail")
});
});
});
Note: The "theFieldPostDiv" is where I want to render the form object in the page. 注意:“ theFieldPostDiv”是我要在页面中呈现表单对象的位置。
The commented code shows several ways I attempted to accomplish this. 注释的代码显示了我尝试完成此操作的几种方法。 Any help is appreciated. 任何帮助表示赞赏。
So the solution I found was, at the bottom of the template add this: 因此,我找到的解决方案是在模板底部添加以下内容:
{% block js %}
function loadInputLocalStorage(){
$('#input-form :input').each(function(){
var key = $(this).attr('id');
if(localStorage.getItem(key)) {
var value = localStorage.getItem(key);
$(this).val(value);
}
});
}
loadInputLocalStorage();
function saveInputLocalStorage() {
$('#input-form :input').each(function(){
var id = $(this).attr('id');
var value = $(this).val();
localStorage.setItem(id, value);
});
}
$('#input-form').change(function() {
saveInputLocalStorage();
});
{% endblock %}
In the body of the template I have this: 在模板的主体中,我有以下内容:
{% for boundfield in elements %}
<div class="form-group">
<label class="control-label col-sm-5" style="text-align:right;"
for="{{boundfield.id_for_label}}">{{ boundfield.label }}
</label>
<div class="col-sm-7" id="{{boundfield.id_for_label}}"
aria-describedby="{{boundfield.id_for_label}} | addstr:ex">{{ boundfield }}
</div>
</div>
{% if boundfield.help_text %}
<p class="col-sm-offset-5 col-sm-7"> <small style="color: grey">{{ boundfield.help_text|safe }}</small></p>
{% endif %}
{% for error in boundfield.errors %}
<div class="col-sm-offset-2 col-sm-10"><span class="text-danger small">{{ error }}</span></div>
{% endfor %}
{% endfor %}
where 'elements' is passed in from the view. 从视图中传递“元素”的位置。
Note: I didn't figure this out by myself, I had tremendous assistance from Beheen. 注意:我自己没有弄清楚,我得到了Beheen的大力帮助。 Hope this helps the next guy... 希望这对下一个家伙有帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.