每当我单击按钮打开 jquery ui 对话框时，它将短暂显示(不到一秒)，然后页面将刷新。三天前我让这段代码正常工作，但是当我今天早上回来并将其扩展为包含第二个对话框时，一切都崩溃了。删除新代码并没有修复任何问题。这是代码
<!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");
实际打开对话框时，所有内容都已正确传递。当对话框打开时，我看到标题是正确的，其中的文本也是正确的，但随后它关闭了。它没有提交表单(我已经测试并确认这是真的)。
此外，如果我将打开命令更改为类似的内容
$('#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>';
最佳答案
这最终成为与单击图像时进行函数调用相关的问题。我需要在函数调用中添加“return false”才能使其正常工作，因此它从
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>';
至
echo '<td><form name="pin' . $pinNumber . 'toggle" action="main.php" onclick="toggle('.$pinNumber.'); return false"><input type="hidden" name="action" value="' . $action . '"><input type="hidden" name="manDur" value="' . $manDur . '"><input type="image" src="'.$image.'"width="70"></form></td>';
关于jquery 对话框刷新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18968311/