Make Submit按鈕不會殺死我的對話框

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

此作品（除了在另一篇文章中討論的形式復位）

// 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'); 

    }); 

}); 

Answer 2

在你的按鈕方法，只需發表帖子。你不應該做任何事情。

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。