每當我點擊我的按鈕來打開一個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