Модальные диалоги из интерфейса с вкладками (улучшенный пример) - PullRequest
Новая
       23

Модальные диалоги из интерфейса с вкладками (улучшенный пример)

1 голос
/ 10 октября 2009

(я ужесточил свой оригинальный пример) Я пытаюсь вызвать модальные диалоги из интерфейса с вкладками, и я не понимаю, какое поведение я вижу. В первый раз, когда я отображаю пользовательский интерфейс, мой диалог ведет себя как положено, я могу вытащить данные из полей, все замечательно.

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>

Это позволяет диалогу (по-видимому) работать с повторяющимся выбором вкладок, но когда я пытаюсь изменить содержимое текстового поля и проверить его, я получаю старое значение (значение из первого вызова) !! Это как если бы я создал новую копию диалогового окна и его полей, но исходное текстовое поле находится там невидимым в исходном диалоговом окне, возвращая его старые результаты.

Очевидно, что есть парадигма для обработки этих диалогов, дивов и вкладок, которую я еще не понял. Кто-нибудь хочет указать мои ошибки?

Ответы [ 2 ]

1 голос
/ 10 октября 2009

В вашем примере вы используете один и тот же удаленный контент дважды и, что более важно, используете один и тот же идентификатор на обеих вкладках. После загрузки содержимого второй страницы в DOM у вас будет два элемента с одинаковым идентификатором. Поскольку предполагается, что идентификатор уникален на странице, «старые» значения могут быть просто значениями первого div, который javascript обнаруживает в DOM.

У вас также есть две кнопки с идентификатором "button1"; один внутри модального div и один снаружи. Это также может вызвать проблемы.

0 голосов
/ 23 октября 2009

Используя FireBug, я вижу, что создаю новый «диалоговый» DIV-элемент каждый раз, когда вызываю InitializeUI (). Поэтому удаление старых DIVs дает мне желаемый результат: 


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");
                        }
                     }
                   });
}
...