Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #59 da revista programar. Faz já o download aqui!

tiko165

Comandos sql atraves de Ajax/Jquery

Mensagens Recomendadas

tiko165    3
tiko165

Bom dia amigos,

Eu tenho uma pagina web em PHP, onde é apresentado um de dois botões (conforme a BD).

- A verde se não existir na BD e a vermelho se existir.

Esta leitura ao PHP esta a correr normalmente, bastando fazer um "if" com um "else", mas sempre que executo cada função, a página tem de fazer um refresh.

E como quero melhor, pretendia saber como fazer, um insert ou delete (conforme os casos), e as cores dos botões tambem ser imediatamente alterada.

Eu tenho aqui, a parte basica, de alterar os botões conforme cada clique, mas falta o envio ou a leitura com a BD.

Alquem me pode ajudar como devo fazer?

http://jsfiddle.net/g4qv1afq/ (se houver forma de não ter os dois botões no html, apesar de um "hidden", ainda era melhor)

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Tens que fazer um pedido ajax. Por exemplo, com jQuery:

http://api.jquery.com/jquery.ajax/


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Só agora é que me apercebi to do título do tópico. Tu não chamas SQL via Ajax. Isso seria uma vulnerabilidade tremenda. Basicamente, tu passas a informação do browser para o servidor e deixas que o servidor trate de gerir a lógica que irá realizar a acção pretendida (incluindo gerar a query SQL correspondente a essa acção).

No Javascript chamas o php correspondente a essa lógica e passas os valores que pretendes:

$.ajax({
 method: "POST", // ou o método que pretendes utilizar
 url: "businessLogic.php",
 data: { key : 'value', array : ['stuff1', 'stuff2'] }
 success: function(data){
    // Esta função vai ser executada se/quando receberes uma resposta de sucesso do servidor. 'data' terá os dados que devolveres no php
 },
 error: function(xhr, textStatus, error){
    // Esta função vai ser executada se/quando receberes uma resposta de erro do servidor.
 }
});

Basicamente, o processo é:

1. É feita a chamada ajax.

2. O servidor recebe o pedido e faz o que estiver programado para fazer e, quando terminar (no caso do PHP) responde

3. Quando a resposta chegar ao browser, será invocado o handler de sucesso (ou de erro se for lançado um erro no PHP)

Há muitas coisas que o PHP não te permite perceber sem chegares a um nível avançado. Abstrai muita coisa (ou, deixa-nos na ignorância). Daí que pode ser um bocado frustrante aquilo que vou explicar a seguir.

A ideia é fazeres o PHP funcionar como uma API em que, em vez de devolver HTML para ser apresentado no browser, devolve dados que são tratados pelo Javascript (no browser) e que irá reagir a esses dados fazendo alterações no interface. Alternativamente, o PHP pode construir o HTML para substituir parte da página que seja relevante (que o Javascript irá substituir). Eu prefiro a primeira alternativa, porque separa a lógica da UI da lógica de negócio/backend.

Agora, de forma a não produzires uma plataforma vulnerável, tens que garantir que a informação que vai do browser até ao servidor é válida. Se não for, devolves um código de erro (e, opcionalmente, uma mensagem que indica o erro que ocorreu). Se for válida devolves os dados que o cliente quer (e que tipicamente, no PHP, resulta num 200 OK).


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

http://jsfiddle.net/n0tt_/8e8Lxvdb/

Para a questão dos buttons.

Obrigado. Nesse ponto dos botões, era mesmo algo desse formato que pretendia.

__________

@KTachyon

Em relação ao post não sei se foi o melhor titulo, mas é o que achei mais adequado para quem ainda pouco percebe de javascript.

Eu em PHP, já sei bastantes coisas, mas como é óbvio, todos nós pretendemos saber mais, e como tal, agora a mim, compete-me javascript.

Sendo assim, juntando os dois códigos (Botões + o Ajax para envio de dados à BD), ficaria assim?

$(document).ready(function() {
     $("#HeyButton").click(function () {
          if($("#HeyButton").hasClass("insert")) {
               $("#HeyButton").removeClass("insert");
               $("#HeyButton").addClass("delete");      
               $("#HeyButton").text("Hide button");
               $.ajax({
                    method: "POST", // ou o método que pretendes utilizar
                    url: "my_file_php.php",
                    data: { key : 'value', array : ['stuff1', 'stuff2'] }
                    success: function(data){
                    },
                    error: function(xhr, textStatus, error){
                    }
               }); 
          } else {
               $("#HeyButton").removeClass("delete");
               $("#HeyButton").addClass("insert");  
               $("#HeyButton").text("Show button");
               $.ajax({
                    method: "POST", // ou o método que pretendes utilizar
                    url: "my_file_php.php",
                    data: { key : 'value', array : ['stuff1', 'stuff2'] }
                    success: function(data){
                    },
                    error: function(xhr, textStatus, error){
                    }
               }); 
          }
     });
});

O "my_file_php.php", seria o meu ficheiro PHP, onde já possuo todos os dados para envio para a BD.

Corrijam-me se estiver errado, para tentar perceber ;)

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Mais ou menos. No ajax, tens um campo "data", onde colocas os dados que pretendes. Eu coloquei um objecto javascript, mas podes colocar outra coisa que aches que seja mais simples de processar no lado do servidor. Eu, como prefiro nodejs no backend, prefiro trabalhar com JSON.

O "method" é o método que pretendes que o cliente chame o servidor (também chamado o verbo HTTP). Existem vários verbos, dos quais 2 deves conhecer: GET e POST. Existem outros 2 conhecidos por quem desenvolve REST: PUT e DELETE.

No teu caso, como pretendes inserir e remover, para inserir utilizava POST, onde "data" leva os dados que pretendes enviar para o servidor (que são relevantes para a inserção) e poderias eventualmente usar o DELETE (com um parâmetro que indica o que é que pretendes apagar).

Claro que, podes utilizar o POST para tudo e envias a operação que pretendes efectuar do lado do servidor com o resto dos dados relevantes para a operação.

Relativamente às cores dos botões, quando tu clicas, a cor do botão muda logo, independentemente da operação ter sido realizada ou não (o pedido tem que ser feito ao servidor, processar, responder e só quando recebes a resposta é que deves determinar se o botão muda de cor).

Portanto, normalmente, a ideia seria, ao clicar no botão, dás um efeito só para a UX (mostrar ao utilizador que está alguma coisa a acontecer), e quando receberes a resposta de sucesso mudas a cor do botão (ou seja, colocas o código que altera as classes no handle de success). Ou, se receberes uma resposta de erro, não mudas a cor do botão e apresentas uma mensagem a utilizador a indicar que ocorreu um erro.

Editado por KTachyon

“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Eu estou a entender a tua ideia, agora o mais complicado, vai ser desenvolver, para quem ainda esta a zeros em JS.

Vou tentar então implementar, ver a melhor forma para correr o javascript, ver mais tutoriais, a ver se consigo colocar isto no ponto que pretendo.


collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Tens aqui um exemplo de como podes fazer para mostrar que está a carregar...

http://jsfiddle.net/n0tt_/ezzbdmec/

Wow. Muito bom.

Você esta realmente a ajudar-me bastante :)

_________

Estou aqui a tentar guardar todo o codigo, num só ficheiro em ".html", para testar fora do "jsfiddle", e o botão não esta a responder.

O que esta faltando? O jQuery 2.1.3 já o tenho, o CSS e o CSS dos icons tambem. O que esta faltando?

Deixo aqui o file que eu guardei, basicamente igual ao que o @RuiAlmeida20 envio atraves do jsfiddle.

https://www.dropbox.com/s/3mrhbrmjm7krjvu/button.html?dl=0


collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Se estás a abrir a página directamente no teu browser, o teu browser vai tentar ir buscar o jquery ao endereço:

file://code.jquery.com/jquery-2.1.0.js

Tudo por causa dessa mania estranha que as pessoas têm em começar os endereços dos ficheiros Javascript com //


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Se estás a abrir a página directamente no teu browser, o teu browser vai tentar ir buscar o jquery ao endereço:

file://code.jquery.com/jquery-2.1.0.js

Tudo por causa dessa mania estranha que as pessoas têm em começar os endereços dos ficheiros Javascript com //

Isso já foi falha minha não ter reparado.

Mas agora, já alterei, e sempre que carrego no botão, fica sempre na perto de "a carregar". Isso é por não ter ainda o ajax em funcionamento, ou deveria funcionar (alterando o botão), conforme mostra no jsfiddle?


collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Não porque o echo do jsfiddle só funciona no jsfiddle.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Tentas pesquisado um pouco sobre este assunto, e a maioria do que vejo, é ajax só em "form's", mas no meu caso, eu tenho botões, com tag "a" e o "href", com os GET's necessários a enviar para uma página .php (exemplo de um href de um botão, functions.php?id=1&post=aabb&year=2015)

No url do ajax, eu tenho só que meter o file do php, ou a extensão toda?


collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Tens que meter o caminho (absoluto ou relativo ao caminho da página em que te encontras actualmente).


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Já estou a conseguir. Bastou-me acrescentar/alterar assim

type: "GET",

url: "functions.php",

data: 'id=1&post=aabb&year=2015',


collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Eu no PHP, utilizo "whiles", e dentro de cada "while", é gerado vários botões (os tais à qual pretendo alterar).

Logo, como é possível no JS, colocar as variáveis automáticas, correspondente a cada "ID" que é recebida do while?

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Existem várias formas de o fazer. Uma delas é definires um atributo com o valor, que depois podes retirar via Javascript:

<button id="abc123" data-id="123">ABC123</button>

var button_id = $('#abc123').attr('data-id');


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Mas este codigo que mencionas-te (tenho que adequalo certamente), mas tenho que coloca-lo dentro dos whiles?

var button_id = $('#abc123').attr('data-id');

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
KTachyon    274
KTachyon

Não, tu nos whiles só crias os botões com os data-id. Aquilo que coloquei em Javascript foi só um exemplo para um botão específico. Tipicamente tu vais receber esse botão num event handler e assim podes realizar a operação para qualquer botão:

$('button').click(function(event) {
   var $button = $(event.target);
   var id = $button.attr('data-id');
   //...
});

Assim consegues ter a mesma lógica para todos os botões.


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

Estou a entender. Mas eu assim, só consigo pegar na variavel do ID, e eu queria que fosse possivel ler mais.

No post acima, mensionei que queria pegar varias, tais como por exemplo:

data: 'id=1&post=aabb&year=2015'

Logo queria usar estas três, do "id", o "post", e do "year".

Como é que eu consigo faze-lo de forma tambem automatica a dar para todos os botões?

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
RuiAlmeida20    1
RuiAlmeida20

então é só seguires a lógica...

<button id="abc123" data-id="123" data-year="2015" data-post="aabb">ABC123</button>

$('button').click(function(event) {
var $button = $(event.target);
var id = $button.attr('data-id');
var year = $button.attr('data-year');
var post = $button.attr('data-post');
//...
});

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

então é só seguires a lógica...

<button id="abc123" data-id="123" data-year="2015" data-post="aabb">ABC123</button>

$('button').click(function(event) {
var $button = $(event.target);
var id = $button.attr('data-id');
var year = $button.attr('data-year');
var post = $button.attr('data-post');
//...
});

Não estava a perceber, pois pensava que quando disseram "data-id", eu pensei que era uma tag unica do html ;)

Nada de grave eheheh

Estou a testar este codigo numa página PHP unica (Só com um botão e o JS), e esta a funcionar perfeitamente.

Mas quando adiciono aos files do php principal (Na qual tem varios botões, mas com ids diferentes por causa do while), o JS já não executa.

No primeiro resultado do while, o "beforeSend (o Loading)" funciona, mas não passa dai

Nos resultados seguintes do while, o JS ai é que nem se quer mostra o "Loading".

O que se estará a passar?

Editado por tiko165

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
tiko165    3
tiko165

O codigo PHP esta assim:

$verificar = $datatable->prepare("SELECT * FROM name_datatable WHERE user_id=? AND idfile=? AND ano=?");
$verificar->bindparam(1, $_SESSION['id']);
$verificar->bindparam(2, $PaisEuro['id']);
$verificar->bindparam(3, $PaisEuro['ano']);
$verificar->execute();
$db_verif = $verificar->fetch();
if ($verificar->rowcount() > 0) {
//Mostramos o botao de remover
echo "
<button type='button' class='btn bgm-red' id='buttonCoin' data-idcoin='".$PaisEuro['id']."' data-preco='".$PaisEuro['preco']."' data-year='".$PaisEuro['ano']."' title='Remover'>Remover</button>";
} else {
//botao adicionar
echo "
<button type='button' class='btn bgm-green' id='buttonCoin' data-idcoin='".$PaisEuro['id']."' data-preco='".$PaisEuro['preco']."' data-year='".$PaisEuro['ano']."' title='Adicionar'>Adicionar</button>";
}

E no código Javascript, tenho isto:

$(document).ready(function() {
$("#buttonCoin").click(function(event) {
var $button = $(event.target);
var idcoin = $button.attr('data-idcoin');
var preco = $button.attr('data-preco');
var year = $button.attr('data-year');

if($("#buttonCoin").hasClass("bgm-green")) {
$.ajax({
type: "GET",
url: "add.php",
data: "id_moeda="+idcoin+"&preco="+preco+"&ano="+year+"",
beforeSend: function(){
$("#buttonCoin").html('<i class="fa fa-spinner fa-spin"></i> Loading');
},
success: function(data){
$("#buttonCoin").removeClass("bgm-green");
$("#buttonCoin").addClass("bgm-red");
$("#buttonCoin").text("Eliminar Moeda");
$("#buttonCoin").prop('title', 'Add Hoje');
},
error: function(xhr, textStatus, error){}
});
} else {
$.ajax({
type: "GET",
url: "remove.php",
data: "id_moeda="+idcoin+"&preco="+preco+"&ano="+year+"",
beforeSend: function(){
$("#buttonCoin").html('<i class="fa fa-spinner fa-spin"></i> Loading');
},
success: function(data){
$("#buttonCoin").removeClass("bgm-red");
$("#buttonCoin").addClass("bgm-green");
$("#buttonCoin").text("Adicionar Moeda");
$("#buttonCoin").prop('title', 'Adicionar Moeda');
},
error: function(xhr, textStatus, error){}
});
}
});
});

Nos "Elements" do Chrome, mostra que esta a ler os dados corretamente.

hghhhhh.jpg

Editado por apocsantos
geshi

collectioneuro300px.png

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.