我使用Grails 3.1.9作为平台，我的问题是，当未单击“添加项目”按钮时，我可以看到页面底部对话框的内容，而当单击该按钮时，内容从底部消失。我该如何防止这种情况发生？我们将非常感谢您提供的任何帮助。
单击“添加项目”按钮之前
单击“添加项目”按钮后
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>
最佳答案
<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();
}
关于javascript - 即使 Jquery 对话框未打开，Div 对话框内容也会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38606168/