Inserir na base de dados com Ajax e loading

[joaocasta]

Boas tardes.... tenho aqui este codigo:

<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var ID=$("#ID").val();
var Name=$("#Name").val();
var Email=$("#Email").val();

//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {ID: ID, Name: Name, Email: Email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>

e queria adicionar este código, para mostrar a imagem de loading enquanto insere na bd:

<script>
$(document).ready(function() {
$.ajaxSetup({
    cache: false
});
$("#placeholder").load("loading.gif");
 var refreshId = setInterval(function() {
    $("#placeholder").load("loading.gif");
}, 500);
});
</script>

Edited August 17, 2012 at 11:36 AM by joaocasta

[taviroquai]

Viva,

Já que usas jQuery, o melhor método é usar .ajaxStart() e .ajaxStop().

Lê http://api.jquery.com/ajaxStart/

[joaocasta]

Boas taviroquai, já li esse método e pareceu-me bom para o que quero.

Encontrei isto:

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});

mas como poderei adiciona-lo neste codigo:

<script type="text/javascript">
$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var ID=$("#ID").val();
var Name=$("#Name").val();
var Email=$("#Email").val();

//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {ID: ID, Name: Name, Email: Email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>

Não sei bem onde o colocar. mas acho que seja assim:

//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {ID: ID, Name: Name, Email: Email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});

será assim? poderão dar-me alguma dica/sugestao de como tentar fazer?

Edited August 17, 2012 at 12:45 PM by joaocasta

[pikax]

Primeiro falta-te fechar uma chaveta.

Diz-me o que percebes do codigo e o que nao percebes?

[joaocasta]

//use the $.post() method to call insert.php file.. this is the ajax request
$.post('insert.php', {ID: ID, Name: Name, Email: Email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});
});

entao vamos lá separar isto:

$.post('insert.php', {ID: ID, Name: Name, Email: Email},

Aqui é chamada a página insert.php pelo "$.post" que irá inserir na base de dados com os dados que estão dentro de chaveta, acho eu.

function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file

Aqui fiquei sem perceber nada.... tentei interpretar mas nada.

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});
});

E aqui é chamada a imagem loading.gif enquanto está a inserir na base de dados. mas acho que coloquei no sitio errado.

[pikax]

entao vamos lá separar isto:

$.post('insert.php', {ID: ID, Name: Name, Email: Email},

Aqui é chamada a página insert.php pelo "$.post" que irá inserir na base de dados com os dados que estão dentro de chaveta, acho eu.

Isto e' igual a teres uma form:

<form method="POST">
 <input name="ID">
 <input name="Name">
 <input name="Email">
</form>

function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file

Aqui fiquei sem perceber nada.... tentei interpretar mas nada.

Ja' estudaste o jquery???

Basicamente isso vai buscar o elemento com o id="message" e vai por o "valor" data que foi retornado 'a chamada de cima. depois vai esconder essa informacao e vai fazer um fadeIn de 1.5s.

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});
});

E aqui é chamada a imagem loading.gif enquanto está a inserir na base de dados. mas acho que coloquei no sitio errado.

????

[joaocasta]

onde tenho de colocar ??

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});
});

[pikax]

onde tenho de colocar ??

$("div#loading").ajaxStart(function(){
$(this).html('<img src="loading.gif"');
});
});

Para mim esse codigo nao tem nexo estar junto ao codigo de cima(pelo o menos para mim), tens que aprender a trabalhar com o jquery, falo por mim, mas eu nao vou estar a ensinar-te a programar com jquey aqui no forum, para mais quando tens N de tuts por ai, estuda e percebe o que faz cada funcao, cria umas funcoes e brinca um pouco, quando tiveres duvidas ajudo-te. Mas agora teres duvidas por nao teres estudado quando deverias de ter estudado isso e' que e' um bocado chato para mim.

[joaocasta]

bem fiz outra pagina e uma nova tabela pra testar:

<html>
<head>
<title>zwaroop's home</title>
<!-- include jquery library file-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js%22></script>
<!-- The ajax/jquery stuff -->
<script type="text/javascript">

$(document).ready(function(){
//Get the input data using the post method when Push into mysql is clicked .. we pull it using the id fields of ID, Name and Email respectively...
$("#insert").click(function(){
//Get values of the input fields and store it into the variables.
var Name=$("#Name").val();
var Email=$("#Email").val();

//use the $.post() method to call insert.php file.. this is the ajax request
$.post('data.php', {eame: name, email: email},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
$("#message").html('Submitting your Request.<img src="ajax.gif" />');
});
return false;
});
});
</script>
</head>
<body>
<form action="" method="post">
<label>Name: </label> <input id="name" type="text" />
<label>E-Mail: </label> <input id="email" type="text" />
<input type="submit" id="insert" value="Register"/>
</form>
<!-- For displaying a message -->

<div id="message"></div>
</body>
</html>

Mas quando carrego no botão registar, nao insere na base de dados nem aparece o loading.gif.

Edited August 17, 2012 at 03:59 PM by joaocasta

[pikax]

nao deveria de ser assim:

//$.post('data.php', {eame: name, email: email},
$.post('data.php', {name: Name, email: Email}, //...

[joaocasta]

como posso fazer a confirmaçao pra nao enviar dados em branco e para nao enviar varias vezes para a base de dados se carregar varias vezes.

e agora aparece sempre a imagem em loading....

Edited August 17, 2012 at 04:04 PM by joaocasta

[pikax]

como posso fazer a confirmaçao pra nao enviar dados em branco e para nao enviar varias vezes para a base de dados se carregar varias vezes.

e agora aparece sempre a imagem em loading....

Conforme, podes fazer em PHP(e' sempre recomendado!!) e no Javascript, verificas if(Email.Lenght==0 || Email == "" ) return; ... e por ai adiante.

[joaocasta]

e o porque de estar sempre em loading?

[pikax]

e o porque de estar sempre em loading?

como assim?

[joaocasta]

depois de eu fazer submit a imagem de loading esta sempre lá....

[pikax]

$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
$("#message").html('Submitting your Request.<img src="ajax.gif" />');

Explica-me este codigo, se conseguires perceber o codigo, descobres logo o problema

Edited August 17, 2012 at 04:14 PM by pikax

[joaocasta]

hide() esconde e o fadeIn determina o tempo que fica a mostrar. mas por acaso acho que a imagem está ali mal. e nao insere na base de dados ou quer dizer insere mas em branco e em preencho os inputs. nao percebo.

[pikax]

hide() esconde e o fadeIn determina o tempo que fica a mostrar. mas por acaso acho que a imagem está ali mal. e nao insere na base de dados ou quer dizer insere mas em branco e em preencho os inputs. nao percebo.

O mais importante nao falaste, olha a ordem disto:

$("#message").html(data);
//.....
$("#message").html('Submitting your Request.<img src="ajax.gif" />');

Nao parece que algo esta errado?

[joaocasta]

$("#message").html(data);
//.....
$("#message").html('Submitting your Request.<img src="ajax.gif" />');

a imagem tem q ser antes do hide acho...

[pikax]

a imagem tem que ser pelo o menos antes do $("#message").html(data);