我在
jquery ui模式对话框中有一个表单,当我单击提交按钮时没有任何反应.有没有办法在jquery模式对话框中提交表单而无需在
javascript中编码按钮？
这是我的代码片段;
<script>
// increase the default animation speed to exaggerate the effect
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,draggable: false,resizable: false,modal: true,});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
</script>
<div id="dialog" title="new task">
<form method="post" action="/projects/{{ project.slug }}/">
<div class="form-row">
<label class="required" for="title">task type</label>
<select name="type">
{% for TaskType in project.tasktype_set.all %}
<option value="{{ TaskType.name }}">{{ TaskType.name }}</option>
{% endfor %}
</select>
</div>
<div id="buttons">
<input type="submit" value="create"/>
</div>
</form>
</div>
<button id="opener">new task</button>
如果我删除“modal：true”,使对话非模态,它将提交.
解决方法
您可以在对话框中使用$.post()或$.ajax(),例如：
$( "#dialog" ).dialog({
autoOpen: false,buttons: {
"Save": function() {
var type = $("#type option:selected").val();
$.post("/projects/{{project.slug}}/",{type:type},function(data) {
alert(data);// ---> data is what you return from the server
},'html');
},"Close": function(){
$(this).dialog('close');
}
}
});
