Question

我的网站上有一个html表单。我在里面调用了三个值的jQueryUI对话框。当我在对话框中选择其中一个值时，它会回到html表单，但是html正在重新加载，所有其他字段都被清除。

如何在不重新加载页面和丢失数据的情况下从对话框传递数据？

Answer 1

您可以引用表单中的元素（例如，如果您想更新其值），在按钮的回调函数中添加选择器。

以下示例显示了当用户在jQuery UI对话框中单击按钮时如何更改ID为result的DIV的内容。

下面的实例：

$("#dialog-message").dialog({
  modal: true,
  draggable: false,
  resizable: false,
  position: ['center', 'top'],
  show: 'blind',
  hide: 'blind',
  width: 400,
  dialogClass: 'ui-dialog-osx',
  buttons: {
    "I've read and understand this": function() {
      // this code s executed when user click the button inside the dialog
      $(this).dialog("close");
      $('#result').text('some info here');
    }
  }
});

body {
  font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}

.ui-dialog-osx {
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  border-width: 0 8px 8px 8px;
}

<p>Hello World!
</p>

<form>
<div id="result"></div>
<div id="dialog-message" title="Important information">
  <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
  <div style="margin-left: 23px;">
    <p>
      We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
      <br />
      <br /> Our hotel will reopen at 11th of January 2011.
      <br />
      <br /> Another line which demonstrates the auto height adjustment of the dialog component.
    </p>
  </div>
</div>
</form>

如何将数据从jQueryUI对话框传回html表单？

1 个答案: