chamar modal caso cadastro seja com sucesso

wneo · Dezembro 15, 2014

Bom dia!

Preciso transformar os confirms e alerts do js em modais... Por exemplo, após feito o cadastro, se for feito com sucesso, mostrar a modal..ou perguntar ok ou cancel, mas com modais...

Vou colocar abaixo o codigo da modal e do insert que utilizo:

php

<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
echo 
"<script>   
alert('Enviado com sucesso!');
window.location.href='gsoft.php';
</script>";
}
?>

modal

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $(".openBox").click(function(){
        var windowName = $(this).attr("name"),
            height = ($(window).height() - $('.dialog').outerHeight())/2;
        $(".fullScreen").fadeIn("fast");
        $("#"+windowName).css("margin-top",height+"px").fadeIn("fast");
    });
    
    $(".button").click(function(){
        $(".fullScreen, .dialog").fadeOut("fast");
    });
});    
</script>

<style>
body {
    background-color: #98C000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    margin: 20px;
}

a {
    color: #466000;
}

a:hover {
    color: #fff;
    cursor: pointer;
}

.fullScreen {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.dialog {
    position: relative;
    background: rgba(0,0,0,1.0);
    color: #eee;
    width: 500px;
    height: 200px;
    border-radius: 10px;
    margin: 0 auto;
    padding: 15px;
    z-index: 999;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    display: none;
    font-size: 14px;
}

.button {
    position: absolute;
    display: block;
    bottom: 15px;
    background: #cc0000;
	color: #fff;
	width: 100px;
    border-radius: 4px;    
    margin-left: 185px;
    padding: 5px;
    text-align: center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
	font-size: 13px;
}

.button:hover {
    background-color: #ee0000;
    cursor: pointer;
}
</style>

<a class="openBox" name="box1">Abrir Janela 1</a>  
<a class="openBox" name="box2">Abrir Janela 2</a>

<div class="fullScreen">
	<div class="dialog" id="box1">

Seu cadastro foi realizado com sucesso!

		
</div>

Nesse php estou utilizando o js alert nativo... gostaria de transformar esse trecho pela modal:

if($resultado == 1){
echo"<script>
alert('Enviado com sucesso!');
window.location.href='gsoft.php';
</script>";
}
?>

como seria isso?

Toddy Wafer · Dezembro 15, 2014

Dê uma olhada ai... talvez precise do plugin do boostrap.js mais você pode
costumizar um sem outras coisas como carousel etc..

http://getbootstrap.com/javascript/#modals

ele tem esse código que chama modal pelo javascript, eu fiz em um
site que quando o dominio é valido ele chama modal de contato.

$('#myModal').modal('show')

wneo · Dezembro 16, 2014

Então, gostaria de fazer sem frameworks..quero entender o mecanismo natural...

O método .show() me parece ser o necessário nesse caso..gostaria de uma ideia de como utilizá-lo, caso seja essa a solução

Toddy Wafer · Dezembro 16, 2014

Então basicamente você vai ter que criar uma função em jquery, que faz toda a animação de fazer aparecer a modal e sumir a modal... ainda estou estudando jquery então não posso te ajudar :upset:

wneo · Dezembro 16, 2014

vou tentar algo assim:

<style>
/*css da modal*/
</style>

<div class="modal">
Cadastro com sucesso!
</div>



if($resultado == 1){
echo"<script>

$( ".modal" ).show();

window.location.href='pagina_inicial.php';

</script>";
}
?>

Quem puder apoiar ajuda aí

Rafael R Silva · Dezembro 18, 2014

Da uma olhada nisso!

http://jsfiddle.net/rrsilva88/y1d3f1t4/

wneo · Dezembro 18, 2014

Da uma olhada nisso!

http://jsfiddle.net/rrsilva88/y1d3f1t4/

Rafael, a modal tá perfeita..só preciso saber agora como que o php chama essa modal no lugar do alert padrão, conforme exemplo da condição:

<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
echo 
"<script>   
alert('Enviado com sucesso!');
window.location.href='gsoft.php';
</script>";
}
?>

Rafael R Silva · Dezembro 18, 2014

Opa @wneo,

Seguinte,

Se você quiser chamar o modal assim que a pagina for exibida coloque dentro do document ready

$(document).ready(function(){

 $(".overlay").show();
 $(".popup").show();

});

Só que ai você terá um problema pois o alert pausa a execução de outros js até ter o retorno true ou false para seguir com o redirect

Como o modal é um elemento sem esse tipo de bloqueio, ou seja se você chamar o redirect junto com o modal ele vai passar direto.

Você tem duas opções:

1 - faz o redirect assim que o botão OK for clicado; ( Como está agora )
2 - faz um timeout, dentro do document ready

 
$(document).ready(function(){

$(".overlay").show();
$(".popup").show();

setTimeout(makeRedirect = function() {
                    return window.location.href = data.url;
                  }, 3000); // Vai executar o redirect após 3 segundos
});

Depois me fala se deu certo =)

Caso isso resolva seu problema fecha o topico por favor!

Valeu!

wneo · Dezembro 18, 2014

Opa @wneo,

Seguinte,

Se você quiser chamar o modal assim que a pagina for exibida coloque dentro do document ready
$(document).ready(function(){

 $(".overlay").show();
 $(".popup").show();

});
Só que ai você terá um problema pois o alert pausa a execução de outros js até ter o retorno true ou false para seguir com o redirect

Como o modal é um elemento sem esse tipo de bloqueio, ou seja se você chamar o redirect junto com o modal ele vai passar direto.

Você tem duas opções:

1 - faz o redirect assim que o botão OK for clicado; ( Como está agora )

2 - faz um timeout, dentro do document ready
 
$(document).ready(function(){

$(".overlay").show();
$(".popup").show();

setTimeout(makeRedirect = function() {
                    return window.location.href = data.url;
                  }, 3000); // Vai executar o redirect após 3 segundos
});
Depois me fala se deu certo =)

Caso isso resolva seu problema fecha o topico por favor!

Valeu!

Utilizando seu exemplo, tentei aplicar assim:

<html>
<head>
<style>
.popup{
	display:none;
  top:100px;
  position:fixed;
  left:50%;
  z-index:9999 !important;
  
}
.popup .wrapper{
  position:relative; 
  left:-50%;
  background-color:#fff;
  padding:10px;
  width:250px;
  height:250px;
 
 
}

.popup h1 {
	font-size: 25px;
text-align: center;
margin: 10px;
}

.popup p {
	font-size: 21px;
	line-height: 2;
	margin: 20px;
}
.overlay{
	display:none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: 0.7;
	z-index: 9999 !important;
}
	
</style>
</head>

<body>
</body>
</html>

<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
echo 
"<script>   
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
                    return window.location.href = data.url;
                  }, 3000); // Vai executar o redirect após 3 segundos
});
window.location.href='gsoft.php';
</script>";
}
?>

Mas não deu certo...

Preencho o formulário e ao enviar os dados, a tela fica branca apenas.. mas não chamou a modal...

obs: Gostei da ideia com tempo para fechar a modal vou guardar essa informção.. mas tbm gostaria de usar com o botão de ok e cancel como se fosse uma confirm personalizada...

Toddy Wafer · Dezembro 18, 2014

Tenta fazer assim

  
 
if($resultado == 1){
     $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;
}, 3000); // Vai executar o redirect após 3 segundos
});
window.location.href='gsoft.php';
</script>"
}


//ai na parte do head do seu html.... você faz assim

<head>
<title>....</title>
<?php if(isset($msg)){echo $msg;} ?>
</head>

wneo · Dezembro 18, 2014

Tenta fazer assim

  
 
if($resultado == 1){
     $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;
}, 3000); // Vai executar o redirect após 3 segundos
});
window.location.href='gsoft.php';
</script>"
}


//ai na parte do head do seu html.... você faz assim

<head>
<title>....</title>
<?php if(isset($msg)){echo $msg;} ?>
</head>

tentei montar dessa forma, mas dá erro de sintaxe:

<html>
<head>
<title>olá</title>
<?php if(isset($msg)){echo $msg;} ?>
<style>
.popup{
	display:none;
  top:100px;
  position:fixed;
  left:50%;
  z-index:9999 !important;
}

.popup .wrapper{
  position:relative; 
  left:-50%;
  background-color:#fff;
  padding:10px;
  width:250px;
  height:250px;
 
 
}

.popup h1 {
	font-size: 25px;
text-align: center;
margin: 10px;
}

.popup p {
	font-size: 21px;
	line-height: 2;
	margin: 20px;
}
.overlay{
	display:none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: 0.7;
	z-index: 9999 !important;
}
	
</style>
</head>

<body>
</body>
</html>


<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
 $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;}, 3000);
});
</script>"
}
?>

Rafael R Silva · Dezembro 18, 2014

@wneo,

Você esta incluindo o jquery?

Sem jquery não vai funcionar rsrsrs

Qual mensagem de erro?

wneo · Dezembro 18, 2014

@wneo,

Você esta incluindo o jquery?

Sem jquery não vai funcionar rsrsrs

Qual mensagem de erro?

dá erro de sintaxe no php

Dellacurtais · Dezembro 18, 2014

O erro de sintaxe é pq depois de:

</script>"

Falta ";"

<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
 $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;}, 3000);
});
</script>";
}
?>

E Segundo, não teria que verificar se a ação foi solicitada antes de vc inserir algo? pq pelo visto ai da pra inserir dados em branco, tirando q não está nada seguro, incluir $_POST vindo de usuário sem ao menos tratar os dados enviados! Enfim!

wneo · Janeiro 22, 2015

O erro de sintaxe é pq depois de:

</script>"

Falta ";"
<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
 $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;}, 3000);
});
</script>";
}
?>
E Segundo, não teria que verificar se a ação foi solicitada antes de você inserir algo? pq pelo visto ai da pra inserir dados em branco, tirando q não está nada seguro, incluir $_POST vindo de usuário sem ao menos tratar os dados enviados! Enfim!

Oláaaa,

continua dando erro de sintaxee!!!! :pinch:

Parse error: syntax error, unexpected $end, expecting T_VARIABLE or T_DOLLAR_OPEN_CURLY_BRACES or T_CURLY_OPEN Central_gsoft/inclui_test.php on line 81

- Lembrando q o q estou tentando fazer aqui, eh substituir as janelas alert e confirm padrão do javascript por belas modais, onde abaixo estou apresentando um exemplo de mecanismo de modal para q eu possa personalizá-la. Quero que a modal abra para mostrar por exemplo uma mensagem de enviado com sucesso...

estou fazendo assim:

<html>
<head>
<title>olá</title>


<?php if(isset($msg)){echo $msg;} ?>
<style>
.popup{
	display:none;
  top:100px;
  position:fixed;
  left:50%;
  z-index:9999 !important;
}

.popup .wrapper{
  position:relative; 
  left:-50%;
  background-color:#fff;
  padding:10px;
  width:250px;
  height:250px;
 
 
}

.popup h1 {
	font-size: 25px;
text-align: center;
margin: 10px;
}

.popup p {
	font-size: 21px;
	line-height: 2;
	margin: 20px;
}
.overlay{
	display:none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	opacity: 0.7;
	z-index: 9999 !important;
}
	
</style>
</head>

<body>
</body>
</html>


<?php

include ('conecta.php');

$assunto= $_POST['assunto'];
$descreva= $_POST['descreva'];

$insere = "INSERT INTO chamados(assunto, descreva) VALUES ('$assunto','$descreva')";

$resultado = mysql_query($insere);

if($resultado == 1){
 $msg = "<script>
$(document).ready(function(){

$('.overlay').show();
$('.popup').show();

setTimeout(makeRedirect = function() {
return window.location.href = data.url;}, 3000);
});
</script>";"
}
?>

Beraldo · Janeiro 24, 2015

Olha uma aspa duplas sobrando aqui:

</script>";"

Sempre que aparecer o erro "unexpected $end" é por que há algum caractere duplo (aspas, parênteses, chaves etc) não fechado :thumbsup:

wneo · Janeiro 24, 2015

Olha uma aspa duplas sobrando aqui:

</script>";"

Sempre que aparecer o erro "unexpected $end" é por que há algum caractere duplo (aspas, parênteses, chaves etc) não fechado :thumbsup:

Oi Beraldo! tá certo, o erro de sintaxe era esse msmo... mas ainda continuo sem uma modal quando o php conclui o processo..=(... consegue me dar uma luz nisso??

Arquivado

chamar modal caso cadastro seja com sucesso

Recommended Posts

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Toddy Wafer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Toddy Wafer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael R Silva 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael R Silva 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Toddy Wafer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rafael R Silva 27

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dellacurtais 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante