Question

（我收紧了原来的例子）我正试图从选项卡式UI中调用模态对话框，我对我看到的行为感到困惑。第一次显示UI时，我的对话框按预期运行，我可以将数据从字段中拉出来，一切都很棒。

tabtest2.html：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tabtest 2</title>

<link rel="stylesheet" type="text/css" href="js/css/smoothness/jquery-ui-1.7.2.custom.css" media="screen"/>  

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function()
{
  var tabs = $('#tabs').tabs({
    load: function(event, ui)
    {
      initializeUI();
    }
  });
});

function initializeUI()
{
  jQuery("#button1").click(function()
  {
     $(initializeUI.win).dialog("open");
  });

  $(initializeUI.win) = jQuery("#window1");

  //instantiate the dialog
  $(initializeUI.win).dialog({ height: 350,
                     width: 400,
                     modal: true,
                     position: 'center',
                     autoOpen:false,
                     title:'Create Agent',
                     overlay: { opacity: 0.5, background: 'black'},
                     buttons:
                     {
                        "Check Text 1": function()
                        {
                          var t1 = $("#text1");
                          alert("text 1 = " + t1.val());
                        },
                        "Close": function()
                        {
                            $(initializeUI.win).dialog("close");
                        }
                    }
               });
}
</script>

</head>   

<body>

<div id="tabs">
  <ul>
    <li><a href="tab1.html">Tab1</a></li>
    <li><a href="http://google.com">Google</a></li>
  </ul>
</div>

</body>
</html>

和tab1.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tab 1</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

</head>   

<body>

<button id="button1" class="ui-button ui-state-default ui-corner-all">Button 1</button>

<div id="window1" style="display:none">
  <form>
    <fieldset>
      <label for="text1">Text 1</label>
      <input type="text" name="text1" id="text1" class="text ui-widget-content ui-corner-all" />
    </fieldset>
  </form>
</div>

</body>
</html>

这允许对话框（显然）在重复的选项卡选择上工作，但是当我尝试更改文本字段的内容并检查它时，我得到旧值（第一次调用的值）!!就好像我已经创建了对话框的新副本及其字段，但原始文本字段在原始对话框窗口中看不见，返回旧的结果。

显然，有一个处理这些对话框，div和标签的范例，我还没有掌握。有人想指出我的错误吗？

Answer 1

在您的示例中，您使用相同的远程内容两次，更重要的是，在两个选项卡中使用相同的ID。将第二页的内容加载到DOM后，您将拥有两个具有相同ID的div。由于ID应该在页面上是唯一的，因此“旧”值可能很简单，就是javascript恰好在DOM中找到的第一个div的值。

您似乎还有两个ID为“button1”的按钮;一个在模态div内，一个在外面。这也可能导致问题。

Answer 2

使用FireBug，我看到每次调用InitializeUI（）时都会创建一个新的“对话框”DIV元素。所以删除旧的DIV似乎给了我想要的结果：


function initializeUI()
{
  jQuery("#button1").click(function()
  {
    initializeUI.win.dialog("open");
  });

  initializeUI.win = jQuery("#window1");

  // remove old 'dialog' DIV elements
  $('div[role="dialog"]').each(function() {
    $(this).remove();
  });

  //instantiate the dialog
  $(initializeUI.win).dialog({ height: 350,
                     width: 400,
                     modal: true,
                     position: 'center',
                     autoOpen:false,
                     title:'Create Agent',
                     overlay: { opacity: 0.5, background: 'black'},
                     buttons:
                     {
                        "Check Text 1": function()
                        {
                          var t1 = $("#text1");
                          alert("text 1 = " + t1.val());
                        },
                        "Close": function()
                        {
                          initializeUI.win.dialog("close");
                        }
                     }
                   });
}

选项卡式UI中的模态对话框（改进示例）

2 个答案: