html - 在 jinja 循环 (Django) 中创建新的 html/css 元素的问题
问题描述
我正在尝试在表单中的 jinja 循环中创建新的 html/css 元素，我正在填充从 django 视图带来的数据。所有正常的浏览器端的东西，比如点击按钮时的弹出窗口都很好。但只有最后一个按钮成功发出 GET 请求，而每个按钮都必须这样做。这是我的表格：
<form method="GET" action="{% url 'search_results' %}">
{% csrf_token %}
{% for name,quali,field,address,pro,c in data %}
<div class="ser_tile">
<img src={{pro}} id="user_dr" >
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#{{c}}">Visit Page</button>
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#b{{c}}">Book Appointment</button><br/><br/>
<span >
Name: {{name}}
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span><br/>
Degree: {{quali}}<br/>
Specialist: {{field}}<br/>
Hospital: Pradyumna Bal Memorial Hospital<br/>
Address: {{address}}
</span>
</div><br>
<div class="modal fade" id="{{c}}" tabindex="-1" role="dialog">
<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>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Specialist:</b></td>
<td>
{{field}}
</td>
</tr>
<tr>
<td><b> Ratting:</b></td>
<td>
3
</td>
</tr>
<tr>
<td><b>Available On:</b></td>
<td>
Monday(10:30AM : 5:00PM), Thursday(10:30AM : 1:00PM) , Saturday(10:30AM : 1:00PM)
</td>
</tr>
<tr>
<td><b>Minimum Chagre:</b></td>
<td>
Rs:500/-
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer qq{{c}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn_tile" data-toggle="modal" data-target="#b{{c}}" data-dismiss="modal">Book Appointment</button>
</div>
</div>
</div>
</div>
<script>
$(".btn_tile").click(function(event){
event.preventDefault();
});
</script>
<div class="modal fade" id="b{{c}}" tabindex="-1" role="dialog">
<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>
<h4 class="modal-title">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Date:</b></td>
<td>
<input name="date" class="td_in" type="date">
</td>
</tr>
<tr>
<td ><b> Time:</b></td>
<td>
<input name="time" class="td_in" type="time">
</td>
<td>
<b>Avilable times: </b>
</td>
<td>
1:00PM, 3:00PM
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</div>
</div>
</div>
</div>
<hr/>
{% endfor %}
</form>
这个特定的按钮（确认预订）必须生成一个 GET 请求，但它失败了。数组 request.GET() 返回 None。
解决方案
您可以尝试将按钮插入到如下表单中......
<form method="get" action="<YOUR DESIRED ACTION>">
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>
希望能帮助到你...