Issue
I'm having some problems with my html page in django This is the part of the page im having problem with :
<form method="post" action="">
<div data-prefill-targets-for="1">
{% csrf_token %}
{% for group in grouped_fields %}
<tr>
{% cycle 'bgcolor1' 'bgcolor2' as row_color silent %}
{% for field in group reversed%}
{% cycle 'bgcolor1' 'bgcolor2' as cell_color silent %}
{% if forloop.first %}
<td class="w-12 bigcell {{ row_color }}">
{{ field }}
</td>
{% else %}
<td class="w-11 text-center {{ cell_color }}">
{{ field }}
<br>
<span>xx</span>
</td>
{% if forloop.last %}
<td class="w-12 bigcell {{ row_color }}">اول</td>
{% endif %}
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
as you can see I have opened and then closed the div at last line just before
But in page view :
<div data-prefill-targets-for="1">
<input type="hidden" name="csrfmiddlewaretoken" value="2VEsmoNuXje9U9ie4aXGo74ObmD6d6I0WKGSg845XaObSYlTKz9qrkWQrFejAFkB">
</div>
it closes itself right after csrf token and doesnt contain rest of my form. this is driving me crazy I dont understand where I went wrong.
just FYI this is the only JS code I have running on my page :
function handlePrefillForBoundTarget(evt) {
const targetRoot = this;
const emptyPrefillTarget = Array
.from(
targetRoot
.querySelectorAll('[data-prefill-target]')
)
.filter(elmNode =>
(elmNode.value?.trim?.() ?? elmNode.value) === ''
)[0];
if (emptyPrefillTarget) {
const prefillSource = evt
.target
.closest('[data-prefill-value]');
const { prefillValue } = prefillSource.dataset;
emptyPrefillTarget.value = prefillValue;
}
}
function initPrefillComponent(sourceRoot) {
const componentId = sourceRoot
.dataset
.prefillValuesFor ?? '';
const targetRoot = document
.querySelector(`[data-prefill-targets-for="${ componentId }"]`);
if (targetRoot) {
sourceRoot
.addEventListener(
'click',
handlePrefillForBoundTarget
.bind(targetRoot)
);
}
}
function main() {
document
.querySelectorAll('[data-prefill-values-for]')
.forEach(initPrefillComponent);
}
main();
Edit: I included the entire page for refrence
{%load static%}
{% load custom_filters %}
<html dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'style.css' %}">
<title>عنوان</title>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="#">صفحه اصلی</a>
</li>
<li>
<a href="#">صفحه اصلی</a>
</li>
<li>
<a href="#">صفحه اصلی</a>
</li>
<li>
<a href="#">صفحه اصلی</a>
</li>
<li id="srinpt">
<span>
<input />
</span>
</li>
</ul>
</div>
<div class="big-header">
کـــارت نـــوبـــت
</div>
<div class="light-header">
شماره ثبت کتابخانه ملی جمهوری اسالمی ایران44311و
</div>
<div class="light-header">
واحد ثبت آثار ، سند شماره78/3413و/33تاریخ4378/53/57ساعت33:43
</div>
<div class="dark-bg">
درجدول زیرهردوحرفی ، عددی2رقمی است ،7دوحرفی با ترتیب انتخاب شما درجدول زیر ثبت می شود
</div>
<div data-prefill-values-for="1">
<div id="darkbox" class="dark-bg">
{% for item in cartitems reversed %}
<div class="darkbox_item dark-bg">
<button data-prefill-value="{{item}}">{{item}}</button>
</div>
{%endfor%}
</div>
</div>
<table id="tbl1">
<tbody>
<tr>
<td class="w-12 bgcolor2 text-center">
از 0 تا 9 یک عدد انتخاب کن
</td>
<td class="w-11 text-center bgcolor1">
y
<br>
x
</td>
<td class="w-11 text-center bgcolor1">
=
<br>
=
</td>
<td colspan="5" class="w-11 text-center bgcolor1">
هفت دو حرفی انتخاب شده شما
<br>
عدد 14 رقمی نوبت شما
</td>
<td class="w-12 bigcell bgcolor2">نَفَر</td>
</tr>
<form method="post" action="">
<div data-prefill-targets-for="1">
{% csrf_token %}
{% for group in grouped_fields %}
<tr>
{% cycle 'bgcolor1' 'bgcolor2' as row_color silent %}
{% for field in group reversed%}
{% cycle 'bgcolor1' 'bgcolor2' as cell_color silent %}
{% if forloop.first %}
<td class="w-12 bigcell {{ row_color }}">
{{ field }}
</td>
{% else %}
<td class="w-11 text-center {{ cell_color }}">
{{ field }}
<br>
<span>xx</span>
</td>
{% if forloop.last %}
<td class="w-12 bigcell {{ row_color }}">اول</td>
{% endif %}
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
<script type="text/javascript" src="{% static 'js/valuereplace.js' %}"></script>
</html>
Solution
The reason is that you open the div inside the but you are closing it after the so html is infering where it should place the tag since the one you placed is out of its scope. Try moving the inside the tag or bring the and tags after the
Answered By - 42WaysToAnswerThat
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.