Update por get no banco de dados sem atualizar página!

Wesley F Souza · Abril 16, 2012

Olá pessoa, fiz um get dar UPDATE no banco de dados, e queria que ao clicar ele desse o update na página sem atualizar, ou se não dar o update atualizar mas voltar no mesmo lugar! um exemplo: se a barra estiver lá no fim, se eu atualizar o banco de dados pelo método GET ao atualizar a barra vai voltar lá pra cima, e queria que ao atualizar o banco de dados ou não atualize a página ou a página volte no mesmo lugar que estava :)

         <?
	 if(isset($_GET['sim'])){
	  $sim = $_GET['sim'];
	  $updatesim = "UPDATE tabela SET status=1 WHERE id='$sim'";
	    $sql = mysql_query($updatesim) or die (mysql_error());
	 }
	?>

 <a href="aprovar.php?sim='.$ops['id'].'">Sim</a>

Alguém dá uma ajuda?

Jhon Paulo · Abril 27, 2012

primeiro coloca um id na sua ancora para que possamos identifica-la nos scripts jquery

<style>

#carregando {

display: none;

}

#erronoenvio {

display: none;

}

.exibir {

display: block;

}

<span id='carregando'>Enviando...</span> //exibe mensagem enviando enquanto está fazendo o update

<span id='erronoenvio'>Desculpe houve um erro no envio</span> //exibe mensagem de erro, caso não consiga fazer a requisição jquery

script jQuery:

$().ready(function(){

$('#atualizartabela').click(function() {

$.ajax ({

url: event.target.href,

sucess: function() { alert('enviado'); },

beforeSend: function () { $('#carregando').addClass('exibir'); },

complete: function () { $('#carregando').removeClass('exibir'); },

error: function() { $('#erronoenvio').addClass('exibir'); }

)};

eu não testei aqui em casa pq to meio ocupado, mas acho q o código vai funcionar t+

Wesley F Souza · Abril 28, 2012

primeiro coloca um id na sua ancora para que possamos identifica-la nos scripts jquery

<a href="aprovar.php?sim='.$ops['id'].' id='atualizartabela'">Sim</a>

<style>

#carregando {

display: none;

}

#erronoenvio {

display: none;

}

.exibir {

display: block;

}

<span id='carregando'>Enviando...</span> //exibe mensagem enviando enquanto está fazendo o update

<span id='erronoenvio'>Desculpe houve um erro no envio</span> //exibe mensagem de erro, caso não consiga fazer a requisição jquery

script jQuery:

$().ready(function(){

$('#atualizartabela').click(function() {

$.ajax ({

url: event.target.href,

sucess: function() { alert('enviado'); },

beforeSend: function () { $('#carregando').addClass('exibir'); },

complete: function () { $('#carregando').removeClass('exibir'); },

error: function() { $('#erronoenvio').addClass('exibir'); }

)};

)};

)};

eu não testei aqui em casa pq to meio ocupado, mas acho q o código vai funcionar t+

não deu :s D: da atualizando da mesma forma dando upload na página e voltando lá em cima.

Jhon Paulo · Abril 30, 2012

você adicionou a biblioteca jquery na sua página?

$().ready(function(){

$('#atualizartabela').click(function() {

return false; //faltou essa linha pra impedir de carregar...

$.ajax ({

url: event.target.href,

sucess: function() { alert('enviado'); },

beforeSend: function () { $('#carregando').addClass('exibir'); },

complete: function () { $('#carregando').removeClass('exibir'); },

error: function() { $('#erronoenvio').addClass('exibir'); }

)};

Wesley F Souza · Abril 30, 2012

você adicionou a biblioteca jquery na sua página?

$().ready(function(){

$('#atualizartabela').click(function() {

return false; //faltou essa linha pra impedir de carregar...

$.ajax ({

url: event.target.href,

sucess: function() { alert('enviado'); },

beforeSend: function () { $('#carregando').addClass('exibir'); },

complete: function () { $('#carregando').removeClass('exibir'); },

error: function() { $('#erronoenvio').addClass('exibir'); }

)};

Ainda continua D: omg, nao sei mais oq fazer

Jhon Paulo · Abril 30, 2012

ou escrever o código completo intão ... pera aí só alguns minutinhoss...

Jhon Paulo · Abril 30, 2012

oq tiver em negrito você remove ou muda..

pagina 1

<html>

<head>

<style>

#carregando {

display: none;

}

#erronoenvio {

display: none;

}

</style>

</head>

<body>

<span id='carregando'>Enviando...</span>

<span id='erronoenvio'>Desculpe houve um erro no envio</span>

</body>

</html>

página aprovar.php:

<?PHP

sleep(3); //espera 3 segundos(pra você ver o texto "Enviando...")

if(isset($_GET['sim'])){

$sim = $_GET['sim'];

echo ($sim); // oq tiver no echo vai aparecer na div #retornoresultado

}

?>

página upd.js

$().ready(function(){

$('#updtabela').click(function(){

var l = $(this).attr('href'); //variavel 'L' pega o valor q está no href do link

$.ajax({

url: l, //página q vai ser carregada

type: "POST", //coloquei essa linha aki pq no firefox tava carregando a página inteira

data: { sim: l}, //este "sim" está acessível pelo $_POST["sim"] mude conforme conveniente (tive q colocar por causa do firefox...)

dataType: "html",

success: function(sucesso){ //se tudo der certo faça...

$('#retornodoresultado').html(sucesso); //#retornodoresultado vai receber oq for retornado pela página aprovar.php

},

beforeSend: function () { enquanto estiver carregando faça...

$('#carregando').css({display: "block"});

},

complete: function () { quando completar o carregamento da página faça...

$('#carregando').css({display: "none"});

},

error: function(){ se der erro no carregamento faça...

$('#retornodoresultado').html('Desculpe pelo transtorno, houve um erro, tente novamente.');

}

});

return false;

});

boa sorte :) aki funcionou perfeito no Chrome, Firefox, Internet Explorer, Opera e Safari

em vez de deixar aparecer o texto "Enviando..." coloque no lugar uma imagem... você pode fazer um loader no site http://ajaxload.info/

Wesley F Souza · Maio 1, 2012

Cara eu acho q eu devo estar fazendo alguma coisa errada, porque não está atualizando, olha só :S

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#updtabela').click(function(){
var l = $(this).attr('href'); //variavel 'L' pega o valor q está no href do link
$.ajax({
url: l, //página q vai ser carregada
type: "POST", //coloquei essa linha aki pq no firefox tava carregando a página inteira
data: { sim: l}, //este "sim" está acessível pelo $_POST["sim"] mude conforme conveniente (tive q colocar por causa do firefox...)
dataType: "html",
success: function(sucesso){ //se tudo der certo faça...
$('#retornodoresultado').html(sucesso); //#retornodoresultado vai receber oq for retornado pela página aprovar.php
},
beforeSend: function () { //enquanto estiver carregando faça...
$('#carregando').css({display: "block"});
},
complete: function () { //quando completar o carregamento da página faça...
$('#carregando').css({display: "none"});
},
error: function(){ //se der erro no carregamento faça...
$('#retornodoresultado').html('Desculpe pelo transtorno, houve um erro, tente novamente.');
}
});
return false;
});
});


<?php
  if(isset($_GET['sim'])){
  sleep(4);
  $sim = $_GET['sim'];
     $sqlstar = mysql_query("UPDATE table SET coluna = if (0 = 1, 0 ,1) AND coluna = if (1 = 0, 1 ,0 ) WHERE id={$sim}"); 
  }
?>


//aqui em cima fiz o select e o while

echo '<td><a href="pagina.php?sim='.$link['id'].'" id="updtabela" name="updtabela">Sim</a></td>';

Sou muito leigo em javascript e ajax :S

Jhon Paulo · Maio 1, 2012

olá aí vai o link do meu funcionando, você só precisa mudar o aprovar.php e o endereço do link.

dps é só adicionar na sua página...

http://www.2shared.com/file/3V-OZ_T8/www.html

Wesley F Souza · Maio 1, 2012

olá aí vai o link do meu funcionando, você só precisa mudar o aprovar.php e o endereço do link.

dps é só adicionar na sua página...

http://www.2shared.com/file/3V-OZ_T8/www.html

Jhon, deu certo em partes :S

Tipo pq aqui eu tenho uma lista de postagem, e nela fiz um while, na primeira postagem ela atualiza sem dar reload na pagina, mas as outras postagens ela vai até a pagina :S e pra mudar de sim, para não tem de atualizar a página.

Jhon Paulo · Maio 1, 2012

hmm.. entendi...

no lugar de id, põe uma classe. Caso tenha vários ids iguais na página pode não reconhecer, pelo motivo de id ser único.

faz assim ó: <a href='aprovar.php?sim=opsid' class='updtabela'>Sim</a>

e na hora de chamar no script põe "." no lugar de "#";

$('.updtabela').click(function(){

e no sucess põe:

$(this).text("não"); //muda o texto para não...

$(this).attr("href", "aprova.php?nao=opsid"); //muda o link...

agora se não for isso passa o script aí pra eu tentar fazer uma solução ("eu "aprendi" jquery faz umas 2 semanas só").

Wesley F Souza · Maio 1, 2012

hmm.. entendi...

no lugar de id, põe uma classe. Caso tenha vários ids iguais na página pode não reconhecer, pelo motivo de id ser único.

faz assim ó: <a href='aprovar.php?sim=opsid' class='updtabela'>Sim</a>

e na hora de chamar no script põe "." no lugar de "#";

$('.updtabela').click(function(){

e no sucess põe:

$(this).text("não"); //muda o texto para não...

$(this).attr("href", "aprova.php?nao=opsid"); //muda o link...

agora se não for isso passa o script aí pra eu tentar fazer uma solução ("eu "aprendi" jquery faz umas 2 semanas só").

Acho que agora você vai entender :), é que foi erro meu também não explicar.

if($whileis['status'] == '0'){
	    $sin = '<img class="sys" src="../../img/sini.png" alt="Ativar Post" title="Ativar Post" />';

	 }else if($whileis['status'] == '1'){
	  $sin = '<img class="sys" src="../../img/sina.png" alt="Desativar Post" title="Desativar Post" />';

	 }

echo '<td><a href="testes.php?sim='.$whileis['id'].'" class="updtabela">'.$sin.'</a></td>';

Se você conseguir me ajudar, vou ser muito grato a ti :), pois só falta isso pro site ficar completo, porque é o seguinte, é complicado eu estar lá na 100º postagem e por um acaso eu quiser desativa-la, eu vou ter de dar o update na tabela e atualizar a página e com isso eu volto la na 1º postagem,e depois voltar na 100º dnovo pois exclui a 100º antiga, pensa o trabalhão :S

Jhon Paulo · Maio 1, 2012

ahh :) rsrs.. vou passar um jeito aki q pode te ajudar, só q não sei se é o melhor jeito não :D...

na hora q você carrega a página principal já vai ter uma imagem(com a classe sys) e com alt='Ativar Post' ou alt='Desativar Post', certo? então é só fazer a mudança das imagens com o jquery mesmo.

põe essse script no 'upd.js'

$(".sys").click(function() {

if ($(this).attr('alt')=='Ativar Post') { //se o alt da imagem estiver escrito Ativar Post faça

$(this).attr('alt','Desativar Post'); //mude o alt para Desativar Post

$(this).attr('src','../../img/sina.png'; //mude o src da imagem para ../../img/sina.png

}

else { //se o alt da imagem for diferente de Ativar Post(ou seja, ele vai ta escrito Desativar Post) faça

$(this).attr('alt','Ativar Post'); //mude o alt para Ativar Post

$(this).attr('src','../../img/sini.png'; //mude o src da imagem para ../../img/sini.png

}

};

esse script acima pode dar algum problema pq toda vez q a pessoa clicar na imagem irá muda-la, mas pode ser q de algum problema no update da tabela....

pode ser feito de outra maneira:

adicionando no seu código anterior temos:

if($whileis['status'] == '0'){

$sin = '<img class="sys" src="../../img/sini.png" alt="Ativar Post" title="Ativar Post" />';

}else if($whileis['status'] == '1'){

$sin = '<img class="sys" src="../../img/sina.png" alt="Desativar Post" title="Desativar Post" />';

}

echo $sin; //mostra a imagem q será exibida

e no sucess do seu script pra fazer o ajax, coloque:

$(this).text(sucesso); //muda o texto do link para oq tiver escrito no 'echo'

Wesley F Souza · Maio 1, 2012

Ainda continua :S, pra mudar a imagem precisa atualizar a página. Mas pra mudar o db não O.o, tipo ele atualiza o db normal mas pra mudar a imagem tem de dar um reload na página.

Jhon Paulo · Maio 1, 2012

posta o script q você ta usando pra fazer o ajax

Wesley F Souza · Maio 1, 2012

posta o script q você ta usando pra fazer o ajax

$().ready(function(){
$('.updtabela').click(function(){
var l = $(this).attr('href'); //variavel 'L' pega o valor q está no href do link
$.ajax({
url: l, //página q vai ser carregada
type: "POST", //coloquei essa linha aki pq no firefox tava carregando a página inteira
data: { sim: l}, //este "sim" está acessível pelo $_POST["sim"] mude conforme conveniente (tive q colocar por causa do firefox...)
dataType: "html",
success: function(sucesso){ //se tudo der certo faça...
$(this).text(sucesso);
$('#retornodoresultado').html(sucesso); //#retornodoresultado vai receber oq for retornado pela página aprovar.php
},
beforeSend: function () { //enquanto estiver carregando faça...
$('#carregando').css({display: "block"});
},
complete: function () { //quando completar o carregamento da página faça...
$('#carregando').css({display: "none"});
},
error: function(){ //se der erro no carregamento faça...
$('#retornodoresultado').html('Desculpe pelo transtorno, houve um erro, tente novamente.');
}
});
$(".sys").click(function() {
if ($(this).attr('alt')=='Ativar Post') { //se o alt da imagem estiver escrito Ativar Post faça
$(this).attr('alt','Desativar Post'); //mude o alt para Desativar Post
$(this).attr('src','../../img/sina.png'); //mude o src da imagem para ../../img/sina.png
}
else { //se o alt da imagem for diferente de Ativar Post(ou seja, ele vai ta escrito Desativar Post) faça
$(this).attr('alt','Ativar Post'); //mude o alt para Ativar Post
$(this).attr('src','../../img/sini.png'); //mude o src da imagem para ../../img/sini.png
}
});
return false;
});
});

Jhon Paulo · Maio 1, 2012

tenso :S era pra ta funcionando..

success: function(sucesso){ //se tudo der certo faça...

$(this).text(sucesso);

$('#retornodoresultado').html(sucesso); //retire essa linha

},

retire isso

$(".sys").click(function() {

if ($(this).attr('alt')=='Ativar Post') { //se o alt da imagem estiver escrito Ativar Post faça

$(this).attr('alt','Desativar Post'); //mude o alt para Desativar Post

$(this).attr('src','../../img/sina.png'); //mude o src da imagem para ../../img/sina.png

}

else { //se o alt da imagem for diferente de Ativar Post(ou seja, ele vai ta escrito Desativar Post) faça

$(this).attr('alt','Ativar Post'); //mude o alt para Ativar Post

$(this).attr('src','../../img/sini.png'); //mude o src da imagem para ../../img/sini.png

}

});

Wesley F Souza · Maio 1, 2012

tenso :S era pra ta funcionando..

success: function(sucesso){ //se tudo der certo faça...

$(this).text(sucesso);

$('#retornodoresultado').html(sucesso); //retire essa linha

},

retire isso

$(".sys").click(function() {

if ($(this).attr('alt')=='Ativar Post') { //se o alt da imagem estiver escrito Ativar Post faça

$(this).attr('alt','Desativar Post'); //mude o alt para Desativar Post

$(this).attr('src','../../img/sina.png'); //mude o src da imagem para ../../img/sina.png

}

else { //se o alt da imagem for diferente de Ativar Post(ou seja, ele vai ta escrito Desativar Post) faça

$(this).attr('alt','Ativar Post'); //mude o alt para Ativar Post

$(this).attr('src','../../img/sini.png'); //mude o src da imagem para ../../img/sini.png

}

});

To achando que não vai ter solução pra essa minha dúvida D:, tem coisas na programação que são muito f*** :S, continua atualizando no db, mas pra mudar a imagem tem de dar refresh na página OMG :o

Não existe nenhuma função, que ao atualizar a tabela de um refresh na página mas ela volta no msmo lugar que estava? tipo se o scroll tivesse no meio da página, ao clicar na imagem pra passar o get ela atualizasse mas voltava no msmo lugar que estava? ou alguma função que ao atualizar a tabela tbm atualize a imagem:S?

Jhon Paulo · Maio 1, 2012

é ta certo esse código meu num ta funcionando mesmo não rsrsrs... acabei de testar kkakkakakakak

vou ver outro jeito aki, jaja eu posto...

Wesley F Souza · Maio 1, 2012

é ta certo esse código meu num ta funcionando mesmo não rsrsrs... acabei de testar kkakkakakakak

vou ver outro jeito aki, jaja eu posto...

Jhon muito obrigado, você foi o único que teve a iniciativa de me ajudar, mesmo assim se não conseguir uma solução agradeço muito :S.

E o pior que eu nao tenho nenhuma noção de javascript.

Arquivado

Update por get no banco de dados sem atualizar página!

Recommended Posts

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jhon Paulo 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wesley F Souza 1