0

フォームがあり、Ajax 投稿を実行しようとしています。

デフォルトの送信ボタンではダイアログ ウィンドウが閉じ、jQuery ボタンでは何も起こりません。ダイアログウィンドウを開いたままにして、Ajaxリクエストを中断せずに実行し続けEsc、大きな「X」を押すかクリックしたときにのみ閉じることができるようにします。ありがとう

<div id="formBox" style="display: hidden;">
   <form>
      <fieldset>
      <legend>File System Space Calculator</legend>
      <p>
         <label for="curr_alloc">Current Space Allocation:</label> 
         <br />
         <input type="text" size="5" name="curr_alloc" id="curr_alloc" />
         &nbsp;KB <input type="radio" name="curr_unit" value="KB" />
         &nbsp;MB <input type="radio" name="curr_unit" value="MB" />
         &nbsp;GB <input type="radio" name="curr_unit" value="GB" checked/>
         &nbsp;TB <input type="radio" name="curr_unit" value="TB" />
      </p>
      <p>
      <label for="curr_percent">Current Usage Percentage:</label> 
      <br />
         <input type="text" size="5" name="curr_percent" id="curr_percent" />
      </p>
      <p>
      <label for="desired_percent">Desired Usage Percentage:</label> 
      <br />
         <input type="text" size="5" name="desired_percent" id="desired_percent" />
      </p>
      <br />
      <p>
         <input type="submit" value="calculate"/></p>
      </fieldset>
   </form>
</div>

<div id="calcBox" style="display: none;"> </div>

<script>
$(document).ready(function() {
    $("#formBox").dialog({
      bgiframe: true,
  autoOpen: false, 
  height: 500,
  width: 500, 
  modal: false,
  closeOnEscape: true,
  title: "Calculator",
  closeText: 'Close',
  buttons: 
   {
   "Calculate": function()
/* form post */

$("#calcQuery").submit(function(){
        $.post("calc.php", $("#calcQuery").serialize(),
        function(data){
    if (data.length > 0)
    {
          $("#calcBox").html(data);
          $("#calcBox").show();
    }
    else
    {
          $("#calcBox").html("<h1>nuttin' here yet</h1>");
    }
        }, "html");

        return false;

    });

/* form post */
    }
   } 
    });

$('#calcButton').click(function(){
 $('#formBox').dialog('open');
 return false;
 });



  });

</script>
4

2 に答える 2

0

あなたのボタンメソッドでは、投稿するだけです。他に何もする必要はありません。

buttons:{
"Calculate":function(){
$.post("calc.php", $("#calcQuery").serialize(), function(data){ if (data.length > 0) {
             $("#calcBox").html(data);
             $("#calcBox").show();
       }
       else
       {
             $("#calcBox").html("<h1>nuttin' here yet</h1>");
       }
    }, "html");
});
}

整形ですみません。エディターを開かずに、あなたがくれたもので作業しました。jQuery-UI ボタン​​で false を返す必要はありません。

于 2009-11-20T22:29:46.457 に答える