Div对话框的内容甚至在Jquery Dialog未打开时显示

Question

我使用Grails 3.1.9作为平台，我的问题是当按钮添加项目没有被点击时，我可以看到对话框的内容框放在页面底部，点击按钮时，内容从底部消失。我如何防止这种情况发生？任何帮助你可以提供将不胜感激。

之前单击Add Item按钮

单击添加项目按钮

show.gsp代码之后是：

<div id="dialogEntry" title="Item Entry"> 
       <fieldset class="form"> 
        <form id="entryForm" action="" method="post" ><input type="hidden" name="_method" value="PUT" id="_method" /> 
         <input type="hidden" name="invoice.id" value="${invoice.id}" /> 
         <div class="fieldcontain required"> 
         <label for="product"> 
          <g:message code="orderItem.product.label" default="Product" /> 
          <span class="required-indicator">*</span> 
         </label> 
         <input type="text" name="product" value="" required="" id="product" /> 
         <input type="hidden" id="prodid" value="" /> 
         <div class="fieldcontain"> 
          <label for="quantityInStock"> 
           Quantity in Stock 
          </label> 
          <input type="text" id="quantityInStock" value="" readonly="true" /> 
         </div> 
         </div> 
         <div class='fieldcontain required'> 
         <label for='quantity'>Quantity 
         <span class='required-indicator'>*</span> 
         </label><input type="number" name="quantity" value="1" required="" min="1" id="quantity" /> 
         </div> 
         <div class='fieldcontain required'> 
         <label for='price'>Price 
         <span class='required-indicator'>*</span> 
         </label><input type="number" name="price" value="" required="" step="0.01" min="1.00" id="price" /> 
         </div> 
         <div class="fieldcontain"> 
          <label for="totalAmount"> 
           Total Amount 
          </label> 
          <input type="null" name="totalAmount" value="" id="totalAmount" /> 
         </div> 
        </form> 
       </fieldset> 
      </div> 
<script> 

      var editId; 
      document.getElementById("add").onclick = function() {myFunction()}; 
      function myFunction() { 
       document.getElementById("add").innerHTML = 
         $("#dialogEntry").dialog({ 
          autoOpen: true, 
          modal: true, 
          width: 500, 
          buttons: [ 
           { 
            text: "Save", 
            click: function() { 
             var quantity = $('#quantity')[0].value; 
             var quantityInStock = $('#quantityInStock')[0].value; 
             if (quantity.length == 0) { 
              alert('Quantity is required'); 
              $('#quantity')[0].focus(); 
              return; 
             } 
             if (parseInt(quantity) > parseInt(quantityInStock)) { 
              alert('Quantity cannot be served as Quantity in Stock is just ' + quantityInStock); 
              $('#quantity')[0].focus(); 
              return; 
             } 
             $(this).dialog("close"); 
             var price = $('#price')[0].value; 
             var prodid = $("#prodid")[0].value; 
             // submit to server 
             //var form = $('#entryForm')[0]; 
             if (editId != 0) { 
              $.ajax({ 
               type: "POST", 
               url: "${resource(dir:'orderItem/updatex')}/" + editId, 
               data: {'productid':prodid, 'quantity':quantity, 'price':price}, 
               async: true, 
               cache: false, 
               success: function (result) { 
                //alert('OK ' + result.success.message) 
                update(editId) 
               }, 
               error: function (XMLHttpRequest, textStatus, errorThrown) { 
                alert(textStatus + " " + errorThrown); 
               } 
              }); 
             } else { 
              $.ajax({ 
               type: "POST", 
               url: "${resource(dir:'orderItem/savex')}/" + editId, 
               data: {'productid':prodid, 'quantity':quantity, 'price':price, 'invoiceid':${invoice.id}}, 
               async: true, 
               cache: false, 
               success: function (result) { 
                var id = result.success.id 
                //alert('OK ' + id) 
                update(id) 
               }, 
               error: function (XMLHttpRequest, textStatus, errorThrown) { 
                alert(textStatus + " " + errorThrown); 
               } 
              }); 
             } 
            } 
           }, 
           { 
            text: "Cancel", 
            click: function() { 
             $(this).dialog("close"); 
            } 
           } 
          ] 
         }); 
      } 
</script> 

Answer 1

<div id="dialogEntry" title="Item Entry"> 

更改为：

<div id="dialogEntry" title="Item Entry" style="display:none;"> 

更改此：

document.getElementById("add").innerHTML = 
         $("#dialogEntry").dialog({ 

到

document.getElementById("add").innerHTML = 
         $("#dialogEntry").show().dialog({ 

更改为：

text: "Cancel", 
            click: function() { 
             $(this).dialog("close").hide(); 
            }