Question

使用jQuery UI对话框时，不会显示加载到对话框中的表单textarea字段中的值。

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

当我打开对话框（如果键==“编辑”）时，会显示“名称”字段，但不显示描述文字区域。

在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专业版浏览器：Firefox 24.0
萤火虫：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>

JQuery UI Dialog丢失了预加载的textarea值

0 个答案: