0

djangoで動的なフォームセットを構築するのに助けが必要です。いくつかのJavaScriptが必要であることを理解しています。私はJavaScriptの専門家ではありません。しかし、いくつかのサンプルコードを見つけ、それを自分の特定のフォームで機能するように適合させようとしています。[追加]ボタンをクリックしても何も起こりません。そして、私は前進する方法に途方に暮れています。助言がありますか？

モデルは参加者イベント登録用です。顧客は、イベントに参加するために複数の人を登録できます。
参加者の追加ボタンを取得しようとしています。

# models.py
class Customer(models.Model):
    event = models.ForeignKey(Event)
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30) 
    address1 = models.CharField(max_length=60) 
    address2 = models.CharField(max_length=60, blank=True) 
    city = models.CharField(max_length=30) 
    state = models.CharField(max_length=2) 
    zipcode = models.CharField(max_length=5) 

class Attendee(models.Model):
    event = models.ForeignKey(Event)
    sponsor = models.ForeignKey(Customer)
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30) 

# forms.py
CustomerFormset = inlineformset_factory(Customer, Attendee, form=AttendeeForm, exclude=('event'), extra=2)

# templates/register.html
<form action="/enroll/register3/{{ event.id }}/" method="post">{% csrf_token %}
<p> Sponsor information: </p>

<table>
  {{ customer }}
</table>
<hr>
<p> Students Attending: </p>
{% for attendee in attendees.forms %}
<div class="formgroup">
  {{ attendee }}
  {% if attendee.nested %}
  {% for formset in attendee.nested %}
  {{ formset.as_table }}
  {% endfor %} 
  {% endif %} 
</div>
{% endfor %}
 <div>
 Nothing happens when 'add_more' is clicked.  ??
 <input type="button" value="Add Attendee" id="add_more">
 <input type="submit" value="Submit">
</div>
</form>

<script> 
    $('#add_more').click(function() { 
        //cloneMore('div.table:last', 'service'); 
        cloneMore('div.table:last', 'formgroup'); 
    }); 

function cloneMore(selector, type) { 
    console.log('cloneMore'); 
    var newElement = $(selector).clone(true); 
    var total = $('#id_' + type + '-TOTAL_FORMS').val(); 
    newElement.find(':input').each(function() { 
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-'); 
        var id = 'id_' + name; 
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked'); 
    }); 
    newElement.find('label').each(function() { 
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-'); 
        $(this).attr('for', newFor); 
    }); 
    total++; 
    $('#id_' + type + '-TOTAL_FORMS').val(total); 
    $(selector).after(newElement); 
} 

</script>
4

1 に答える 1

1

この質問から JavaScript を取得したようですが、HTML 構造を適応させていません。

あなたのスニペットでわかるように（これは非常に無効なhtml、つまりdivのtrを生成するようにも見えます）：

{% for attendee in attendees.forms %}
<div class="formgroup">
  {{ attendee }}
  {% if attendee.nested %}
  {% for formset in attendee.nested %}
  {{ formset.as_table }}
  {% endfor %} 
  {% endif %} 
</div>
{% endfor %}

と彼の：

{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
    <div class='table'>
    <table class='no_error'>
        {{ form.as_table }}
    </table>
    </div>
{% endfor %}

まったく同じ JavaScript コードが必要な場合は、まったく同じ HTML 構造が必要です。JS で最初に行うことは、セレクターとして div.table:last を渡すことですが、HTML に div.table がありません。

最善の策は、JavaScript を自分で作成することです。Web ページの開発者として、javascript は大いに役立ちます。

于 2012-06-19T07:03:20.387 に答える