Jump to content
Cristyan Alves

dialog do jquery-ui

Recommended Posts

Galera seguinte,

 

Não tenho muita experiência com Javascript então peço ajuda com o seguinte problema

 

 

utilizo o seguinte código que executa o dialog do jquery-ui-1.11.4

<script>

$( "#dialog" ).dialog({
	autoOpen: false,
	width:  400,
	buttons: [
		{
			text: "Sim",
			click: function() {

                                // caso o usuario clique em sim, aqui havera um codigo que necessita de uma
                                // informacao que sera passada pelo  button que usuario clicou para executar
                                // a acao correta

				$( this ).dialog( "close" );
			}
		},
		{
			text: "Não",
			click: function() {
			
				$( this ).dialog( "close" );
			}
		}
	]
});

// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
	$( "#dialog" ).dialog( "open" );
	event.preventDefault();
});



$( "#datepicker" ).datepicker({
	inline: true
});



</script>

para que esse script seja executado, o usuário tem que clicar nesse link:

<a href="#" id="dialog-link">teste</a>

a minha dúvida é a seguinte, quais alterações tenho que fazer no código para que ao invés de usar o atributo <a href...> possa usar o atributo <button onclick...>? A minha necessidade de fazer essa alteração é porque preciso passar um parametro para cada button, e não consegui nenhuma maneira de passar esse paramentro através do <a href="#" id="dialog-link"> além disso, só posso usar a id dialog-link uma vez na página.

 

 

Share this post


Link to post
Share on other sites

Não foque na solução, foque no problema.

 

O que é cada botão? O que você precisa passar em cada um?

Cara seguinte

tenho uma pagina em php que lista todos os cadastros do banco de dados. O botão seria para deletar o registro, porém antes de deletar haverá uma confimação. Algo tipo assim:

 

 

0VKuKDi.png

 

tenho uma while no php que imprime os usuarios cadastrados. cada button receberia um nome de usuario (já que o usuario e a chave primaria)

pensei em algo mais ou menos assim:

 

<button onclick="confirma(teste)">deletar</button>

<button onclick="confirma(admin)">deletar</button>

cada vez que o while imprimisse uma linha, ele trocaria o parametro.

Share this post


Link to post
Share on other sites

Ou você usa o confirm(), ou o jQueru UI Dialog.

 

Se for usar o dialog, a documentação que você precisa seguir é a do Modal confirmation.

 

O texto que será exibido você define na renderização da página.

 

estou usando o JQuery UI Dialog. Já editei tudo conforme minha necessidade (como na imagem que mandei), o problema que estou enfrentando é que não sei como passar a informação de qual usuário quero excluir quando o usuário clicar em sim.

 

Mais tarde vou ler a documentação que me informou... assim que eu terminar posto aqui se consegui solucionar o problema.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ghlevin
      Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php
       
      head.php original:
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links):
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte:
      Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
    • By Alysson Abech
      Gostaria de saber como posso listar os eventos setados no datepicker, que quando ao passar o mouse em cima dos mesmos , eles mudassem o hover ou algo assim diretamente no calendário.
       
      Código atual:
      codepen.io/abech/pen/VrWOLR
       
      Imagem de exemplo do código atual
       

    • By Diogo Marques
      Boas malta.

      Estou com um pequeno problema ao criar uma dialog.

      O que se passa é o seguinte: tenho uma tabela em que num <td> tenho um <input> do tipo checkbox e quando se faz o check iria abrir o dialog com 3 botões: "Yes", "No", "Cancel", contudo estou com algumas dificuldades ao colocar o dialog em condições, visto que os botões não ficam com nome e não me aparece no centro do ecrã mas sim no canto superior esquerdo.

      o meu codigo está assim:

      PhP:
      <input type="checkbox" class="atividadesCheck" style="visibility:<?php echo $visibility_h2;?>" value="<?php echo $value ?>"/> <div id="txtAge" style="display: none;">Age is something</div> jQuery:

      $(document).ready(function () { $('.atividadesCheck').click(function () { if ($(this).is(':checked')) { $("#txtAge").dialog({ autoResize: true, modal: true, position: ['center', 'top'], draggable: false, buttons: { "Yes" : function() { } } }); } else { $("#txtAge").dialog('close'); } }); }); O resultado é isto:


      Alguma dica de como possa resolver?

      Fico a aguardar.

      Cumprimentos,
      Diogo
       
    • By Rodrigo Biaggio
      Senhores,
       
      Eu tenho uma página, chamada novo_servidor.php com um formulário e um botão incluir e excluir. Quando clico no botão incluir, eu abro uma outra página, chamada, mostra_servidores, dentro de uma DIV dentro da página novo_servidor.
       
      Eu peguei um código Jquery para abrir um DIALOG quando eu clicar em excluir.
       
      O problema é que se eu clico no botão excluir logo quando a página é carregada, a função funciona, porém se eu clico no botão incluir e depois no excluir, a função não funciona mais.
       
      Segue os códigos:
      <script type="text/javascript"> $(function() { $( "#excluir_servidores" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 10 }, hide: { effect: "blind", duration: 10 } }); $( "#btn_excluir_servidor" ).click(function() { $( "#excluir_servidores" ).dialog( "open" ); }); }); //Inicio function Ajax sem refresh na DIV function inserir_registo() { //dados a enviar, vai buscar os valores dos campos que queremos enviar para a BD var dadosajax = { 'id_solic' : $("#id_solic").val(), 'host_servidor' : $("#host_servidor").val(), 'ip_servidor' : $("#ip_servidor").val(), 'so_servidor' : $("#so_servidor").val(), 'qtde_processor' : $("#qtde_processor").val(), 'mem_fisica' : $("#mem_fisica").val(), 'func_servidor' : $("#func_servidor").val(), 'resp_servidor' : $("#resp_servidor").val(), 'resp_application' : $("#resp_application").val() }; pageurl = 'insert_novo_servidor.php?'; $.ajax({ //url da pagina url: pageurl, //parametros a passar data: dadosajax, //tipo: POST ou GET type: 'POST', //cache cache: false, //se ocorrer um erro na chamada ajax, retorna este alerta //possiveis erros: pagina nao existe, erro de codigo na pagina, falha de comunicacao/internet, etc etc etc error: function(){ alert('Erro: Inserir Registo!!'); }, //retorna o resultado da pagina para onde enviamos os dados success: function(result) { //se foi inserido com sucesso if($.trim(result) == '1') { alert("O seu registo foi inserido com sucesso!"); } //se foi um erro else { alert("Ocorreu um erro ao inserir o seu registo!"); } } }); } ------------------------------------ <!--Inicio DIV Content--> <div id="accordion"> <h1>Incluir Servidores</h1> <!--Inicio DIV Conteudo Accordion--> <div> <div id="form_dados_iniciais"> <!--Inicio DIV Dados Iniciais--> <div id="dados_inicias"> <h4>ID Solicitacao<br/> <input name="id_solic" id="id_solic" type="text" value="<?php echo $last_id;?>" size="5"><br><br> Identificação dos Servidores<br> <input name="host_servidor" id="host_servidor" type="text" value="Hostname" size="12" onClick="javascript:if(this.value=='Hostname')this.value='';" onBlur="javascript:if(this.value=='')this.value='Hostname';"> <input name="ip_servidor" id="ip_servidor" type="text" value="IP Server" size="10" onClick="javascript:if(this.value=='IP Server')this.value='';" onBlur="javascript:if(this.value=='')this.value='IP Server';"> <label for="so_servidor"></label> <select name="so_servidor" id="so_servidor"> <option>S.O Server</option> <option value="Windows">Windows Server</option> <option value="Unix">Unix Server</option> </select> <input name="qtde_processor" type="text" id="qtde_processor" value="Qtde Processor" size="10" onClick="javascript:if(this.value=='Qtde Processor')this.value='';" onBlur="javascript:if(this.value=='')this.value='Qtde Processor';"> <input name="mem_fisica" type="text" id="mem_fisica" value="Memória" size="6" onClick="javascript:if(this.value=='Memória')this.value='';" onBlur="javascript:if(this.value=='')this.value='Memória';"> <input name="func_servidor" type="text" id="func_servidor" value="Função" size="15" onClick="javascript:if(this.value=='Função')this.value='';" onBlur="javascript:if(this.value=='')this.value='Função';"> <input name="resp_servidor" type="text" id="resp_servidor" value="Responsável Server" size="15" onClick="javascript:if(this.value=='Responsável Server')this.value='';" onBlur="javascript:if(this.value=='')this.value='Responsável Server';"> <input name="resp_application" type="text" id="resp_application" value="Responsável Aplicação" size="18" onClick="javascript:if(this.value=='Responsável Aplicação')this.value='';" onBlur="javascript:if(this.value=='')this.value='Responsável Aplicação';"> <input type="submit" name="incluir_servidor" title="Incluir" value="Incluir" onClick="inserir_registo()"> <input type="submit" name="alterar_servidor" title="Alterar Servidor" value="Alterar"> <input type="submit" name="btn_excluir_servidor" id="btn_excluir_servidor" title="Excluir Servidor" value="Excluir"> <input type="submit" name="proximo" title="Próxima Página" value="Próximo"> </div> <!--Fim DIV Form Dados Iniciais--> </div> <!--Fim DIV Conteudo Accordion--> </div> <!--Fim DIV Accordion--> </div> <!--Fim DIV Content--> <div id="image_header"><img src="images/header_div_servidores.jpg" width="1365px"></div> <div id="texto_header"> Servidores Cadastrados </div> <div id="mostra_servidores_cadastrados"> </div> <div id="excluir_servidores"> Teste de exclusão de servidores </div> Alguém poderia ajudar?
       
      Obrigado.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.