Когда я нажимаю на кнопку, чтобы открыть диалоговое окно jquery ui, он будет кратковременно отображать (менее секунды), а затем страница обновляется. У меня был этот код, работающий 3 дня назад, но когда я вернулся и расширил его, чтобы включить второе диалоговое окно сегодня утром, все сломалось. Удалить новый код ничего не зафиксировал. Вот кодjquery dialog refreshes page
<!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}");
});
, то ничего не происходит. Это похоже на то, что все сбой, и страница просто перезагружается. Любая идея, что вызывает это?
Edit: Еще одно важное замечание, я называю эту функцию, нажав на изображение:
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>';
один примечание: вы должны изменить $ («# Описания») селектор $ ("# описания") – nilgun
А, спасибо. Я перестала проверять эту часть своего кода, пока не выяснила, почему диалог закрывается немедленно и перезагружает всю страницу. – Abishur