2013-09-23 73 views
2

每当我点击我的按钮来打开一个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>'; 
+0

一个音符:你应该改变$(“#说明”)选择器$(“#descriptions”) – nilgun

+0

啊,谢谢。我已经停止测试我的代码的那部分内容,直到我确定了为什么对话立即关闭并重新加载整个页面。 – Abishur

回答

0

这结束了有关将函数调用上点击图像上的问题。我需要添加“返回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>'; 
+0

我不想用这个来浑浊答案,但是当我知道return false修复了这个问题时,我不明白为什么它修复了这个问题。我曾看到有人建议在其他上下文中使用return false(例如在对话框函数或对话框声明中),但我发现在使用图像作为按钮时需要包含它的信息是一种完全的侥幸。当我使用常规按钮时,我不必包含“返回false”。 – Abishur

相关问题