django jquery从模型中切换表单 [英] django jquery toggle in form from model

问题描述

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

I was wondering if I could get some guidance using jquery in django.

我有一个来自模型的表单，在该表单中，我希望基于选中或未选中的复选框显示某些表单字段.也可以使用按钮来完成.我已经在以良好的形式使用Jquery datepicker和timepicker. jQuery切换在此处 http://api.jquery.com/toggle/.我可以在其他地方使用它，而不仅仅是在表单内部.

I have a form from model in which I would like to display certain form fields based on a check box being checked or unchecked. Could also be done using a button. I am already using Jquery datepicker and timepicker in the form which works fine. Jquery toggle is here http://api.jquery.com/toggle/. I can get it work elsewhere, just not inside the form.

这是一些模板代码，其中"e"是传入的模型的形式，日期选择器代码作为切换方式应如何工作的替代品而包括，并使用按钮进行切换来切换代码.预先感谢.

Here is a some template code where 'e' is the form from model being passed in, the datepicker code included as a quide for how toggle should work, and toggle code using a button to toggle. Thanks in advance.

〜丰富

{% 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 %}

推荐答案

请尝试将jQuery事件代码放入onload函数中，否则dom中尚不存在表单元素，并且jQuery尚无查询对象.

Try putting the jQuery event code inside an onload function, otherwise the form elements won't exist yet in the dom and there is nothing for jQuery to query yet.

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

此外，如果有人用空格键(而不是鼠标按钮)切换输入，您可能希望绑定更改而不是单击.

Also, you may want to bind to change instead of click incase someone toggles the input with the spacebar instead of the mouse button.

这篇关于django jquery从模型中切换表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！