Django使用google map autosuggest动态添加表单到formset [英] Django dynamically add form to formset with google map autosuggest

问题描述

 < input type = buttonvalue =Add formid =add_more> 
 
< script> 
 $（'＃add_more'）。click（function（）{
 var form_idx = $（'＃id_parties-TOTAL_FORMS'）val（）; 
 $（'＃form_set' .append（$（'＃empty_form'）。html（）。replace（/ __前缀__ / g，form_idx））; 
 $（'＃id_parties-TOTAL_FORMS'）val（parseInt（form_idx）+ 1）; 
}）; 
; 
< / script> 
  

通过点击添加表单，它将添加一个表单到我的django表单。

但是，由于在空的形式我有一个字段使用谷歌地图autosuggest：

 <脚本> 
函数initialize（）{
 var input_location = document.getElementById（'id_parties -__ prefix __- location'）; 
 var autocomplete = new google.maps.places.Autocomplete（input_location）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
  

如何使这个额外的表单中的位置字段工作？

---

编辑：

简写为空的表单：

 < div class =col-sm-12> 
< div class =form-group> 
< label for ={{form.location.label}}class =col-sm-3 control-label> {{form.location.label}}：< / label> 
 
< div class =col-sm-9> 
 {{form.location.errors}} 
 {{form.location}} 
< / div> 
< / div> 
< / div> 
 
 
< script> 
函数initialize（）{
 var input_location = document.getElementById（'{{form.location.auto_id}}'）; 
 var autocomplete = new google.maps.places.Autocomplete（input_location）; 
 
 var g_autocomplete = $（body> .pac-container）。filter（：visible）; 
 g_autocomplete.bind（'DOMNodeInserted DOMNodeRemoved'，function（event）{
 $（。pac-item，this）.addClass（needsclick）; 
}）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
  

非常感谢。

解决方案

基本上，在您的点击处理程序中，您需要执行以下操作：

1. 匹配最后添加的code>输入元素与jQuery。这将返回一个jQuery对象。


2. 使用 [0] 获取底层的纯JavaScript对象。


3. 使用纯JavaScript对象创建自动完成输入。

我们假设您的 #empty_form 看起来像这样。

 < form id =empty_form> 
< input type =text/> 
< / form> 
  

然后，您可以使用以下代码片段动态地初始化自动完成输入（ JSFiddle ）。

  $（'＃add_more'）。click（function（）{
 ... 
 
 var input = $（'＃form_set'）。children（'input：last'）[0 ]; 
 new google.maps.places.Autocomplete（input）; 
}）; 
  

如果 #empty_form 的内容更多复杂的，它可能会变得更复杂，但基本的过程保持不变。

I have a javascript to add form dynamic to a form set for django and it is working

<input type="button" value="Add form" id="add_more">

<script>
    $('#add_more').click(function () {
        var form_idx = $('#id_parties-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_parties-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
    ;
</script>

by clicking the Add form, it will add one more form to my django formset.

But since in my empty form i have a field to use google map autosuggest:

<script>
    function initialize() {
        var input_location = document.getElementById('id_parties-__prefix__-location');
        var autocomplete = new google.maps.places.Autocomplete(input_location);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

how to make it working for the location field in this extra forms too?

---

edit:

the empty form in short:

<div class="col-sm-12">
    <div class="form-group">
        <label for="{{ form.location.label }}" class="col-sm-3 control-label"> {{ form.location.label }}:</label>

        <div class="col-sm-9">
            {{ form.location.errors }}
            {{ form.location }}
        </div>
    </div>
</div>


<script>
    function initialize() {
        var input_location = document.getElementById('{{ form.location.auto_id }}');
        var autocomplete = new google.maps.places.Autocomplete(input_location);

        var g_autocomplete = $("body > .pac-container").filter(":visible");
        g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function (event) {
            $(".pac-item", this).addClass("needsclick");
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

thanks a lot.

解决方案

Basically, in your click-handler you need to do the following:

1. Match the last added input element with jQuery. This will return a jQuery object.
2. Get the underlying plain JavaScript object by using [0].
3. Create the auto-complete input using the plain JavaScript object.

Let's assume your #empty_form looks like this.

<form id="empty_form">
    <input type="text"/>
</form>

Then you can dynamically initialize the auto-complete inputs by using the following snippet (JSFiddle).

$('#add_more').click(function () {
    ...

    var input = $('#form_set').children('input:last')[0];
    new google.maps.places.Autocomplete(input);
});

If the content of #empty_form is more complex, it might get a little more complicated but the basic procedure remains the same.

这篇关于Django使用google map autosuggest动态添加表单到formset的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！