I am using Grails 3.1.9 as the platform, my problem is that when the button Add Item has not been clicked, I can see the contents of the dialog box at the bottom of the page, and when the button is clicked, the contents disappear from the bottom. How do I prevent this from happening? Any help you can provide will be greatly appreciated.
Before Clicking Add Item Button
After Clicking Add Item Button
show.gsp Code is:
<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>
