jquery ui Dialog: não é possível chamar métodos na caixa de diálogo antes da inicialização

Eu tenho um aplicativo no jquery 1.5 com diálogos que funcionaram bem. Embora eu tenha muitos manipuladores .live, mudei para .on. Para isso, tenho que atualizar o jquery (agora 1.8.3 e jquerui 1.9.1).

Agora, eu tenho: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

A seguir está o código:

Javascript

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

Código HTML

<div id="divDialog">
<div id="divInDialog"></div>
</div>

Alguma ideia de por que isso pode estar acontecendo?

Em vez disso, tente

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

Você também pode fazer:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

Isso ocorre porque a caixa de diálogo não é armazenada em $('#divDialog'), mas em uma nova div que é criada instantaneamente e retornada pela .dialog(opt)função.

Se você não pode atualizar o jQuery e está obtendo:

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Você pode contornar isso assim:

$(selector).closest('.ui-dialog-content').dialog('close');

Ou se você controla a visualização e não sabe que nenhuma outra caixa de diálogo deve ser usada em toda a página, você pode fazer:

$('.ui-dialog-content').dialog('close');

Eu só recomendaria fazer isso se o uso closestcausar um problema de desempenho. Provavelmente, existem outras maneiras de contornar isso sem fazer um fechamento global em todas as caixas de diálogo.

Recebi este erro quando apenas atualizei a biblioteca jquery sem atualizar a biblioteca jqueryui em paralelo. Eu estava usando o jquery 1.8.3 com o jqueryui 1.9.0. No entanto, quando atualizei o jquery 1.8.3 para 1.9.1, recebi o erro acima. Quando eu comentei o ofensivo.close linhas do método , gerou um erro sobre não encontrar.browserna biblioteca jquery que foi descontinuada no jquery 1.8.3 e removida do jquery 1.9.1. Basicamente, a biblioteca jquery 1.9.1 não era compatível com a biblioteca jquery ui 1.9.0, apesar da página de download do jquery ui dizer que funciona com jquery 1.6+. Essencialmente, existem bugs não relatados ao tentar usar versões diferentes dos dois. Se você usar a versão jquery que vem junto com o download do jqueryui, tenho certeza que você ficará bem, mas é quando você começa a usar versões diferentes que você sai do caminho comum e obtém erros como este. Então, em resumo, esse erro é de versões incompatíveis (pelo menos no meu caso).

Então você usa isso:

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

e se você abrir uma MVC Partial View in Dialog, você pode criar no índice um botão oculto e o evento de clique JQUERY:

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

em seguida, dentro do html de visualização parcial, você chama o clique de gatilho do botão como:

$("#YouButton").trigger("click")

Até mais.

Se você deseja abrir o Diálogo imediatamente quando o Diálogo é inicializado ou a página está pronta, você também pode definir o parâmetro autoOpencomo trueno objeto de opções do diálogo:

var opt = {
        autoOpen: true,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

Portanto, você não precisa chamar o diálogo `$ (" # divDialog "). (" Abrir ");

Quando o objeto de diálogo é inicializado, o diálogo é aberto automaticamente.

A nova versão do jQuery UI não permitirá que você chame métodos de UI no diálogo que não foi inicializado. Como solução alternativa, você pode usar a verificação abaixo para ver se a caixa de diálogo está ativa.

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}

Esta também é uma solução alternativa:

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();

Eu simplesmente tive que adicionar o ScriptManager à página. Problema resolvido.

No meu caso, o problema era que eu havia chamado $("#divDialog").removeData();como parte da redefinição dos dados do meu formulário na caixa de diálogo.

Isso resultou na destruição de uma estrutura de dados chamada, o uiDialogque significava que o diálogo precisava ser reinicializado.

Substituí .removeData()por exclusões mais específicas e tudo começou a funcionar novamente.

Meu caso é diferente, ele falha por causa do escopo ' deste ':

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});

Recebi esta mensagem de erro porque tinha a tag div na visualização parcial em vez da visualização pai