如何从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 %}

其中‘element’是从视图传入的。

注意:这不是我自己想出来的，我从Beheen那里得到了巨大的帮助。希望这对下一个人有帮助。