Диалоговое окно jQuery UI - как только я добавляю второй диалог в приложение, он ломается? - PullRequest
Новая
       15

Диалоговое окно jQuery UI - как только я добавляю второй диалог в приложение, он ломается?

1 голос
/ 01 ноября 2010

Я добавил JQuery UI Dialog в свое веб-приложение Rails 3 следующим образом: 

 permissions = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$(".teammember-dialog").live("click",function(){
    permissions.dialog('open');
    return false;
});

Что меня удивляет, так это то, что я просто добавил еще одно диалоговое окно в свое приложение следующим образом: 

 dialogstuff2 = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({url: '/stuff/'})
    },
    close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});

$("#addlink").live("click",function(){
    dialogstuff2.dialog('open');
    return false;
});

Со вторым диалогом он разрывает оба диалога. Они оба открываются, но не отвечают на JS, который загружается, когда диалог вызывает веб-сервер. Если я удаляю 2-й, первый работает нормально. Но когда оба находятся на странице, когда я нажимаю, чтобы загрузить либо, диалоговое окно останавливается с загрузочным текстом по умолчанию "loading ..."

Кто-нибудь видел это раньше? спасибо

Ответы [ 2 ]

4 голосов
/ 01 ноября 2010

Одна вещь, которую я заметил в вашем коде, это то, что оба диалога имеют внешний div с идентификатором dialog-content.Возможно, вы захотите изменить их и посмотреть, что произойдет, поскольку браузер / jQuery может не понравиться.

0 голосов
/ 01 ноября 2010

Вот где старый добрый классический метод разработки программного обеспечения пригодится с JavaScript.Создайте метод построителя диалогов, который использует внутренний уникальный идентификатор для создания необходимых наборов диалогов. 

function dialogBuilder(url){
  var uuid = 0;
  var name = 'dialog_' + uuid++;
  var $elem = $('<div id="' + name + '"></div>')
  .html('<div class="notification"><h4>Loading...</h4></div>')
  .dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
      $.ajax({url: '/stuff/'})
    },
    close: function() {
      $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
  });
  return $elem;
}
var permissions = dialogBuilder('/stuff/');
var dialogstuff = dialogBuilder('/stuff/');

Вы поймете, что следующим очевидным шагом будет установить внешние имена, чтобы вы могли сделать что-то вродеэто: 

var dialogHandler = {};
function dialogBuilder(dname, url, anchor){
  var uuid = 0;
  var name = 'dialog_' + dname;
  if(dialogHandler[name]){
    var $elem = dialogHandler[name].dialog({open:function(){$.ajax(url)}});
    dialogHandler[name] = $elem;
  }else{
    var $elem = $('<div id="' + name + '"></div>')
    .html('<div class="notification"><h4>Loading...</h4></div>')
    .dialog({
      autoOpen: false,
      dialogClass: 'dialog',
      width: 460,
      minHeight: 80,
      position: ['center',130],
      open: function() {
        $.ajax({url: '/stuff/'})
      },
      close: function() {
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
      }       
    });
    dialogHandler[name] = $elem;
  }
  $(anchor).live('click',function(){
    dialogHandler[name].dialog('open');
    return false;
  })
}

// to call this above code:
dialogBuilder('dialogstuff2','/stuff/','#addlink');
dialogBuilder('permissions','/stuff/','.teammember-dialog');

написано, но не проверено.

...