Caixas de Diálogo - Dialog / jQuery User Interface Assíncrono
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;
Discussão (9)
Carregando comentários...