Make Submit button not kill my dialog box

Question

okay .. nooob alert.. sorry

I have a form and Im trying to perform ajax posts.

With the default submit button the dialog window closes, with the jquery button, nothing happens. I want the dialog window to stay open so I can keep doing ajax requests uninterrupted and only close when I press esc or click the big "X". Thanks

<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

In your button method, just make the post. You shouldn't have to do anything else.

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

I apologize for the formatting. I worked with what you gave me without opening an editor. You shouldn't need to return false in a jQuery-UI button.

Answer 2

This works (except for form reset which is addressed in another post)

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

    });

});