Question

我有一个表单，我正在尝试执行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>

Answer 1

在你的按钮方法中，只需发帖。你不应该做任何其他事情。

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。

Answer 2

这有效（除了表格重置，在另一篇文章中解决）

// form popup 
$(document).ready(function() 
{

    $("#formBox").dialog({
      bgiframe: true,
        autoOpen: false, 
        height: 600,
        width: 400, 
        modal: false,
        closeOnEscape: true,
        title: "Calculator",
        buttons:    {
            "Calculate": function() {

// form post
            $.ajax({
            type: "POST",
            url: "calc.php",
            data: $("#calcQuery").serialize(),
            dataType: "html",
            success: function(response)
                {
                $("#calcBox").html(response);
                $("#calcBox").show();   
                },
            error: function
                (xhr, ajaxOptions, thrownError)
                    {
                    alert(xhr.status); 
                    alert(thrownError);
                    }



    }).responseText;

// form post 

                }
            } 
    });

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

    });

});

使提交按钮不会杀死我的对话框

2 个答案: