javascript - 即使 Jquery 对话框未打开，Div 对话框内容也会显示

Question

我使用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>

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