Le bouton Make Submit ne tue pas ma boîte de dialogue

Question

J'ai un formulaire et j'essaie d'effectuer des messages Ajax.

Avec le bouton d'envoi par défaut, la fenêtre de dialogue se ferme, avec le bouton jQuery, rien ne se passe. Je veux que la fenêtre de dialogue reste ouverte afin que je puisse continuer à faire des requêtes Ajax sans interruption et que je ferme seulement quand j'appuie sur Esc ou cliquez sur le grand "X". Merci

<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

Cela fonctionne (sauf pour la forme remise à zéro qui est traitée dans un autre poste)

// 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

Dans votre méthode de bouton, il suffit de faire le post. Vous ne devriez pas avoir à faire autre chose.

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

Je m'excuse pour le formatage. J'ai travaillé avec ce que tu m'as donné sans ouvrir un éditeur. Vous ne devriez pas avoir besoin de retourner false dans un bouton jQuery-UI.