Javascript事件处理程序在django inline formset中不能正常工作

javascript event handler not correctly work in django inline formset

本文关键字：常工作 工作 不能 程序 事件处理 django formset inline Javascript      更新时间：2023-09-26

我设计了如下的内嵌格式集:

class EventForm(ModelForm):
    class Meta:
        model = Event
        exclude = ['created']
class GalleryForm(ModelForm):
    class Meta:
        model= Gallery
        exclude = ['pub_date']
GalleryFormSet = inlineformset_factory(Event, Gallery, extra=0, min_num=1, fields=('title','image' ))

当使用'extra = some number'并正确保存图库表单数据时，它可以正常工作。但是当我使用javascript处理程序在主事件表单下面添加额外的画廊表单时，它创建了两个画廊表单而不是1个，并且数据和照片没有从新添加的表单中保存。

这是我的事件处理程序:

<script type="text/html" id="gallery-template">
            <div id="gallery-__prefix__">
                {{ formset.empty_form }}
            </div>
        </script>
        <script>
            $(function() {
                $('.add-photo').click(function(ev){
                    ev.preventDefault();
                    var count = parseInt($('#id_gallery_set-TOTAL_FORMS').attr('value'), 10);
                    var tmplMarkup = $('#gallery-template').html();
                    var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)
                    console.log(compiledTmpl);
                    $('div.gallery').append(compiledTmpl);
                    $('#id_gallery_set-TOTAL_FORMS').attr('value', count);
                });
            });
    </script>

My formset template:

<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
                        {{ formset.management_form }}
                        {% csrf_token %}
                        <legend>Events</legend>
                        <div class="author">
                        {{ form.as_p}}
                        </div>
                        <legend>
                            <div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
                            Gallery
                        </legend>
                        <div class="gallery form-inline">
                            {% for form in formset %}
                                {{ form.as_p }}
                            {% endfor %}
                        </div>
                      <div class="form-group">
                        <div class="col-sm-offset-6 col-sm-6">
                            <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                        </div>
                     </form>

给你的信息，当我编辑这个格式，然后数据和图像保存正确。

谁能指出我的事件处理程序的错误?

我认为脚本有错误，$('#id_gallery_set-TOTAL_FORMS').attr('value', count);

行应该是:

$('#id_gallery_set-TOTAL_FORMS').attr('value', count + 1);

下面是解决这个问题的可行脚本和模板:

$(function() {
        $('.add-photo').click(function(ev){
            ev.preventDefault();
            var count = parseInt($('#id_gallery_set-TOTAL_FORMS').attr('value'), 10);
            var tmplMarkup = $('#gallery-template').html();
            var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)
            console.log(compiledTmpl);
            $('div.gallery').append(compiledTmpl);
            $('#id_gallery_set-TOTAL_FORMS').attr('value', count + 1);
        });
    });

模板:

<form action="." method="post" enctype="multipart/form-data">
    {{ formset.management_form }}
    {% csrf_token %}
    <legend>Event</legend>
    <div class="event">
    {{ form}}
    </div>
    <legend>
        <div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
        Photo Gallery
    </legend>
    <div class="gallery form-inline">
        {% for form in formset %}
            {{ form.as_p }}
        {% endfor %}
    </div>
  <div class="form-actions">
     <button type="submit" class="btn btn-primary">Save</button>
   </div>
 </form>

希望对解决相关问题有帮助

相关文章：