2

每当我单击按钮打开 jquery ui 对话框时，它会短暂显示（不到一秒钟），然后页面将刷新。3 天前我有这段代码工作，但是当我今天早上回来并扩展它以包含第二个对话框时，一切都坏了。删除新代码并没有解决任何问题。这是代码

<!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>';
4

1 回答 1

0

它最终成为与在单击图像时放置函数调用有关的问题。我需要在函数调用中添加“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>';
于 2013-09-24T03:03:37.623 回答