0

使用 jQuery UI 对话框时，不会显示加载到作为对话框一部分的表单文本区域字段中的值。

我正在尝试使用 jQuery 对话框来弹出一个 CRUD 表单。在更新（编辑）的情况下，表单字段会加载来自正在“编辑”的项目的值。

当我打开对话框时（如果 key == "edit"），会显示 "name" 字段，但不会显示描述 textarea。

查看 Firebug 下的 HTML 选项卡，textarea 的文本值（textarea 和 /textarea 之间的值）已正确设置，但该值不会显示在结果对话框中：

<form id="CRUDform">
<fieldset>
<label for="name">Name</label>
<input id="name" class="text ui-wiget-content ui-corner-all" type="text" style="display:block" value="[SHOULD NEVER SEE THIS]" name="name">
<label for="description">Description</label>
<textarea id="description" class="text ui-widget-content ui-corner-all" style="display:block" name="description">Description of Nothing</textarea>
<!-----------------------------------^^^^^^^^^^^^^^^^^^^^^^ -->
</fieldset>
</form>

我发现一些与对话框相关的表单字段问题的引用被附加到文档正文而不是表单，但这似乎与这种情况无关。

平台：Windows 7 Professional
浏览器：Firefox 24.0
Firebug：1.12.3
jQuery：1.9.1
jQuery UI：1.10.3

这是测试代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
<style>
.dialog
{
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery.contextMenu.js"></script>
<script>
$(function () {
    $(".dialog").hide();

    $.contextMenu({
        selector: '.myContext' ,
        build: function ( trigger , thrown )
        {
            return (
            {
                autoHide: true ,
                callback: function ( key , menuOptions )
                {
                    var name = $(this).data("label");
                    var message = "menu action [" + key + "] on [" + name + "]";

                    window.console && console.log(message) || alert(message);

                    if (key == "new")
                    {
                        $("#dialog").dialog({
                            title: "Adding Child of " + name + " Class",
                            modal: true ,
                            buttons:
                            {
                                "Create" : function ()
                                {
                                    var name = $("#name").val();
                                    var description = $("#description").val();

                                    alert("Adding name [" + name + "] description [" + description + "]");

                                    $(this).dialog("close");
                                },
                                "Cancel" : function ()
                                {
                                    $(this).dialog("close");
                                }
                            },
                            close: function ()
                            {
                                $("#name").val("").removeClass("ui-state-error");
                                $("#description").val("").removeClass("ui-state-error");
                            }
                        });
                    }
                    else if (key == "edit")
                    {
                        var name = $(this).data("label");
                        var description = $(this).data("description");

                        console.log("editing name [", name , "] description [", description , "]");

                        $("#name").val(name);
                        $("#description").text(description);

                        console.log("name set to [" ,
                            $("#name").val() , "] description set to [",
                            $("#description").text() , "]");

                        $("#dialog").dialog({
                            modal: true ,
                            title: "Editing " + name ,
                            buttons:
                            {
                                "Save" : function ()
                                {
                                    var name = $("#name").val();
                                    var description = $("#description").val();

                                    alert("Saving name [" + name + "] description [" + description + "]");

                                    $(this).dialog("close");
                                },
                                "Cancel" : function ()
                                {
                                    $(this).dialog("close");
                                }
                            },
                            close: function ()
                            {
                                $("#name").val("").removeClass("ui-state-error");
                                $("#description").val("").removeClass("ui-state-error");
                            }
                        });
                    }
                },
                items:
                {
                    "new" : { name: "New", icon: "new" } ,
                    "edit" : { name: "Edit", icon: "edit" } ,
                    "delete" : { name: "Delete" , icon: "delete" }
                }
            });
        }
    });

});
</script>
<body>
<title>jQuery Dialog Test</title>
</head>
<h1>jQuery Dialog Test</h1>
<div id="list" class="list">
<ul>
<li class="myContext" data-description="Description of Something" data-label="Something">Something</li>
<li class="myContext" data-description="Description of Something Else" data-label="Something Else">Something Else</li>
<li class="myContext" data-description="Description of Nothing" data-label="Nothing">Nothing</li>
</ul>
</div>
<div class="dialog" id="dialog" title="Do Something">
    <h1>Doing Something</h1>
    <form id="CRUDform">
    <fieldset>
    <label for="name">Name</label>
        <input type="text" name="name" id="name" value="[SHOULD NEVER SEE THIS]" style="display:block" class="text ui-wiget-content ui-corner-all">
    <label for="description">Description</label>
        <textarea name="description" id="description" style="display:block" class="text ui-widget-content ui-corner-all">[SHOULD NEVER SEE THIS]</textarea>
    </fieldset>
    </form>
</div>
</body>
</html>
4

0 回答 0