Question

我有一个带有form和select（复选框）控件的HTML（嗯......）input形式的JQuery UI模式对话框。对话框和控件按预期工作，除非控件保持其新状态（例如复选框已选中），即使我关闭对话框窗口（或按下按钮＆＃34;取消＆＃34;）。

当按下某个退出按钮（例如＆＃34;取消＆＃34;）时，是否有任何机制可以让jQuery UI对话框保留旧的控件状态，或者我是否已经执行了自己的状态管理在JavaScript（我希望不是）。

以下是当前发生和不应该发生的事情的一个例子：

输入对话框。
复选框已关闭。
将复选框从关闭更改为开启。
关闭对话框窗口。
再次打开它。
复选框已开启（我希望它关闭，因为此对话框之前是＆＃34;已取消＆＃34;）。

更新以下是我的HTML的相关部分，包括对clone()的调用。

<script>
$(function() {
    var dialog = $("form.dialog").clone().dialog({
        autoOpen: false,
        height: 300,
        width: 300,
        modal: true,
        buttons: [
            {
                text: "Ok",
                click: function() {
                    $(this).submit();
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }
            }
        ]
    });

    $(“#dialog-button”).on("click", function() {
        dialog.dialog("open");
        return false;
    });
});

</script>

<form hidden method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title=“Test”>

        <select name="name">

            </option>
                <option value="value">
                Test
                </option>

Answer 1

在这种情况下，我可能会在创建对话框之前克隆form。然后，使用克隆元素创建对话框。这样，控件应该是不连接的。

$('form.myForm').clone().dialog();

请注意，它们不应具有ID，因为最终会在文档中出现重复的ID。

Answer 2

您可以使用原生reset()元素的<form>方法重置表单，如下所示：

$(function() {
  var dialog = $("form.dialog").dialog({
    autoOpen: false,
    height: 200,
    width: 300,
    modal: true,
    buttons: [{
      text: "Ok",
      click: function() {
        $(this).submit();
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close").get(0).reset(); //reset the form
      }
    }],
    close: function() {
      this.reset(); //reset the form
    }
  });

  $("#dialog-button").on("click", function() {
    $("form.dialog").dialog("open");
    return false;
  });
});

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form method="post" action="" class="dialog" class="ui-dialog-titlebar ui-widget-header" title="Test">
  <select name="name">
    <option value="value">Test</option>
    <option value="value">Option</option>
  </select>
  <input type="checkbox" />
</form>
<button id="dialog-button">Open</button>

reset()方法属于DOM元素。回调函数this内部引用了本机DOM元素。

dialog()是一个jQuery函数。因此，为了关闭对话框，我们通过将this包裹在$()内并调用$(this).dialog("close");来创建一个jquery对象。

现在，jquery对象$(this)没有reset()方法，所以我们使用jQuery DOM方法从中提取get()元素并调用它reset() 1}}喜欢

 $(this).dialog("close").get(0).reset();

这相当于：

$(this).dialog("close"); 
this.reset();

（总之，我这样做是为了通过链接减少行数）

在close回调中，由于我们不必通过调用jquery方法手动关闭对话，我们不需要jquery对象 - 我们只需调用this.reset()进行重置。

参考：

旁注：您使用的引号（“）在javascript中无效。

如何在关闭jQuery UI对话框时保留HTML控件的旧值（＆＃34;取消＆＃34;）？

2 个答案: