2

ボタンをクリックしてjquery uiダイアログボックスを開くたびに、短時間（1秒未満）表示されてからページが更新されます。このコードは 3 日前に機能していましたが、今朝戻ってきて 2 つ目のダイアログ ボックスを含むように拡張したところ、すべてが機能しなくなりました。新しいコードを削除しても何も修正されていません。これがコードです

<!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}");
});

その後、何も起こりません。すべてがクラッシュし、ページがリロードされるだけのようです。これの原因は何ですか？

編集: 1 つの重要な注意として、画像をクリックしてこの関数を呼び出します。

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