django jquery在模型中切换形式

Question

我想知道是否可以在django中使用jquery获得一些指导。

我有一个模型的表单，我希望显示某些基于复选框被选中或未选中的表单域。也可以使用按钮完成。我已经使用jquery datepicker和timepicker的形式工作正常。 JQuery的切换在这里http://api.jquery.com/toggle/。我可以在其他地方工作，只是不在表格内。

这是一些模板代码，其中'e'是来自传入的模型的形式，日期选择器代码包含作为切换应该如何工作的提示，以及使用按钮切换代码来切换。提前致谢。

〜丰富

{% block head %} 
<link type="text/css" href="/media/jquery-ui-1.8.7.custom/css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="/media/jquery-ui-1.8.7.custom/js/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
    <link type="text/css" href="/media/jquery-ui-1.8.7.custom/jquery.timepicker-1.1.0/jquery.timepicker-1.1.0.css" rel="stylesheet" /> 
    <script type="text/javascript" src="/media/jquery-ui-1.8.7.custom/jquery.timepicker-1.1.0/jquery.timepicker-1.1.0.js"></script> 
    <script type="text/javascript" src="/media/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js"></script> 
{% endblock %} 

{% block content %} 
<script type="text/javascript"> 
<!--jquery datepicker--> 
$(function() { 
    $("#id_start_date, #id_end_date").datepicker({ showOn: "both", 
     buttonImage: "/media/calendar.gif", 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'yy-mm-dd' }); 
}); 
</script> 
<script> 
$("#id_allday").click(function() { 
$('#toggle').toggle("slow"); 
}); 
</script> 

<form action="" method="POST"> 
<fieldset style="width:700px; margin-left: auto; margin-right: auto; border: 1px solid #ff9900"> 
    <legend style="color: #ff9900; font-weight: bold">New</legend> 
<table > 
    <tbody> 
    <tr><td style="vertical-align: top;">Date: {{e.start_date.errors}} {{e.start_date}}</td> 
    <td style="vertical-align: top;">End Date {{e.end_date.errors}} {{e.end_date}}</td> 
    </tr> 
    <tr><td style="vertical-align: top;">Time: All Day {{e.allday.errors}} {{e.allday}} 
<button>Add times</button></td> 
    <div id='toggle'> 
    <td style="vertical-align: top;">Start Time: {{e.start_time.errors}} {{e.start_time}}<br></td></tr> 
    <td style="vertical-align: top;">End Time: {{e.end_time.errors}} {{e.end_time}}</td> </tr> 
    </div> 
    </tbody> 
    </table> 
<input value="Submit" type="submit"></fieldset></form> 

</div> 
{% endblock %} 

Answer 1

尝试把jQuery的事件代码的函数的onload里面，否则表单元素不会在DOM中还不存在并没有什么jQuery的查询呢。

$(document).ready(function() { 
    $("#id_allday").click(function() { 
     $('#toggle').toggle("slow"); 
    }) 
} 

此外，您可能要绑定改变，而不是点击柜面有人切换用空格键代替鼠标按钮的输入。