Диалог JQuery работает альтернативно - PullRequest
Новая
       18

Диалог JQuery работает альтернативно

0 голосов
/ 27 сентября 2010

У меня есть этот кусок кода, чтобы открыть диалоговое окно JQuery с конкретными элементами управления в соответствии с 2 ссылками.Теперь он отлично работает с 1-й попытки.Но во второй раз, когда я щелкаю ссылку, чтобы загрузить диалоговое окно JQuery, открывается пустое диалоговое окно.После закрытия и повторного нажатия на ссылку открывается диалоговое окно.При повторных испытаниях он выдает ошибку в файле JQuery 1.3.2.js.

Код, указанный ниже: 

 $('#div1').dialog("destroy");            

 if (criteria1== "L") {
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx'        
    Height='100%' Width='100%' frameborder='0'></iframe>");
  }
 else {
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx'    
  Height='100%' Width='100%' frameborder='0'></iframe>");
 }

 $('#div1').dialog(
 {

  height: 220,
  title: "Title",
  width: 500,
  modal: true,
  beforeclose: function (event, ui) {

      $("#div1").html("");
      $("#div1")[0].innerHTML = "";
    }

 });

 $('#div1').parent().appendTo($("form:first"));
 $('#div1').dialog('open');

Использую ли я неправильный файл JQuery?Любые мнения о том, как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 28 сентября 2010

Рабочий пример jsfiddle (отсутствует jquery css / images)

Так что, если я могу предложить отказаться от кода, который вы дали, он выглядит как беспорядок, и вместо этого сделайте: 

$(function(){
    var urls = {
        "hackernews" : "http://news.ycombinator.com", 
        "jsfiddle" : "http://jsfiddle.net"
    };

    var dialog = $("<div style='width:50%;height:50%;'>\
                   <iframe id='dialogFrame'\
                   src='#'  frameborder='0'></iframe></div>");


     dialog.dialog({
      height: 220, 
      title: "Title",
      width: 500,
      modal: true,
      autoOpen: false
    });

    $('#btn1, #btn2').click(
        function(){
            var urlIndex = $(this).attr('rel');
            if(!urlIndex) return;
            $('#dialogFrame', dialog).attr('src', urls[urlIndex]);
            dialog.dialog('open');
         }
    );
    $('#btnClose').click(
        function(){
            dialog.dialog('close');
        }
    );

});

HTML: 

<input type="button" id="btn1" rel="jsfiddle" value="dialog1" />
<input type="button" id="btn2" rel="hackernews" value="dialog2" />
<input type="button" id="btnClose" value="Close">​

Таким образом, вместо переключения между диалогами и изменения внутреннего HTML, мы сохраняем один диалог постоянно доступным, а когда он должен отображаться, мы устанавливаем URL-адрес iframe и показываем диалог.

Все URL-адреса хранятся в ассоциативном массиве, и обработчик события click проверяет атрибут rel нажатой кнопки, чтобы определить, какой URL-адрес должен отображаться.

Имеет смысл?

Вам, очевидно, нужно изменить URL-адреса и атрибуты HTML и dialo-свойств.

0 голосов
/ 27 сентября 2010

РЕДАКТИРОВАТЬ: неправильно понял проблему, 2-я попытка:

Не могу воспроизвести вашу проблему, попытался на http://jsfiddle.net/GYxwG/3/. Однако мне пришлось удалить ваш $('#div1').parent().appendTo($("form:first"));, так как он не будет работать вообще с этим на месте. Это утверждение может не выполнять то, что вы думаете, потому что после того, как вы назовете .dialog() в div, div будет перемещен из своей позиции и обернут во всевозможные добрые диалоги. Так что .parent() относится к одной из внутренних оболочек диалога. Не весь диалог и не родительский элемент в исходном документе.

Поэтому не имеет смысла перемещать ближайшего родителя в div для диалога и вызывает «неопределенное» поведение, возможно, вы видите какой-то крайний случай этого?

...