每当我点击我的按钮来打开一个jQuery UI对话框,它会短暂显示(不到一秒钟),然后页面将刷新。我有这个代码3天前工作,但是当我今天早上回来并扩展它包含第二个对话框时,一切都破裂了。删除新代码并没有解决任何问题。下面的代码jquery对话框刷新页面
<!doctype html>
<html>
<head>
<style type="text/css">
.astext {
background:none;
border:none;
margin:0;
padding:0;
font-size:100%;
}
</style>
<meta charset="utf-8" />
<title>Sprinkler Controller - Main</title>
</head>
<body>
<div style="display:inline-block" id="refreshHolder"></div>
<div id="manualDur" title="0=Forever">
<form id="manualForm" method="get" action="gpio_functions.php">
<fieldset>
<label for="manDur">Duration</label>
<input type="text" name="manDur" id="manDur"/>
<input type="hidden" name="action"id="manAction"/>
<input type="hidden" name="pin"id="manPin"/>
</fieldset>
<input type="hidden" type="button" value="Submit">
</form>
</div>
<div id="autoedits">
<form method="post" action="auto.php">
<fieldset>
<input type="hidden" name="action"id="autoAction"/>
<input type="hidden" name="pin"id="autoPin"/>
</fieldset>
<input type="hidden" type="button" value="Submit">
</form>
</div>
<div id="descriptions">
<form method="get" action="gpio_functions.php">
<fieldset>
<label for="desc">Description: </label>
<input type="text" name="desc" id="desc"/>
<input type="hidden" name="pin"id="descPin"/>
</fieldset>
<input type="hidden" type="button" value="Submit">
</form>
</div>
<script src="jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#manualDur").dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"OK": function() {
submitForm();
}
}
});
$("#Descriptions").dialog({
autoOpen : false,
modal : true,
buttons: {
"Cancel": function(){
$(this).dialog("close");
},
"OK": function(){
submitDescriptions();
$(this).dialog("close");
}
}
});
refreshTable();
});
function refreshTable(){
$('#refreshHolder').load('refreshTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
function toggle($pin) {
if (document.forms["pin"+$pin+"toggle"]["action"].value == "turnOn") {
$('#manDur').attr("value", document.forms["pin"+$pin+"toggle"]["manDur"].value);
$('#manAction').attr("value", document.forms["pin"+$pin+"toggle"]["action"].value);
$('#manPin').attr("value", $pin);
$('#manualDur').dialog("open");
} else if (document.forms["pin"+$pin+"toggle"]["action"].value == "turnOff") {
$('#manDur').attr("value", "0");
$('#manAction').attr("value", document.forms["pin"+$pin+"toggle"]["action"].value);
$('#manPin').attr("value", $pin);
submitForm();
} else if (document.forms["pin"+$pin+"toggle"]["action"].value == "autoEdits") {
$('#autoAction').attr("value", document.forms["pin"+$pin+"toggle"]["action"].value);
$('#autoPin').attr("value", $pin);
$('#autoedits').submit();
}
}
function submitForm(){
$('#manualForm').submit();
$('#manualDur').dialog("close");
}
function submitDescriptions(){
$('#Descriptions').submit();
}
</script>
</body>
</html>
我已经添加了一些破发点,并可以确认,直到我叫
$('#manualDur').dialog("open");
实际打开的对话框一切都被正确传递。当对话框打开时,我看到标题是正确的,其中的文本是正确的,但随后关闭。它没有提交表格(我已经测试并证实这是真实的)。
此外,如果我改变open命令类似
$('#manualDur').dialog("{
beforeClose: function(event, ui) {go-to-webpage}");
});
或
$('#manualDur').dialog("{
Close: function(event, ui) {go-to-webpage}");
});
则什么也不会发生。就好像一切都崩溃了,页面刚刚重新加载。任何想法是什么造成这个?
编辑:一个重要的提示,我通过点击图像上调用这个函数:
echo '<td><form name="pin' . $pinNumber . 'toggle" action="main.php" onclick="toggle('.$pinNumber.')"><input type="hidden" name="action" value="' . $action . '"><input type="hidden" name="manDur" value="' . $manDur . '"><input type="image" src="'.$image.'"width="70"></form></td>';
一个音符:你应该改变$(“#说明”)选择器$(“#descriptions”) – nilgun
啊,谢谢。我已经停止测试我的代码的那部分内容,直到我确定了为什么对话立即关闭并重新加载整个页面。 – Abishur