2013-09-23 77 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

相關問題