Skip to content

R
red_brick_board
Commit dba9618b authored by Ciella Francisco's avatar Ciella Francisco 😵
Browse files
Options

Enable showing of formset in html template. Source:... 

Enable showing of formset in html template. Source: https://www.letscodemore.com/blog/django-inline-formset-factory-with-examples/
parent cbacbdd6
Show whitespace changes
Inline Side-by-side
Showing with 129 additions and 4 deletions
redbrickboard/event_management/templates/event_management/event-form.html
View file @ dba9618b
......@@ -8,7 +8,7 @@
{% load static %}
{% block title %}Widget's Forum{% endblock %}
{% block content %}
{{ form.non_field_errors }}
<!-- {{ form.non_field_errors }}
{% for field in form %}
{% if field.errors %}
<p>{{ field.label }} has the following errors:</p>
......@@ -18,10 +18,135 @@
{% endfor %}
</ul>
{% endif %}
{% endfor %}
{% endfor %} -->
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Save"/>
<!-- {{ form }} -->
<div class="card">
<div class="card-header card-header-secondary">
<h4 class="card-title">Add Event</h4>
</div>
{% for field in form %}
<div class="form-group card-body">
<label>{{field.label}}</label>
{% if field.field.required %}
<span style="color: red;" class="required">*</span>
{% endif %}
{{field}}
{% if field.help_text %}
<small style="color: grey">{{ field.help_text }}</small>
{% endif %}
{% for error in field.errors %}
<p style="color: red">{{ error }}</p>
{% endfor %}
</div>
{% endfor %}
</div>
{% with named_formsets.images as formset %}
{{ formset.management_form }}
<script type="text/html" id="images-template">
<tr id="images-__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="table-responsive card mt-4">
<div class="card-header card-header-secondary">
<h4 class="card-title">Add Promotional Images</h4>
</div>
<table class="table card-body">
<thead class="text-secondary">
<th>Image <span style="color: red;" class="required">*</span></th>
<th>Delete?</th>
<th>Custom Delete btn</th>
</thead>
<tbody id="item-images"> <!-- id="item-inlineformsetname" -->
<!-- formset non forms errors -->
{% for error in formset.non_form_errors %}
<span style="color: red">{{ error }}</span>
{% endfor %}
{% for formss in formset %}
{{ formss.management_form }}
<tr id="images-{{ forloop.counter0 }}" class= hide_all> <!-- id="inlineformsetname-counter" -->
{{ formss.id }}
{% for field in formss.visible_fields %}
<td>
{{field}}
{% for error in field.errors %}
<span style="color: red">{{ error }}</span>
{% endfor %}
</td>
{% endfor %}
<!-- delete code -->
{% if formss.instance.pk %}
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal{{formss.instance.pk}}">
Delete
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal{{formss.instance.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel{{formss.instance.pk}}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel{{formss.instance.pk}}">Are Your Sure You Want To Delete This?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-footer">
<a href="{% url 'event_management:delete_image' formss.instance.pk %}" type="button" class="btn btn-primary">Yes, Delete</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<a href="#" id="add-image-button" class="btn btn-secondary add-images">Add More</a> <!-- id="add-inlineformsetname-button" -->
</div>
{% endwith %}
<div class="form-group">
<button type="submit" class="btn btn-secondary btn-block">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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
$('#id_images-TOTAL_FORMS').attr('value', count+1);
});
});
$(document).ready(function() {
// when user clicks add more btn of variants
$('.add-variants').click(function(ev) {
ev.preventDefault();
var count = $('#item-variants').children().length;
var tmplMarkup = $('#variants-template').html();
var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
$('#item-variants').append(compiledTmpl);
// update form count
$('#id_variants-TOTAL_FORMS').attr('value', count+1);
});
});
</script>
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment