如何在Django中的表元素中创建带有表单的弹出窗口
我想为表中的每个元素都有一个“sendemail”按钮,一旦用户点击这个按钮,就会出现一个弹出窗口,里面有一个表单和一个按钮。我尝试使用jquery弹出窗口,但它不起作用,请有人告诉我我做错了什么,或建议我创建此弹出窗口的任何其他方法。目前我正在使用twitter引导模式,但我想用弹出/弹出模式来代替它如何在Django中的表元素中创建带有表单的弹出窗口,django,jquery-ui,twitter-bootstrap,django-forms,django-templates,Django,Jquery Ui,Twitter Bootstrap,Django Forms,Django Templates,我想为表中的每个元素都有一个“sendemail”按钮,一旦用户点击这个按钮,就会出现一个弹出窗口,里面有一个表单和一个按钮。我尝试使用jquery弹出窗口,但它不起作用,请有人告诉我我做错了什么,或建议我创建此弹出窗口的任何其他方法。目前我正在使用twitter引导模式,但我想用弹出/弹出模式来代替它 homepage.html <table id="search-results" class="table table-hover"> </t
homepage.html
<table id="search-results" class="table table-hover">
</table>
ajax.js
$(function(){
$('#searchtest').click(function() {
$.ajax({
type: "POST",
url: "/searchtrips/",
data: {
'city' : $('#city').val(),
'location' : $('#location').val(),
'duration' : $('#duration').val(),
'search_text' : $('#searchtest').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
});
});
function searchSuccess(data, textStatus, jqXHR)
{
$('#search-results').html(data);
}
search-results.html
{% for data in datas %}
<tr>
<td>{{ data.score}}</td>
<td>{{ data.distance}}</td>
<td>{{ data.time}}</td>
{%for element in data.place.elements%}
<td>
{{element.placeName}}
</td>
{% endfor %}
<td>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Share with your friends</h3>
</div>
<form action="{% url "send_mail"%}" class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<input type="text" name="subject" value="Your friend has shared a traverse trip" id="subject" placeholder="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<input type="text" name="message" id ="message" placeholder="message" value ="Here we will have the link ">
</div>
</div>
<div class="modal-footer">
{% csrf_token %}
<input type="submit" value="email" class="btn btn-primary">
</div>
</form></div>
<a href="#myModal" role="button" class="btn btn-mini" data-toggle="modal"><i class="icon-envelope"></i>SendEmail</a>
<a href="{% url "add_trip" city=data.score score=data.score distance=data.distance|floatformat:"0" time=data.time %}"
class ="btn btn-mini btn btn-warning">Add/delete</a>
</td>
</tr>
{% endfor %}*
homepage.html
ajax.js
$(函数(){
$(“#searchtest”)。单击(函数(){
$.ajax({
类型:“POST”,
url:“/searchtrips/”,
数据:{
“城市”:$(“#城市”).val(),
“位置”:$(“#位置”).val(),
‘duration’:$(‘duration’).val(),
“search_text”:$(“#searchtest”).val(),
'csrfmiddlewaretoken':$(“输入[name=csrfmiddlewaretoken]”)。val()
},
成功:搜索成功,
数据类型:“html”
});
});
});
函数searchSuccess(数据、文本状态、jqXHR)
{
$(“#搜索结果”).html(数据);
}
search-results.html
{%用于数据%中的数据}
{{data.score}
{{data.distance}}
{{data.time}
{data.place.elements%}
{{element.placeName}
{%endfor%}
×
与你的朋友分享
主题
电子邮件
消息
{%csrf_令牌%}
{%endfor%}*
您的发帖请求将在www.yourdomain.com/searchtrips/?应该是Mike…com/appname/searchtrips吗?如果不是这个问题,你能给我们提供你的Django abd网络浏览器日志吗?到底是什么不起作用?这是django的问题还是弹出窗口本身的问题。在这里你可以看到一个处理弹出窗口的解决方案:我有两个页面,1。主页和搜索结果页面所有我的jquery和javascripts都导入主页。主页上有一个表格,其中填充了搜索结果。现在,当我在主页中实现bootstrap popover时,它工作得很好,但是如果将相同的代码复制到搜索结果页面,它就不工作了。我看到按钮,但在悬停或单击时,什么也没有发生。我是否遗漏了javascript和元素应该同时加载的部分?我指的是这个简单的popover教程