は、JavaScriptのイベントハンドラを正しくジャンゴインラインフォームセット

Question

では動作しない、次のように私は、インラインフォームセットを設計した：

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')) 

それは余分=いくつかの数 'を使用する場合、正しく働いていたし、正しくギャラリーフォームデータを保存しました。しかし、私はjavascriptハンドラを使ってメインイベントフォームの下にギャラリーフォームを追加すると、1の代わりに2つのギャラリーフォームが作成され、新しく追加されたフォームから保存されないデータと写真が作成されます。

<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> 

マイフォームセットテンプレート：あなたの情報について

<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> 

、私はその後、データや画像が正しく保存され、このフォームセットを編集

は、ここに私のイベントハンドラです。

誰かが私のイベントハンドラのエラーを示すことができますか？

Answer 1

私はスクリプトにエラーがある、 $('#id_gallery_set-TOTAL_FORMS').attr('value', count);

ラインがあるべきだと思う：

$(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> 

ここ

​​

は、この問題のために実行可能なスクリプトやテンプレートです

これは、関連する問題を解決するために役立ちます。