Question

过去几天我一直致力于单页面应用。我面临的一个问题与JQuery对话框有关。我想在JQuery对话框中显示我的表单。有几个不同的屏幕，每个屏幕都有不同的形式。用户将单击“添加”或“编辑”按钮。我传递div id，该内容应出现在对话框中。每个div都有唯一的id，每个div里面都有不同的形式。这是我创建JQuery对话框的代码：

JQuery对话框：

var dialogDiv;
$.extend({ 
    alert: function (message, title, height, width, print) {
        var dialogButtons = {
            "Ok": function() {
                message.hide();
                $(this).dialog("close");
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        if (!dialogDiv) {
            dialogDiv = $("<div>"); 
        }   
        dialogDiv.dialog( {
            buttons: dialogButtons,
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                    my: "center",
                    at: "center",
                    of: window
            }
        }).html(message);
    }
});

以下是不同形式的div容器示例：

//Form 1
<div id="myForm1" class="frmLayout">
    <form name="frmUser" id="frmUser" method="POST" action="#">
        <fieldset>
            <legend>User Info</legend>
            <div class="formItem">
                <span class="required" style="color:red;"><b>Required Fields</b></span>
            </div>
            <div class="formItem">
                <label for="last_name" class="required">Last Name:</label>
                <input type="text" name="ur_lname" id="ur_lname" value="" size="20" maxlength="30" />
            </div>
            <div class="formItem">
                <label for="first_name" class="required">First Name:</label>
                <input type="text" name="ur_fname" id="ur_fname" value="" size="20" maxlength="30" />
            </div>
            <div class="formItem">
                <label for="dob" class="required">DOB:</label>
                <input type="text" name="ur_dob" id="ur_dob" value="" size="10" maxlength="10" />
            </div>
            <div class="formItem">
                <p align="center"><input type="button" name="urSubmit" id="urSubmit" value="Submit"></p>
            </div>
        </fieldset>
    </form>
</div>

//Form 2
<div id="myForm2" class="frmLayout">
        <form name="frmVehicle" id="frmVehicle" method="POST" action="#">
            <fieldset>
                <legend>Vehicle Info</legend>
                <div class="formItem">
                    <span class="required" style="color:red;"><b>Required Fields</b></span>
                </div>
                <div class="formItem">
                    <label for="name" class="required">Name:</label>
                    <input type="text" name="ur_name" id="ur_name" value="" size="20" maxlength="30" />
                </div>
                <div class="formItem">
                    <label for="model" class="required">Model:</label>
                    <input type="text" name="ur_model" id="ur_model" value="" size="20" maxlength="30" />
                </div>
                <div class="formItem">
                    <p align="center"><input type="button" name="urSubmitV" id="urSubmitV" value="Submit"></p>
                </div>
            </fieldset>
        </form>
    </div>

......表格3和表格4相似。

用户访问主页后，所有HTML内容都会加载并设置为display:none。以下是如何在对话框中显示此内容的示例：

$('input[name="my button name"]').on('click', function formSubmit(){
    var tabID = $('#tabID').val(); //each tab on my home page has unique id. Current tab value is set to hidden field.
    var divID = $('#'+tabID+'Form'); //This line of code will select correct form
    $.alert(divID.show(),'Form Input',800,600); //here I show the content
});

此代码的问题是，关闭对话框后，divID内容将从页面中消失。例如，我将单击第一个选项卡上的“添加”按钮。表单1将显示在对话框中。一旦我转到选项卡2并单击并显示表单2，然后返回选项卡1并尝试单击“添加”按钮，我将在“JQuery”对话框中显示空白页面。出于某种原因，先前的内容将从页面中删除。我想知道如何解决这个问题以及最佳解决方案是什么？在我在JQuery对话框中显示之前，我应该如何制作HTML内容的副本，还是有更好的方法来做到这一点？如果有人可以帮忙或有任何例子，请告诉我。

谢谢。

Answer 1

所以问题是你每次都会生成模态... 我会这样做：

var dialogDiv;
$.extend({ 
    alert: function (message, title, height, width, print, clone) {
        var dialogButtons = {
            "Ok": function() {
                message.hide();
                $(this).dialog("close");
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        if (!dialogDiv) {
            dialogDiv = $("<div>"); 
        } 
        if(clone){
            dialogDiv = $("body").append(dialogDiv);
        }
        dialogDiv.dialog( {
            buttons: dialogButtons,
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                   my: "center",
                   at: "center",
                   of: window
            }
        }).html(message);
    }
});

我注意到UI对话框适用于页面中已有的DIV。但是，您没有传递现有元素，而是创建了一个元素。这就是我认为你失去内容的原因。使用＆＃34;克隆＆＃34; param，你可以传递true / false，来决定你是否要在体内追加一个新的div。所以它将来会有用。

JQuery对话框显示HTML内容并阻止在关闭对话框后删除HTML？

1 个答案: