2014-01-27 6 views
0

Я относительно новичок в JQuery, и мой опыт работы с JavaScript не был чем-то большим, чем UI-клей для HTML-форм, чем углубленное программирование (т. Е. Ограниченные DOM-клиентские события для клиента боковая проверка и сделать пользовательский интерфейс более отзывчивым и полезным.)Присоединить события к дочерним элементам управления в диалоговом окне JQueryUI

Мне поручено расширить существующее приложение, чтобы добавить модуль улучшения качества. Это приложение широко использует JQueryUI. Мне нужно отобразить диалоговое окно, содержащее таблицу с четырьмя элементами управления, и мне нужно, чтобы JavaScript реагировал на события элемента управления в JavaScript.

Например, мне нужно, чтобы содержимое одного окна SELECT изменялось в зависимости от выбранного значения значения другого поля SELECT.

Я разработал JQuery и JavaScript в html-документе, и он работал нормально, но когда я поместил элементы управления в диалоговое окно JQueryUI (передав DIV, содержащий элементы управления), связь между событиями и элементами управления сломанный странным образом.

События срабатывают правильно, но когда функция ссылается на элементы управления, возвращаемые значения являются значениями исходной HTML-страницы, а не элементами управления в диалоговом окне.

Кажется, что JQueryUI создает новую HTML-страницу и витает над исходной HTML-страницей.

Я искал два дня для решения этой проблемы, но не нашел ответа.

Вот HTML:

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery-ui.js"></script> 
    <script type="text/javascript" src="editTest.js"></script> 
    </head> 
    <body> 
    <input type="button" id="showQISection" 
     value="Enter Quality Improvement Data" 
     onclick="showQISection_click(this);" /> 
    <div id="QIDetail" style="display: none" title="Quality Improvement"> 
     <table id="atable" style="border-collapse:collapse;border:1px solid black;"> 
     <tr> 
      <th style="border-bottom:1px solid black;">Topic</th> 
      <th style="border-bottom:1px solid black;">Specfiction</th> 
      <th style="border-bottom:1px solid black;">Notes</th> 
      <th style="border-bottom:1px solid black;">Command</th> 
     </tr> 
     <tbody> 
      <tr> 
      <td style="border-top:1px solid black;"> 
       <select id="QITopic" name="QITopic" onchange="QIoptionCheck(this)"> 
       <option value="none">Choose</option> 
       <option value="one">Option One</option> 
       <option value="two">Option Two</option> 
       <option value="three">Option Three</option> 
       <option value="four">Option Four</option> 
       </select> 
      </td> 
      <td style="border-top:1px solid black;"><select id="QIDetails"></select></td> 
      <td style="border-top:1px solid black;"><textarea id="notes" rows="3" cols="25"></textarea> 
      <td style="border-top:1px solid black;"><button type="button" onclick="addRow()">Add</button></td> 
      </tr> 
     </tbody> 
     </table> 
     <button type="button" onclick="Finish()">Save</button> 
    </div> 
    </body> 
</html> 

Вот JavaScript и JQuery код:

$(document).ready(
    function() { 
     $('#QIDetails').hide(); 

    } 
); 
var rows=[]; 
function aRow(id,topic,spec,notes) 
{ 
    this.id=id; 
    this.topic=topic; 
    this.spec=spec; 
    this.notes=notes; 
} 
function removeRow(d){ 
    $('#atable tr#'+ d).remove(); 
    for (var idx =0;idx < rows.length;idx++){ 
     if (rows[idx].id==d){ 
      rows.splice(idx,1); 
      break; 
     } 
    } 
} 
function addRow(){ 
    var c= new Date(); 
    var d = c.getTime(); 
    var topic=$('#QITopic option:selected').text(); 
    var Spec=$('#QIDetails option:selected').text(); 
    var notes=$('#notes').val(); 
    rows.push(new aRow(d,topic,Spec,notes)); 
    $('#atable').append('<tr id ="' + d + '"><td>'+ topic + 
          '</td><td>' + Spec + 
          '</td><td>' + notes + 
          '</td><td><button type="button" onclick="removeRow('+ d + ')">remove</button></td></tr>'); 
    $('#QITopic option:selected').removeAttr("selected"); 
    $('#QIDetails option:selected').removeAttr("selected"); 
    $('#notes').val(''); 
    $('#QIDetails option').remove(); 
    $('#QIDetails').hide(); 
} 
function QIoptionCheck(){ 
    $('#QIDetails option').remove(); 
    alert('qitopic-'+ $('#QITopic').val()); 
    switch($('#QITopic').val()){ 
     case "one": 
      $('#QIDetails').show(); 
      $('#QIDetails').append('<option value="oneone">Detail One-One</option>'); 
      $('#QIDetails').append('<option value="onetwo">Detail One-Two</option>'); 
      $('#QIDetails').append('<option value="onethree">Detail One-Three</option>'); 
      break; 
     case "two": 
      $('#QIDetails').show(); 
      $('#QIDetails').append('<option value="twoone">Detail Two-One</option>'); 
      $('#QIDetails').append('<option value="twotwo">Detail Two-Two</option>'); 
      $('#QIDetails').append('<option value="twothree">Detail Two-Three</option>'); 
      break; 
     case "three": 
      $('#QIDetails').hide(); 
      break; 
     case "four": 
      $('#QIDetails').hide(); 
      break; 

    } 
} 
function Finish(){ 
    $('#results').empty(); 
    for (var idx =0;idx < rows.length;idx++){ 
     $('#results').append('Topic-' + rows[idx].topic + ' ' + 
          'Spec- ' + rows[idx].spec + ' ' + 
          'Notes- ' + rows[idx].notes + '<br/>'); 
    } 

} 
function showQISection_click(obj){ 
    var dlg = $('#QIDetail').clone(); 
    dlg.dialog({ 
     autoOpen: true, 
     width: 650, 
     modal: true, 
     closeOnEscape: false, 
     buttons: { 
      Close : function() { 
       $(this).dialog('close').remove(); 
      } 
     } 
    }); 
} 
+0

Где в коде, который вы поделили, вы получаете неправильное значение? –

+0

в инструкции switch, независимо от того, какое значение я выбираю, $ ('# QITopic'). Val() всегда возвращает 'none'. Перед использованием JQueryUI Dialog это вернуло правильное значение. Я предполагаю, что функция JavaScript смотрит на элементы управления в DIV на странице, вместо этого создается новый HTML-документ JQueryUI, созданный для диалогового окна. –

+0

Почему вы вызываете '$ ('# QIDetail'). Clone();'? Это приведет к дублированию идентификатора в вашей DOM. Он также будет блокировать события из содержащихся элементов. –

ответ

1

Не используйте $.clone() на ID. То, как вы звоните .clone также не копирует вложенные события. Вы можете удалить диалоговое окно, используя метод destroy.

var dlg = $('#QIDetail'); 
dlg.dialog({ 
    autoOpen: true, 
    width: 650, 
    modal: true, 
    closeOnEscape: false, 
    buttons: { 
     Close : function() { 
       $(this).dialog('close'); 
       $(this).dialog('destroy'); 
       } 
    } 
}); 

Это вернет DOM в состояние «pre-init».

Смежные вопросы