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


101

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?

Respostas:


136

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.


5
Isso funcionou para mim. Devo inicializar a caixa de diálogo toda vez que quiser abri-la assim ou apenas na primeira vez? existem muitos diálogos. Não há como definir as opções iniciais e depois abrir os diálogos por meio de botões?
core-chain.io

6
Descobri que esta solução também resolveu o erro "Não é possível chamar métodos na caixa de diálogo antes da inicialização; tentativa de chamar o método 'abrir'" que ocorre quando uma caixa de diálogo é aberta e fechada com êxito e, em seguida, os usuários tentam abri-la uma segunda vez . Obrigado @ZOD
spadelives

Dei um +1, porque também resolveu meu problema, mas você poderia explicar por que funciona?
Igor L.

2
@IgorLacik Presumo que .dialog () retorna uma instância de si mesmo para que você possa executar o encadeamento. Portanto .dialog (opt) .dialog ('open') instancia um objeto de diálogo (a primeira chamada) e, em seguida, executa 'open' nele. Suponho então que chamar $ (obj) .dialog (opt) e $ (obj) .dialog ('open') posteriormente irá instanciar objetos de diálogo separados no objeto jquery, para que o segundo não consiga ver o primeiro opções de configuração. Sem me aprofundar no código da caixa de diálogo, é difícil dizer com certeza e não tenho tempo para isso: D
nealio82

Eu atualizei a pergunta para explicar o que você tentou explicar.
JotaBe de

22

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.


10

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).


4
Resolvi esse problema também atualizando minha versão do jquery ui para 1.9.2 e funcionou. Portanto, jquery 1.9.1 com jquery ui 1.9.2 elimina o erro acima.
johntrepreneur

4

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.


2

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.


2

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
}

0

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();

0

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


0

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.


0

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

-1

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


1
E o que isso significa exatamente?
AaA

1
Isso é mal explicado, mas válido. No MVC, eu tinha a tag div que contém a caixa de diálogo na minha visualização parcial. Quando movi a tag div que o continha para a página pai, a caixa de diálogo funcionou corretamente.
Paulj
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.