如何从Javascript渲染Django对象（窗体）？

Question

我已经使用localStorage.setItem（“ Key”，JSON.stringify（obj））将Django表单元素加载到localStorage中以实现更改的持久性。 那似乎行得通。 现在，我想检索对象并将其从Javascript渲染到HTML页面中。 我的脚本如下所示：

// 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")
        });
    });
});

注意：“ theFieldPostDiv”是我要在页面中呈现表单对象的位置。

注释的代码显示了我尝试完成此操作的几种方法。 任何帮助表示赞赏。

Answer 1

因此，我找到的解决方案是在模板底部添加以下内容：

{% 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 %}

在模板的主体中，我有以下内容：

          {% 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 %}

从视图中传递“元素”的位置。

注意：我自己没有弄清楚，我得到了Beheen的大力帮助。 希望这对下一个家伙有帮助...