Develop Reference

Passing Parameters From a Class Based View in Django

I have a class based Update view "ManifestUpdate", which is a modal pop up, and is launched from within another function based view "Manifest". I need to be able to take the field = 'reference' from my ManifestUpdate view and make it available to the "Manifest" view as 'Reference_Nos'. As you can see ManifestUpdate should direct the user to Manifest, but it does not, just nothing happens (it works if I change this to direct to any other view). I believe this is because I am not passing that parameter. Can anyone tell me how to capture that 'reference' parameter within ManifestUpdate and pass it to Manifest from the class based view?
views.py
class ManifestUpdate(BSModalUpdateView):
model = Manifests
template_name = 'manifest_update.html'
form_class = UpdateManifestForm
success_message = 'Success: Manifest was updated.'
success_url = reverse_lazy('manifest')
def manifest(request):
form = CreateManifestForm(request.POST)
if request.method == "POST":
if form.is_valid():
form.save()
reference_id = form.cleaned_data.get('reference')
data = Manifests.objects.all().filter(reference__reference=reference_id)
form = CreateManifestForm(initial={
'reference': Orders.objects.get(reference=reference_id),
})
total_cases = Manifests.objects.filter(reference__reference=reference_id).aggregate(Sum('cases'))
context = {
'reference_id': reference_id,
'form': form,
'data': data,
'total_cases': total_cases['cases__sum'],
}
return render(request, 'manifest_readonly.html', context)
else:
reference_id = request.POST.get('Reference_Nos')
data = Manifests.objects.all().filter(reference__reference=reference_id)
form = CreateManifestForm(initial={
'reference': Orders.objects.get(reference=reference_id),
})
total_cases = Manifests.objects.filter(reference__reference=reference_id).aggregate(Sum('cases'))
context = {
'reference_id': reference_id,
'form': form,
'data': data,
'total_cases': total_cases['cases__sum'],
}
return render(request, 'manifest_readonly.html', context)
forms.py
class UpdateManifestForm(BSModalForm):
class Meta:
model = Manifests
fields = ('reference', 'cases', 'product_name', 'count', 'CNF', 'FOB')
update_manifest.html
#showing the modal window body
<form method="post" action="">
{% csrf_token %}
<div class="modal-header">
<h3 class="modal-title">Update Manifest</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
<div class="container">
<form id="create_mani_form" method="POST">
<br>
{% csrf_token %}
<div class="column">
<label for="form.reference" class="formlabels">Reference ID: </label><br>
<!-- <input type="text" value="{{ reference_id }}">-->
{{ form.reference }}
<br>
<br>
<label for="form.count" class="formlabels">CNF: </label>
<br>
{{ form.CNF }}
<br>
</div>
<div class="description">
<div class="column">
<label for="form.product_name" class="formlabels">Description: </label>
<br>
{{ form.product_name}}
<br><br>
<label for="form.count" class="formlabels">FOB: </label>
<br>
{{ form.FOB }}
<br>
</div>
</div>
<div class="column">
<label for="form.cases" class="formlabels">Cases: </label>
<br>
{{ form.cases }}
<br>
</div>
<div class="column">
<label for="form.count" class="formlabels">Count: </label>
<br>
{{ form.count }}
<br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="submit-btn btn btn-primary">Update</button>
</div>
</form>
manifest_readonly.html
#showing the html rendered by the manifest view
{% extends 'base.html' %}
{% load humanize %}
{% block body %}
{% load staticfiles %}
<div class="container">
<div class="col-xs-12">
{% if messages %}
{% for message in messages %}
<div class="alert alert-success" role="alert">
<center>{{ message }}</center>
</div>
{% endfor %}
{% endif %}
</div>
</div>
<div class="container">
<form id="create_mani_form" method="POST">
<br>
<br>
<br>
{% csrf_token %}
<div class="column">
<label for="form.reference" class="formlabels">Reference ID: </label><br>
<!-- <input type="text" value="{{ reference_id }}">-->
{{ form.reference }}
<br>
<br>
<label for="form.count" class="formlabels">CNF: </label>
<br>
{{ form.CNF }}
<br>
</div>
<div class="description">
<div class="column">
<label for="form.description" class="formlabels">Description: </label>
<br>
{{ form.product_name}}
<br><br>
<label for="form.count" class="formlabels">FOB: </label>
<br>
{{ form.FOB }}
<br>
</div>
</div>
<div class="column">
<label for="form.cases" class="formlabels">Cases: </label>
<br>
{{ form.cases }}
<br>
</div>
<div class="column">
<label for="form.count" class="formlabels">Count: </label>
<br>
{{ form.count }}
<br>
<label for="form.reference" class="formlabels">Case Total: </label><br>
<input type="text" value="{{ total_cases|intcomma }}" readonly>
<br>
<label for="form.reference" class="formlabels">Total CNF: </label><br>
<input type="text" value="{{ totalCNF|intcomma }}" readonly>
<br>
<label for="form.reference" class="formlabels">Total FOB: </label><br>
<input type="text" value="{{ totalFOB|intcomma }}" readonly>
</div>
<br>
<br>
<button type="submit" name="add_mani" style="border-color: #7395AE;">Add Line</button>
</form>
<br>
<h4>Manifest</h4>
<div class="table-responsive">
<!--<table id="manifest_table" class="table table-striped table-bordered table-sm " cellspacing="0"-->
<table class="table table-striped table-bordered manifest_table" cellspacing="0" style="width="100%">
<thead>
<tr>
<th style="width:2%;"</th>
<th style="width:10%;">Cases</th>
<th style="width:60%;">Description</th>
<th style="width:10%;">Count</th>
<th style="width:10%">FOB</th>
<th style="width:10%">CNF</th>
</tr>
</thead>
<tbody>
{% for manifests in data %}
<tr>
<td>
<!-- Update book buttons -->
<button type="button" class="update-manifest btn btn-sm btn-primary" style="color: #FFCF8B; border-color: #FFCF8B; background-color: #FFF;" data-id="{% url 'manifest_update' manifests.pk %}">
<span class="fa fa-pencil"></span>
</button>
</td>
<td>{{ manifests.cases }}</td>
<td>{{ manifests.product_name}}</td>
<td>{{ manifests.count}}</td>
<td>{{ manifests.FOB}}</td>
<td>{{ manifests.CNF}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="text-center">
Subit Manifest
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery.fulltable.js"></script>
<script src="script.js"></script>
<script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script>
<script>
$(function () {
$(".update-manifest").each(function () {
$(this).modalForm({formURL: $(this).data('id')});
});
});
</script>
{% endblock %}
jquery.bootstrap.modal.forms.js
(function ($) {
// Place the form at formURL to modalContent element of modal with id=modalID
var newForm = function (modalID, modalContent, modalForm, formURL, successURL, errorClass) {
$(modalContent).load(formURL, function () {
$(modalID).modal('toggle');
ajaxSubmit(modalID, modalContent, modalForm, successURL, errorClass);
});
};
// Add AJAX validation to the modalForm
var ajaxSubmit = function (modalID, modalContent, modalForm, successURL, errorClass) {
$(modalForm).submit(function (event) {
// Prevent submit and POST form to url using AJAX
event.preventDefault();
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
// Serialize form data
data: $(this).serialize(),
success: function (response) {
// Update form with errors after unsuccessful POST request
// Django form.is_valid() = False
if ($(response).find(errorClass).length > 0) {
$(modalID).find(modalContent).html(response);
ajaxSubmit(modalID, modalContent, modalForm, successURL, errorClass);
}
// Hide modal after successful POST request when & redirect to successURL
else {
$(modalID).modal("hide");
window.location.href = successURL;
}
}
});
});
};
$.fn.modalForm = function (options) {
// Default settings
var defaults = {
modalID: "#modal",
modalContent: ".modal-content",
modalForm: ".modal-content form",
formURL: null,
successURL: "/",
errorClass: ".invalid"
};
// Extend default settings with provided options
var settings = $.extend(defaults, options);
return this.each(function () {
$(this).click(function (event) {
newForm(settings.modalID,
settings.modalContent,
settings.modalForm,
settings.formURL,
settings.successURL,
settings.errorClass);
event.preventDefault();
});
});
};
}(jQuery));

Reverse for 'update' with arguments '('',)' not found. 1 pattern(s) tried: ['vehicles_app/(?P<post_id>[0-9]+)/update_post/$']

I have searched a lot, but couldn't find a solution. There are a lot of related questions being asked before and I think there's no mistake but there's still an error.
Reverse for 'update' with arguments '('',)' not found. 1 pattern(s) tried: ['vehicles_app/(?P<post_id>[0-9]+)/update_post/$']
Here is my index.html
{% for obj in context %}
<div class="container" style="padding-left:240px; padding-right:0px; width: 78%; margin-bottom:30px;">
<div class="well" style=" background-color: rgb(220, 220, 220);">
<div class="media">
<div class="media-body">
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h1 class="media-heading" style="margin-top:20px; margin-bottom:20px; color: black;">{{ obj.title }}</h1>
{% for img in obj.postpicture_set.filter %}
<div class="w3-content" style="max-width:800px">
{% if img.image %}
<img style="margin-bottom:30px; float: right" class="mySlides" src="{{ img.image.url }}" width="200" height="180">
{% endif %}
</div>
{% endfor %}
<p> {{ obj.details }} </p>
<ul class="list-inline list-unstyled">
<li><span><i class="glyphicon glyphicon-calendar"></i> {{ obj.date }} </span></li>
<li>|</li>
<span><i></i> {{ obj.brand }} </span>
<li>|</li>
<span><i></i> {{ obj.city }} </span><br>
<form action="{% url 'vehicles_app:data' obj.id %}" method="post">{% csrf_token %} <input type="hidden" name="post_id" value="{{ obj.id }}">
<input type="hidden" name="usr_id" value="{{ obj.user_id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" class="btn btn-primary" value="Details"</td></form>
{% if request.user == obj.user or request.user.is_superuser %}
<form action="{% url 'vehicles_app:file-delete' obj.id %}" method="post" style="display: inline;">{% csrf_token %} <input type="hidden" name="post_id" value="{{ obj.id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" value="Delete" class="btn btn-danger btn-sm"</td></form>
<form action="{% url 'vehicles_app:update' obj.id %}" method="post" style="display: inline;">{% csrf_token %}<input type="hidden" name="post_id" value="{{ obj.id }}">
<td><input style="margin-top:70px; margin-bottom:20px; margin-left:10px;" type="submit" value="Update" class="btn btn-default btn-sm"</td></form>
{% else %}
{% endif %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
Here is views.py
def update_post(request, post_id):
ImageFormSet = modelformset_factory(
PostPicture,
form=AddPictures,
extra=10,
min_num=1
)
post_form = get_object_or_404(Posts, pk=post_id)
if request.method == "POST":
form = AddFile(request.POST, instance=post_form)
formset = ImageFormSet(
queryset=PostPicture.objects.filter(
post=post_id
)
)
if form.is_valid() and formset.is_valid():
form.save()
for form in formset:
if form:
image = form['image']
photo = PostPicture(post=form, image=image)
photo.save()
messages.success(
request, 'Post submitted Successfully!'
)
return render(
request,
'vehicles_app/update_post.html',
{
'form': form,
'formset': formset,
'post_form':post_form
}
)
else:
print(form.errors, formset.errors)
else:
form = AddFile()
formset = ImageFormSet(
queryset=PostPicture.objects.none()
)
return render(
request,
'vehicles_app/update_post.html',
{
'form': form,
'formset': formset,
'post_form':post_form
}
)
Here is the url for my update, only update is not working, but other things like data and delete are working fine.
urlpatterns = [
url(r'^signUp/$', views.signUp, name='signUp'),
url(r'^user_login/$', views.user_login, name='user_login'),
url(r'^addfile/$', views.addfile, name='addfile'),
url(r'^(?P<pk>[0-9]+)/delete/$', views.FileDelete.as_view(), name='file-delete'),
url(r'^(?P<post_id>[0-9]+)/data/$', views.data, name='data'),
url(r'^(?P<post_id>[0-9]+)/update_post/$', views.update_post, name='update'),
url(r'^myposts/$', views.myposts, name='myposts'),
url(r'^received/$', views.received, name='received'),
url(r'^received_files/$', views.received_files, name='received_files'),
]
here is my update_post.html
{% extends "vehicles_app/index.html" %}
{% block body_block %}
{% load staticfiles %}
<html>
<body>
<div class="container" id="addfile_form" style="margin- left:200px; width: 78%;">
<!-- <div class="col-xs-12 col-sm-4 col-md-6 col-sm-offset-2 col- md-offset-2"> -->
<div class="panel panel-default">
<div>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<h2 style="margin-left:100px;"> {{ message }} </h2>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="panel-heading">
<b><h2 id="post_head" class="panel-title">Update Post here!</h2>
</b>
</div>
<div class="panel-body">
<form id="post_form" method="post" action="{% url
'vehicles_app:update_post' post_id %}"
enctype="multipart/form-data">
{% csrf_token %}
<div class="row">
<div class="form-group">
<div style="float: left; width: 50%">
<label for="title">Ad Title</label>
</div>
<div class="title" style="float: right; width: 45%">
<input type="text" name="title" placeholder="Type Here"
value='{{ form.title.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="city">City</label>
</div>
<div class="city" style="float: right; width: 45%">
<select name="city" value='{{ form.city.value }}'>
<option selected="selected"
value="islamabad">Islamabad</option>
<option value="karachi">Karachi</option>
<option value="lahore">Lahore</option>
<option value="peshawar">Peshawar</option>
<option value="quetta">Quetta</option>
<option value="multan">Multan</option>
<option value="faisalabad">Faisalabad</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="price">Price</label>
</div>
<div class="price" style="float: right; width: 45%">
<input type="text" name="price" placeholder="Type Here"
value='{{ form.price.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="brand">Brand</label>
</div>
<div class="brand" style="float: right; width: 45%">
<select name="brand" value='{{ form.brand.value }}'>
<option selected="selected"
value="honda">Honda</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="suzuki">Suzuki</option>
<option value="toyota">Toyota</option>
<option value="lexus">Lexus</option>
<option value="hyundai">Hyundai</option>
<option value="jeep">Jeep</option>
<option value="mazda">Mazda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="daewoo">Daewoo</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="modelyear">Model-Year</label>
</div>
<div class="modelyear" style="float: right; width: 45%">
<input type="text" name="modelyear"
placeholder="ie:1970-2018" value='{{ form.modelyear.value }}' required>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="condition">Condition</label>
</div>
<div class="condition" style="float: right; width: 45%">
<select name="condition" value='{{ form.condition.value
}}'>
<option selected="selected" value="new">NEW</option>
<option value="used">USED</option>
</select>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="mileage">Mileage</label>
</div>
<div class=mileage style="float: right; width: 45%">
<input type="text" name="mileage" placeholder="ie:50000"
value='{{ form.mileage.value }}' required>
</div>
</div>
</div>
<br>
<div class="form-group">
<div style="float: left; width: 50%">
<label for="details">Type details here</label>
</div>
<div class="details" style="float: right; width: 45%">
<textarea name="details" rows="9" cols="45" value='{{
form.details.value }}' required></textarea>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
{{ formset.management_form }}
{% if formset %}
{% for form in formset %}
{% if form %}
<table class="display" cellspacing="1" width="100%">
<tr>
<td>{{ form }}</td>
</tr>
</table>
{% endif %}
{% endfor %}
{% endif %}
<input type="submit" name="submit" value="Update" class="btn
btn-info" id="post_btn">
</form>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
{% endblock %}

The error is coming from this url tag in your update_post.html template.
<form id="post_form" method="post" action="{% url 'vehicles_app:update_post' post_id %}"
You get the error with arguments '('',)' in the error message because you haven't included post_id in the template context. You can add it with:
return render(request, 'vehicles_app/update_post.html', {
'form': form,
'formset': formset,
'post_form': post_form,
'post_id': post_id,
})
Remember to do this for GET and POST requests.

access a list by index in django template inside a for statement?

I'm using django 1.11 and python 3.5.2.
This is the important part of my code in views.py
ListaValoresLeidosXML = []
for sec in secciones:
print(sec.contenidoxml)
treexml = ET(fromstring(sec.contenidoxml))
Lista = []
for child in treexml.findall('caracteristica'):
nombre = child.find('nombre').text
Lista.append(nombre)
ListaValoresLeidosXML.append(Lista)
for lista in ListaValoresLeidosXML:
for valor in lista:
print(valor)
print('*****')
return render(request, 'editarCatElem.html', {
'elemento': ElemSeg,
'link': tutorial,
'subelementos': subelementos,
'secciones': secciones,
'listaXML' : ListaValoresLeidosXML
})
I'm reading a string field in my database, it contents a xml-formatted text, using treexml I can get all the attributes.
Finally I have a list of lists, each list have values of a section, it means if I have n sections then I'll have n lists inside a list.
I'm sending a list called ListaXML to my template.
In my template I'm trying to iterate it
{% for seccion in secciones %}
<div style="display: block" class="form-group">
<div style="display: block" class="form-group">
<label class="control-label col-md-2" for="nombreSeccion">Sección <span class="required">*</span></label>
<div class="col-md-2"><input type="text" value='{{ seccion.nombre }}' id="nombreSeccion" name="secciones[][nombreSeccion]" class="form-control col-md-2"></div>
<label class="control-label col-md-2" for="descSeccion">Descripción <span class="required">*</span></label>
<div class="col-md-2"><input type="text" value='{{ seccion.descripcion }}' id="descSeccion" name="secciones[][descripcionSeccion]" class="form-control col-md-2"></div>
</div>
<div class="col-md-offset-2 col-md-7">
<div class="form-horizontal form-label-left" style="background:lightblue; padding:8px;">
{% for caracteristica in listaXML %} # <-- Here is the problem!!
<div class="form-group">
<label class="control-label col-md-2" for="nombreCampo">Campo <span class="required">*</span></label>
<div class="col-md-4">
<input type="text" value='{{ caracteristica }}' name="secciones[][campos][][nombreCampo]" id="nombreCampo" class="form-control col-md-2">
</div>
</div>
{% endfor %}
<div class="form-group">
<button type="button" class="btn btn-primary col-sm-offset-0 col-sm-3" onclick="agregarCampo(event);"><i class="fa fa-plus"> </i> Agregar campo</button>
<button type="button" class="btn btn-danger col-sm-offset-1 col-sm-3" onclick="eliminarCampo(event);"><i class="fa fa-minus"> </i> Eliminar campo</button>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is I need to do this with every repetition:
{% for caracteristica in listaXML.0 %}
{% for caracteristica in listaXML.1 %}
{% for caracteristica in listaXML.2 %}
{% for caracteristica in listaXML.3 %}
...
I need to increment the final number (the index of the list).
I've tried
{% for caracteristica in listaXML.forloop.counter0 %}
or
{% for caracteristica in listaXML.{{forloop.counter0}} %}
but it doesn't work.
Any idea on how the code works?

Looks like you just need a double for loop :
{% for lista in listaXML %}
{% for caracteristica in lista %}
<div class="form-group">
[...]
{% endfor %}
{% endfor %}

Django with Bootstrap-file-upload

I'm using a Django form to load an image and I'm using Bootstap-fileinput.
When the form has already been initialised with an image I want the image displayed immediately but it simple shows no image currently. How do I get the template to automatically show the file-input-exists version of the Bootstap HTML rather than the file-input-new version?
Forms.py :
class MyModelForm(forms.ModelForm):
class Meta:
model = MyModel
fields = ['image',]
widget = {
'image' : forms.FileInput(attrs={'class': 'form-control',
'id' : 'input-file'}),
}
My template has:
{{form.image}}
{{form.image.errors}}
This generates the following HTML whether the form contains an image or not
<div class="file-input file-input-new"><div class="file-preview ">
<div class="close fileinput-remove">×</div>
<div class="">
<div class="file-preview-thumbnails"></div>
<div class="clearfix"></div>
<div class="file-preview-status text-center text-success"></div>
<div class="kv-fileinput-error file-error-message" style="display: none;"></div>
</div>
</div>
<div class="kv-upload-progress hide"></div>
<div class="input-group ">
<div tabindex="500" class="form-control file-caption kv-fileinput-caption">
<div class="file-caption-name"></div>
</div>
<div class="input-group-btn">
<button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i> Remove</button>
<button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button>
<div tabindex="500" class="btn btn-primary btn-file"><i class="glyphicon glyphicon-folder-open"></i> Browse …<input class="form-control" id="input-file" name="image" type="file" required=""></div>
</div>
</div>
** EDIT **
Thanks to help so far I now have the images showing, but if I try and resubmit the form I get a message that no file has been chosen. I need to pick this up as well.
I've added this JavaScript in order to display the image on loading.
<script>
$("#input-file").fileinput({
showUpload: false,
initialPreviewShowDelete: false,
{% if form.instance.image %}
initialPreview: [
"<img src='{{ form.instance.image.url }}' class='file-preview-frame'>",
],
initialPreviewConfig: [
{caption: "{{ form.instance.image.name}}",},
],
{% endif %}
});
</script>

I am getting the preview of saved database file by using this script
<script>
$(document).ready(function(){
$("#id_album_logo").fileinput({
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
overwriteInitial: false,
initialPreviewAsData: true,
{% if form.instance.album_logo %}
initialPreview: [
"{{ form.instance.album_logo.url }}",
],
initialPreviewConfig: [
{caption: "{{ form.instance.album_logo.name}}", width: "120px", url: "{$url}", key: 1},
],
{% endif %}
});
})
where id_album_logo is the id assigned to form input ,
initialPreview: [
"{{ form.instance.album_logo.url }}",
],
is the url of the image already saved in database
my models.py
class Album(models.Model):
user = models.ForeignKey(User)
album_logo=models.FileField(upload_to=upload_location)
my forms.html is
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% include 'form-template.html' %}
<div class="form-group">
<br>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
and form-template.html is
{% for field in form %}
<div class="form-group djfr">
<label class="control-label">{{ field.label_tag }}</label>
{{ field }}
<span class="text-danger small">{{ field.errors }}</span>
</div>
{% endfor %}

Django include template tag in for loop only catches first iteration

I have a comments section on some pages on my site that I build with a {% for ... %} loop (and another nested loop for comment replies. The section was hacked together, and I am still learning web development and Django, so please forgive any frustrating sloppiness or weirdness. I am not concerned with efficiency at the moment, only efficacy, and right now it is not working quite right.
For each comment I have a Bootstrap dropdown button that will bring up the options Edit and Delete. Edit will open a modal to edit the comment. The modals are rendered with an {% include %} tag. Below I have included part of my code unmodified, rather than trying to simplify my example and risk leaving something crucial out:
<div class="panel panel-default">
{% for comment in spot.ordered_comments %}
<div class="panel-heading row">
<div class="col-sm-10">
<strong>{{ comment.poster.username }}</strong>
<em style="margin-left: 2em">{{ comment.created|date:'M d \'y \a\t H:i' }}</em>
</div>
<div class="btn-group col-sm-2" role="group">
{% if comment.poster == user %}
<form id="delete-comment-form" class="form"
method="post" action="{% url 'delete_comment' spot.id comment.id %}">
{% csrf_token %}
</form>
{% include 'topspots/editmodal.html' with edit_type='comment' %}
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-edit"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Edit</li>
<li role="separator" class="divider"></li>
<li>
Delete
</li>
</ul>
</div>
{% endif %}
{% if user.is_authenticated %}
{% include 'topspots/replymodal.html' %}
<button type="button" class="btn btn-default" data-toggle="modal"
data-target="#replyModal">
Reply
</button>
{% endif %}
</div>
</div>
<div class="panel-body">
<div class ="row">
<div class="col-sm-8">
{{ comment.comment_text }}
</div>
</div>
<br/>
<!-- Comment replies -->
{% if comment.commentreply_set %}
{% for reply in comment.commentreply_set.all %}
<div class="row" style="padding-left: 1em">
<div class="col-sm-8 well">
<p>{{ reply.reply_text }}</p>
<div class="row">
<div class="col-sm-4">
<p>
<strong>{{ reply.poster.username }}</strong>
<em style="margin-left: 2em">{{ comment.created|date:'M d \'y \a\t H:i' }}</em>
</p>
</div>
{% if reply.poster == user %}
{% include 'topspots/editmodal.html' with edit_type='reply' %}
<form id="delete-reply-form" class="form"
method="post" action="{% url 'delete_reply' spot.id reply.id %}">
{% csrf_token %}
</form>
<div class="col-sm-2">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-edit"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal"
data-target="#editModal">Edit</a></li>
<li role="separator" class="divider"></li>
<li>
<a href="javascript:;"
onclick="$('#delete-reply-form').submit();">Delete</a>
</li>
</ul>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
{% endfor %}
</div>
Here is the edit modal:
<!-- editmodal.html -->
{% load static %}
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="editModalLabel">
Edit {{ edit_type }}:
</h2>
</div>
<form action="{% url 'edit_comment' spot.id comment.id %}" method="post">
<div class="modal-body">
<input class="form-control" name="text" value="{{ comment.comment_text }}" autofocus>
<input type="hidden" name="edit_type" value="{{ edit_type }}">
{% csrf_token %}
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Finish editing</button>
</div>
</form>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
and the reply modal:
<!-- replymodal.html -->
{% load static %}
<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="replyModaLabel">
Reply to <strong>{{ comment.poster.username }}'s</strong> comment
</h2>
</div>
<div class="modal-body">
<form action="{% url 'reply_comment' spot.id comment.id %}" method="post">
<input class="form-control" name="reply_text" placeholder="Write a reply..." autofocus>
{% csrf_token %}
</form>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
The issue I am having is that my reply and edit modals (e.g. {% include 'topspots/editmodal.html' with edit_type='reply' %} or {% include 'topspots/replymodal.html' %} seem to be only rendered once with the context of the first iteration of my for loop. So even though all the questions are correctly rendered on the page, when I click reply, edit or delete, regardless of which button I click (i.e., whether I click the button for the first comment, or the fifth comment, etc.) I can only reply to, edit, or delete the very first comment. I have a feeling that this has something to do with closures and scope in a way I am not quite understanding (I have gotten into trouble in the past with unexpected results using lambda in Python loops because of this or this), but I am not sure.
I did a test with the following view:
def test(request):
spots = Spot.objects.all()
return render(request, 'test.html', {'spots': spots})
and templates:
<!-- test.html -->
<h1>Hello world</h1>
{% for spot in spots %}
{% include 'testinclude.html' %}
{% endfor %}
and
<!-- testinclude.html -->
<h3>{{ spot.name }}</h3>
And it printed out a list of unique spot names, so why the difference with the modals?

As emulbreh postulates, a modal is in fact rendered for every comment. However, all of the modals have the same ID, so regardless of which comment’s edit button was clicked, the first modal gets triggered every time. IDs are supposed to be unique across an HTML document.
How can you fix this? You can make the IDs of the modals unique to each comment. You can get a unique identifier by writing id="editModal-{{ comment.id }}" or just id="editModal-{{ forloop.counter }} (documentation here).
But then your editModal.html template is coupled very tightly with your ‘master’ template. A better solution would be to use classes instead of IDs and put the identification where it belongs: the container of each comment. You can try:
adding an ID to each comment’s container:
<div class="panel panel-default">
{% for comment in spot.ordered_comments %}
<div class="panel-heading row" id="comment-{{ comment.id }}">
...
using classes instead of IDs in your modal templates as so:
<!-- editmodal.html -->
{% load static %}
<div class="modal fade editModal" tabindex="-1" ...>
...
changing data-target in your buttons from:
<li>Edit</li>
to:
<li>Edit</li>

It looks like all your edit modals will have the same id id="editModal" as well as your reply modals id="replyModal" if you are showing them based on id probably you will always open the first DOM element with that id. You could try appending a unique identifier like forloop.counter
https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#for