在 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}}&nbsp;&nbsp;&nbsp;
<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">&times;</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">&times;</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:&nbsp; </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 请求,但无法生成。数组请求。GET(( 返回 None。

这是弹出窗口的屏幕截图

您可以尝试将按钮插入到如下所示的表单中。

<form method="get" action="<YOUR DESIRED ACTION>">
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>

希望对...

最新更新