Prog 183 Denunciar post Postado Setembro 25, 2012 Em resposta ao amigo Marcelo Garbin, na postagem do blog The CODE. http://forum.imasters.com.br/blog/252/entry-184-caixas-de-dialogo-dialog-jquery-user-interface/ Segue um exemplo do recurso usando chamadas assíncronas com jQuery. Neste exemplo, uso o mesmo código e as mesmas libs do post do Marcelo, caso esteja querendo entender um pouco mais sobre o que esta acontecendo no script, faça uma leitura antes da postagem original do Marcelo. index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ... bla bla bla ... .success {color: green; } .unsuccess {color: red; } </style> <script type="text/javascript"> function success(){ $("#msg").dialog({ title: 'Alerta!', width: 600, autoResize:true, dialogClass: 'no-close', modal: true, resizable: false, draggable: false, buttons: { 'Fechar': function(){ $('#msg').dialog('close'); }}, close: function(){ window.location = "./index.php"; } }); } function unsuccess() { $("#msg").dialog({ title: 'Alerta!', width: 500, height: 200, dialogClass: 'no-close', modal: true, resizable: false, draggable: false, buttons: { "Fechar": function() { $('#msg').dialog('close'); }} }); } $(document).ready(function(){ $("input.submit").click(function(){ $.post( "cadastro.php", {nome: $("#nome").val(), sobrenome: $("#sobrenome").val(), action: $("#action").val()}, function(responseText){ $("#msg").html(responseText); }, "html" ); }); }); </script> </head> <body> <h1>Cadastro com Dialog / Jquery-UI</h1> <div id="msg"></div> <form id="form"> <input id="action" name="action" type="hidden" value="cadastrar"> <fieldset> <label for="nome"> Nome <strong style="color:#F00;">*</strong> <input id="nome" name="nome" type="text" maxlength="50"> </label> <label for="sobrenome"> Sobrenome <strong style="color:#F00;">*</strong> <input id="sobrenome" name="sobrenome" type="text" maxlength="50"> </label> </fieldset> <fieldset> <input class="submit" value="Cadastrar" type="button" /> </fieldset> </form> </body> </html> cadastro.php <?php header("Cache-Control: no-cache"); if($_POST["action"] == "cadastrar"){ $err = ''; if(!empty($_POST["nome"])){ $nome = $_POST["nome"]; }else{ $err .= 'Campo NOME em branco ou inválido!<br/>'; } if(!empty($_POST["sobrenome"])){ $sobrenome = $_POST["sobrenome"]; }else{ $err .= 'Campo SOBRENOME em branco ou inválido!<br/>'; } if (empty($err)){ echo "<span class='success'>Cadastro feito com sucesso!</span><br/>Nome: $nome<br/>Sobrenome: $sobrenome<script>success();</script>"; }else{ echo "<span class='unsuccess'>Erros:</span><br>$err<script>unsuccess();</script>"; } } ?> Principais diferenças: index.php - Funções javascript para success() e unsuccess() e estilos correspondentes; - Campo escondido action; - Uma chamada jQuery AJAX por .post (o jQuery implementa outros métodos para requisições assíncronas); cadastro.php - Variável $err para armazenar as mensagens e exibir tudo junto na resposta; Compartilhar este post Link para o post Compartilhar em outros sites
Vinicius Rangel 208 Denunciar post Postado Setembro 25, 2012 \o/ Compartilhar este post Link para o post Compartilhar em outros sites
Marcelo Garbin 30 Denunciar post Postado Setembro 26, 2012 Dei uma olhada por cima assim meio de revesgueio huahauhsu... ontem a tarde e hoje ta corrido aqui, um dia ainda vou ser programador rsrsrs... vou testar esse código a hora que parar com a parte de suporte aqui... Ta show pelo que deu pra notar... Você quer ser editor no The CODE? hehehehe... valeuu pela ajuda ai já dei um Like Positivo pra você... muito bom.. Obrigado Prog. :clap: Compartilhar este post Link para o post Compartilhar em outros sites
Prog 183 Denunciar post Postado Setembro 26, 2012 Código completo, para estudos: http://sourceforge.net/projects/pstudycode/files/DialogJqueryAssincrono/DialogJqueryAssincrono.zip/download Marcelo, Agradeço o convite mas não me vejo com tempo disponível para escrever algo com qualidade na atual fase da minha vida. O pouco tempo que tenho uso no iMasters e com outras coisas pessoais. Compartilhar este post Link para o post Compartilhar em outros sites
Vinicius Rangel 208 Denunciar post Postado Setembro 26, 2012 acho legal se você entrar PROG não precisa ficar na obrigação de ficar postando mas depois de terminar um projeto você viu algo que possa ser útil compartilhe com a galera. no momento esta parado seria até legal. grande abraços Compartilhar este post Link para o post Compartilhar em outros sites
Prog 183 Denunciar post Postado Setembro 26, 2012 Ta bom então. ;) Vou procurar coisas interessantes e se rolar um tempo... escrevo. Compartilhar este post Link para o post Compartilhar em outros sites
Marcelo Garbin 30 Denunciar post Postado Setembro 26, 2012 Depois de fazer uns 200km de ontem a hoje, estamos de volta.... Dae Prog, coloquei você como editor lá no Blog, como o Vinicius Rangel falou não precisa ser algo grandioso ou todo dia postar algo, o importante é a qualidade do conteúdo se for um post por mês ta show já hehehe... mas fica a seu critério, eu comecei com essa iniciativa do Blog e o Vinicius e o Wanderson ficaram parceiros até sem convite formal e por iniciativa própria deles e acho que no nosso meio é importante a troca de informação, já que trabalhamos com ela, e tbm estamos em diferentes regiões o que deixa isso mais interessante para todos. :D Valeuu e Obrigado pela força ^_^ Compartilhar este post Link para o post Compartilhar em outros sites
Marcelo Garbin 30 Denunciar post Postado Setembro 27, 2012 Oww Prog, ontem eu acabei esquecendo de lhe pedir se é possível você comentar sobre esse script que usa o método ".post" do Jquery, como eu fiz no post lá no blog.Valeuu :thumbsup: $(document).ready(function(){ $("input.submit").click(function(){ $.post( "cadastro.php", {nome: $("#nome").val(), sobrenome: $("#sobrenome").val(), action: $("#action").val()}, function(responseText){ $("#msg").html(responseText); }, "html" ); }); }); Compartilhar este post Link para o post Compartilhar em outros sites
Prog 183 Denunciar post Postado Setembro 27, 2012 Como o Marcelo pediu, vou comentar sobre o método .post do jQuery. Em miúdos... O método .post é um "atalho" para o método .ajax, este faz uma chamada assíncrona usando uma requisição HTTP POST. Documentação... http://api.jquery.com/jQuery.post/ O jQuery possui outros "atalhos", além do .post, para o método .ajax, são eles: .get(), .load(), .getJSON(), .getScript() Cada um com suas particularidades, mas vamos dar nossa atenção exclusiva ao que utilizei no código. $(document).ready(function(){ $("input.submit").click(function(){ $.post( "cadastro.php", {nome: $("#nome").val(), sobrenome: $("#sobrenome").val(), action: $("#action").val()}, function(responseText){ $("#msg").html(responseText); }, "html" ); }); }); A função basicamente é acionada no evento de clicar o botão ($("input.submit").click()), mas apenas após todo o documento ser carregado ($(document).ready()), isto é uma precaução, evita problemas. Especificação: jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ) Nosso caso: url = "cadastro.php"; URL para envio da requisição HTTP POST. data = {nome: $("#nome").val(), sobrenome: $("#sobrenome").val(), action: $("#action").val()} Esse é o mais importante, os dados que serão enviados na requisição. Aqui podemos enviar uma string ou um array associativo (map). Optei por enviar um map com o valor de cada um dos campos do formulário. success = function(responseText){ $("#msg").html(responseText); } A função de retorno no caso de sucesso, aqui o objeto ($("#msg")) será preenchido com o conteúdo HTML da requisição. dataType = "html"; Tipo de retorno esperado como resposta na requisição. É isso pessoal, sem mais para o momento. Espero que tenha sido explicativo. Paz e bem! Compartilhar este post Link para o post Compartilhar em outros sites
Marcelo Garbin 30 Denunciar post Postado Setembro 27, 2012 Perfeito! Obrigado mais uma vez :clap: Compartilhar este post Link para o post Compartilhar em outros sites
