Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Resposta de formulário em janela modal jQuery

09-10-2012 21:49

Antes de mais nada vou indicar um script de janela modal bem legal, chamado SuperBox.

Ele é bem prático, dá para usar com iframe, fotos, etc...

A dica que vou dar aqui é para usar o SuperBox para abrir uma janela modal com a resposta do envio do formulário. Ou seja, o formulário vai ser enviado ao clicar em um botão. O conteúdo da página resposta é carregado dentro de uma div. O conteúdo dessa div é mostrado dentro da janela modal.

Para usar esse script é bem simples. Basta baixar o SuperBox nesse link abaixo
http://pierrebertet.net/projects/jquery ... index.html

Coloca os arquivos baixados em uma pasta, e adiciona sua versão do jQuery a essa pasta.

Crie um documento de teste, e coloque o seguinte dentro do head

<link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.superbox-min.js"></script>   <script> $(document).ready(function() {         $.superbox();   // envia é o id do botão que envia o formulário // submit.php é a página que recebe a informação do formulário // nome é o id do campo que tem o valor enviado // conteudo é a div onde o conteúdo de submit.php é carregado // link é o href que chama o SuperBox  $('#envia').click(function() {  $.post("submit.php", { nome:$('#nome').val() }, function(valor){ $('#conteudo').html(valor)   $('#link').click(); })   })   $.superbox.settings = {         boxId: "superbox", // Id attribute of the "superbox" element         boxClasses: "", // Class of the "superbox" element         overlayOpacity: .8, // Background opaqueness         boxWidth: "600", // Default width of the box         boxHeight: "400", // Default height of the box         loadTxt: "Loading...", // Loading text         closeTxt: "Close", // "Close" button text         prevTxt: "Previous", // "Previous" button text         nextTxt: "Next" // "Next" button text };   }); </script>

Dentro do body vai o seguinte:

<form action="#" method="post"> nome <input type="text" id="nome" name="nome" value=""> <input type="button" id="envia" value="envia"> </form>   <div id="conteudo" style=""></div>   <a href="#conteudo" id="link" rel="superbox[content]" style=""></a>

Obs.: Coloque display:none; dentro dos styles div e no href.

O submit.php nesse teste terá o seguinte:

<?php echo $_POST['nome']; ?>

Teste e adapte como precisar.
1
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Resposta de formulário em janela modal jQuery

24-12-2013 01:18

Bom dia! Cara, não está funcionando.

Aqui está o arquivo teste.php:
<html> <head> <title>Teste Janela Modal Com Resposta de Formulário</title>   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">       <link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" />     <script type="text/javascript" src="jquery.superbox.js"></script>     <script type="text/javascript" src="jquery.superbox-min.js"></script>       <script>     $(document).ready(function() {     $.superbox();       // envia é o id do botão que envia o formulário     // submit.php é a página que recebe a informação do formulário     // nome é o id do campo que tem o valor enviado     // conteudo é a div onde o conteúdo de submit.php é carregado     // link é o href que chama o SuperBox     $('#envia').click(function() {     $.post("submit.php",     {     nome:$('#nome').val()     },     function(valor){     $('#conteudo').html(valor)     $('#link').click();     })       })       $.superbox.settings = {     boxId: "superbox", // Id attribute of the "superbox" element     boxClasses: "", // Class of the "superbox" element     overlayOpacity: .8, // Background opaqueness     boxWidth: "600", // Default width of the box     boxHeight: "400", // Default height of the box     loadTxt: "Loading...", // Loading text     closeTxt: "Close", // "Close" button text     prevTxt: "Previous", // "Previous" button text     nextTxt: "Next" // "Next" button text     };       });     </script>   </head>   <body>     <form action="#" method="post">     nome <input type="text" id="nome" name="nome" value="">     <input type="button" id="envia" value="envia">     </form>       <div id="conteudo" style=""></div>       <a href="#conteudo" id="link" rel="superbox[content]" style=""></a>   </body> </html>  

E este é o arquivo submit.php:
  <?php     echo $_POST['nome'];     ?>

Baixei os arquivos, conforme indicado, do site http://pierrebertet.net/projects/jquery ... index.html.

Não está funcionando. Posso ter feito algo errado. Podem me ajudar a encontrar o erro?

Se este post for visualizado após o dia de hoje, desejo a todos Feliz Natal.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Resposta de formulário em janela modal jQuery

24-12-2013 01:20

Ops! Feliz Natal se visualizado hoje, também.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Resposta de formulário em janela modal jQuery

24-12-2013 09:32

Sua versão do jQuery deve ser antiga, e não está aceitando o $.

Teste com essa versão

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Resposta de formulário em janela modal jQuery

24-12-2013 13:51

Não funfa. Será que o código não está desatualizado em relação ao jQuery? O nome do arquivo js que veio no pacote jQuery era outro.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Resposta de formulário em janela modal jQuery

24-12-2013 13:54

Falha nossa! Funcionou, sim. Com o jQuery que me passou. Vou continuar a adaptação. Obrigado.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado