使用ajax数据库列表中的jinja ID激活复选框

Question

我正在做我的第一个web开发项目，我完全被这个错误弄糊涂了。我的html包含一个jinja循环，用于迭代地生成具有唯一id的复选框。我想勾选复选框基于列表的id从我的数据库返回与AJAX通过jquery，但似乎有一些奇怪的jinja - jquery交互，这意味着复选框id不工作。

js文件示例部分:

$(document).ready(function () {
$("#selectAll").click(function () {
// get checkbox ids from database as a list: 
$.ajax({
url: "/api/get-availability",
type: 'GET',
data: {
"Pro": $("#prochoice").text(),
"Date": [day, month, year].join('/')
},
success: function (data) {
for (let d of data) {
$("#" + d).prop('checked', true); // iterate over ids for checkboxes
}
}
});
}

复选框:

<!-- choose time -->
<div class="mt-3 mb-0 m-2" style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div class="container row justify-content-md-center">
{% for tt1, tt2 in time %}
<div class="col-md-6">
<div class="custom-control custom-checkbox m-0 mt-1" style="text-align: left;">
<input type="checkbox" name="timescheck" class="custom-control-input" id="{{ tt1 }}">
<label class="custom-control-label" for={{ tt1 }}>{{ tt1 }} - {{ tt2 }}</label>
</div>
</div>
{% endfor %}
</div>

api调用

@api.route('/get-availability', methods=['GET'])
def get_availability():
return ['16:00', '16:30', '17:00']

呈现HTML模板

@website.route("/availability-admin")
def availadmin():
# Set the total time list for checkboxes here:
t1 = ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'] 
t2 = ['15:30', '16:00', '16:30', '17:00', '17:30', '18:00'] 
env = jinja2.Environment()
env.globals.update(zip=zip)
time = zip(t1, t2)
return render_template('availabilty-admin.html', time = time)

Answer 1

也许Jinja将花括号解释为它自己的语法，而不是作为HTML元素ID的一部分。这个可以解决它。不是100%确定

JS

$(document).ready(function () {
$("#selectAll").click(function () {
// get checkbox ids from database as a list: 
$.ajax({
url: "/api/get-availability",
type: 'GET',
data: {
"Pro": $("#prochoice").text(),
"Date": [day, month, year].join('/')
},
success: function (data) {
for (let d of data) {
$("#'" + d + "'").prop('checked', true);// iterate over ids for checkboxes
}
}
});
}

HTML

<!-- choose time -->
<div class="mt-3 mb-0 m-2" style="text-align: left;"><label>Choose availability:</label>
<!-- iterate over checkboxes using jinja -->
<div class="container row justify-content-md-center">
{% for tt1, tt2 in time %}
<div class="col-md-6">
<div class="custom-control custom-checkbox m-0 mt-1" style="text-align: left;">
<input type="checkbox" name="timescheck" class="custom-control-input" id='{{ tt1 }}'>
<label class="custom-control-label" for={{ tt1 }}>{{ tt1 }} - {{ tt2 }}</label>
</div>
</div>
{% endfor %}
</div>

Answer 2

对于感兴趣的人，不接受':'等特殊字符作为id。因此，在解析id之前使用pythontext.replace(':', '')函数是这种情况下的解决方案(或者首先是更好的id选择)。