Dialog Jquery UI - Chamando via método

[Scientist 2]

Boa tarde, quero mudar todas as minhas mensagens do sistema que antes usavam: window.confirm, alert. para Dialog do Jquery UI.

Porém para poupar trabalho e tornar algo mais bonito e reutilizável, gostaria de criar um método que chamasse o dialog do jquery passando o titulo da janela e o texto.

 

Vamos ao exemplo que estou tentando fazer.

 

No Javascript eu crio o método

 

 
function ShowConfirmDialog(id,titulo,texto){  
  $('#'+id).before('<div id=dialog-confirm title='+titulo+'>'+texto+'</div>'); 
  $("#dialog-confirm").dialog("open");
}

 

Pelo que li na documentação, para chamar a caixa de dialogo, deve ter um conteudo (div, span) definido na pagina, por isso usei o "before" do jquery.

 

Logo abaixo tenho a definição do dialog-confirm em jquery (no mesmo arquivo javascript, a diferença é que esse fica dentro do document.ready.

 

 
$(document).ready(function(){      
  
    //confirm dialog
    $("#dialog-confirm").dialog({
        autoOpen: false,
        resizable: false,
        height:140,
        modal:true,
        buttons:{
            "Sim": function(){
                history.back();  
                $(this).dialog("close");
            },
            "Não": function(){
                $(this).dialog("close");
            }
        }
    });
 
});//fim do document.ready

 

E na página do cliente eu to fazendo isso aqui:

 

   <?php
    if (isset($_POST['salvar']))
        echo "<script type=text/javascript>ShowMessageConfirm('meu_objeto','Salvar','Deseja Mesmo Salvar?');</script>";
?>

 

Porém, nada disso funciona :(

[Tiago Sabadini 3]

Você pode fazer algo desse tipo:

var dialogo = function(titulo, conteudo, altura, largura){

   $('body').append('<div class="dialog"></div>');
   $('.dialog').dialog({

      modal: true,
      height: altura,
      width: largura,
      title: titulo,

      close: function(){
         $('.dialog').remove(); //Sempre removemos o elemento, pois ele é criado na chamada da função.
      
      },      
      open: function(){
          $('.dialog').append(conteudo);
      }
      /* Restante de código, botões, etc... */

   });

}

dialogo('Minha Janela', 'posso chamar uma função com ajax que retorna um conteúdo', 300, 300);

[Scientist 2]

tiagosaba, assim que chegar em casa vou testar e retorno aqui no forum. desde já agradeço pela ajuda

 

Bom, vamos lá. Funcionou em partes.

 

Se eu fizer da forma abaixo ele funciona perfeitamente. Eu clico no botão e a mensagem aparece.

 <input type='button' onclick='dialogo(parametros)' name='btn_message' value='Click to Show Message' />

Porém se eu fizer desta forma abaixo ele não funciona (aparece no firefox debug como função não reconhecida)

 if (isset($_POST['salvar']))  echo "<script type='text/javascript'>dialogo(parametros);</script>";

 

Opa, já identifiquei o erro e entrei em outro problema.

 

 

 

Vamos lá, o erro estava no seguinte:

 

Quando o usuário clica em Salvar em um Formulário, a página sofre um refresh e na sua atualização é verificado o seguinte:

 if (isset($_POST['salvar']))  echo "<script type='text/javascript'>dialogo(parametros);</script>";

Ou seja, se o cara clicar em salvar ele mostra a mensagem. Porém por questão de perfomance todos os meus arquivos .js que ficam no index.php estão no fim da página, ou seja, ele não tem como chamar o dialogo(parametros) se a página ainda não foi toda carregada.

 

Provavel solução: colocar todos os arquivos .js do index.php para o topo da pagina, porém isso iria fazer o site perder perfomance. Como resolver?