I am using an inline formset so the user can upload multiple images and also I can receive related information together e.g. the ingredient, quantity and unit.
This was previously working but my input fields have disappeared- the titles still appear but I can’t actually input the textfields so then the form won’t save properly.
Here is my forms.py
class ImageForm(forms.ModelForm):
class Meta:
model = Image
fields = '__all__'
class VariantIngredientForm(forms.ModelForm):
class Meta:
model = VariantIngredient
fields = '__all__'
widgets = {
'ingredient': forms.TextInput(
attrs={
'class': 'form-control'
}
),
'quantity': forms.NumberInput(
attrs={
'class': 'form-control'
}
),
'unit': forms.MultipleChoiceField(
choices = UNIT_CHOICES
),
}
This is my models.py
class Image(models.Model):
recipe = models.ForeignKey(
Recipe, on_delete=models.CASCADE, null=True
)
image = models.ImageField(blank=True, upload_to='images')
def __str__(self):
return self.recipe.title if self.recipe else "No Recipe"
class VariantIngredient(models.Model):
recipe = models.ForeignKey(
Recipe, on_delete=models.CASCADE
)
ingredient = models.CharField(max_length=100)
quantity = models.PositiveIntegerField(default=1)
unit = models.CharField(max_length=10, choices=unit_choice, default='g')
def __str__(self):
return self.recipe.title if self.recipe else "No Recipe"
This is the relevant section of my template:
<!-- inline form for Images Start-->
{% with named_formsets.images as formset %}
{{ formset.management_form|crispy }}
<script type="text/html" id="images-template"> // id="inlineformsetname-template"
<tr id="images-__prefix__" class= hide_all> // id="inlineformsetname-__prefix__"
{% for fields in formset.empty_form.hidden_fields %}
{{ fields }}
{% endfor %}
{% for fields in formset.empty_form.visible_fields %}
<td>{{fields}}</td>
{% endfor %}
</tr>
</script>
<div class="block w-full overflow-auto scrolling-touch relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 mt-4">
<div class="py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900 card-header-secondary
">
<h4 class="text-gray-900 font-bold text-xl mb-2">Add Images</h4>
</div>
<table class="w-full max-w-full mb-4 bg-transparent flex-auto p-6">
<thead class="text-gray-600">
<th>Image <span style="color:red;" class="required">*</span></th>
<th>Delete?</th>
</thead>
<tbody id="item-images">
{% for formss in formset %}
{{ formss.management_form }}
<tr id="images-{{ forloop.counter0 }}" class= hide_all>
{{ formss.id }}
{% for field in formss.visible_fields %}
<td>
{{field}}
{% for error in field.errors %}
<span style="color: red">{{ error }}</span>
{% endfor %}
</td>
{% endfor %}
{% if formss.instance.pk %}
<td>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-red-600 text-white hover:bg-red-700" data-toggle="modal"
data-target="#exampleModal{{formss.instance.pk}}">
Delete
</button>
<div class="modal hidden fixed top-0 left-0 w-full h-full outline-none fade" id="exampleModal{{formss.instance.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel{{formss.instance.pk}}" aria-hidden="true">
<div class="modal-dialog relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0" role="document">
<div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-lg">
<div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
<h5 class="mb-0 text-lg leading-normal" id="exampleModalLabel{{formss.instance.pk}}">Are You Sure You Want To Delete This?</h5>
<button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="relative flex p-4">
<a href="{% url 'recipes:delete_image' formss.instance.pk %}" type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-blue-600 text-white hover:bg-blue-600">Yes, Delete</a>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<a href="#" id="add-image-button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700 add-images">Add More</a>
</div>
{% endwith %}
<!-- inline form for Images end -->
<!-- inline form for Variant start -->
{% with named_formsets.variantingredients as formset %}
{{ formset.management_form }}
<script type="text/html" id="variantingredients-template"> // id="inlineformsetname-template"
// id='inlineformsetname-__prefix__'
<tr id="variantingredients-__prefix__" class= hide_all>
{% for fields in formset.empty_form.hidden_fields %}
{{ fields }}
{% endfor %}
{% for fields in formset.empty_form.visible_fields %}
<td>{{fields}}</td>
{% endfor %}
</tr>
</script>
<div class="block w-full overflow-auto scrolling-touch relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-gray-300 mt-4">
<div class="py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900 card-header-secondary">
<h4 class="text-gray-900 font-bold text-xl mb-2">Add Ingredients</h4>
</div>
<table class="w-full max-w-full mb-4 bg-transparent py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
<thead class="text-gray-600">
<th>Ingredient <span style="color: red;" class="required">*</span></th>
<th>Quantity <span style="color: red;" class="required">*</span></th>
<th>Unit <span style="color: red;" class="required">*</span></th>
<th>Delete?</th>
</thead>
<tbody id="item-variantingredients">
{% for formss in formset %}
{{ formss.management_form }}
<tr id="variantingredients-{{ forloop.counter0 }}" class= hide_all>
{{ formss.id }}
{% for field in formss.visible_fields %}
<td>
{{field}}
{% for error in field.errors %}
<span style="color: red">{{ error }}</span>
{% endfor %}
</td>
{% endfor %}
{% if formss.instance.pk %}
<td>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-red-600 text-white hover:bg-red-700" data-toggle="modal" data-target="#exampleModal{{formss.instance.pk}}">
Delete
</button>
<!-- Modal -->
<div class="modal hidden fixed top-0 left-0 w-full h-full outline-none fade" id="exampleModal{{formss.instance.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel{{formss.instance.pk}}" aria-hidden="true">
<div class="modal-dialog relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0" role="document">
<div class="relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-lg">
<div class="flex items-start justify-between p-4 border-b border-gray-300 rounded-t">
<h5 class="mb-0 text-lg leading-normal" id="exampleModalLabel{{formss.instance.pk}}"Are you Sure You Want To Delete This?</h5>
<button type="button" class="absolute top-0 bottom-0 right-0 px-4 py-3" data-dismiss="modal" aria-type="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="relative flex p-4">
<a href="{% url 'recipes:delete_variantingredient' formss.instance.pk %}" type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-blue-600 text-white hover:bg-blue-600">Yes, Delete</a>
<button type="button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<a href="#" id="add-variantingredient-button" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700 add-variantingredients">Add More</a>
</div>
{% endwith %}
<!-- inline form for Images end -->
<div class="mb-4">
<button type="submit" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded py-1 px-3 leading-normal no-underline bg-gray-600 text-white hover:bg-gray-700 block w-full">Submit</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// when user clicks add more btn of images
$('.add-images').click(function(ev) {
ev.preventDefault();
var count = $('#item-images').children().length;
var tmplMarkup = $('#images-template').html();
var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
$('#item-images').append(compiledTmpl);
// update form count
$('#uid_images-TOTAL_FORMS').attr('value', count+1);
});
});
$(document).
ready(function() {
// when user clicks add more btn of variants
$('.add-variantingredients').click(function(ev) {
ev.preventDefault();
var count = $('#item-variantingredients').children().length;
var tmplMarkup = $('#variantingredients-template').html();
var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
$('#item-variantingredients').append(compiledTmpl);
// update form count
$('#id_variants-TOTAL_FORMS').attr('value', count+1);
});
});
</script>
{% endblock content %}