Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, estou penando em um clique de um `<button>`, peço a ajuda de vocês.
Preciso que, assim que um `button` da classe `btn-remove` for clicado, o valor de seu `data-id` seja pego e enviado como parâmetro para uma função no PHP. Segue abaixo os códigos:
Função PHP:
function removerComentario( $id ) {
$deleta = $PDO->prepare("DELETE comentario FROM comentarios WHERE idcomentario = :idcomentario");
$deleta->bindValue(':idcomentario', $id);
$deleta->execute();
}
$lista = $PDO->query("SELECT convidado.nome, comentarios.comentario, comentarios.idcomentario FROM convidado INNER JOIN comentarios ON convidado.idconvidado = comentarios.idconvidado ORDER BY idcomentario");
while ($rows = $lista->fetch()){
$nome_cmt = $rows['nome'];
$coment_cmt = $rows['comentario'];
$id_coment = $rows['idcomentario'];
printf("<li>$nome_cmt disse: <button class='btn-remove' data-id='$id_coment'>Deletar</button> <br> $coment_cmt </li>");
}
SCRIPT:
<script>
$('.btn-remove').click(function(){
var id = $(this).data('id');
$.ajax({
url: "comentario.php",
data: {
//aqui preciso que o valor do $id da função lá em cima seja igual à var id da segunda linha desse script.
},
datatype: "json",
type: "POST",
success: function (data) {
//aqui não entendi, para esse caso, o que devo colocar
}
});
});
</script>
Basicamente o valor não está sendo pego, está dando erro no "$" do "$('btn_remove')", na parte do SCRIPT.Poxa cara, vlw, mas ainda continua dando esse erro: $is not defined
Boa tarde, amigo!
Recomendo que crie uma função no javascript para a execução, dessa forma:
<script type="text/javascript">
function enviarMetodo(valor){
$.ajax({
url: "comentario.php",
data: {valor},
dataType: "json",
type: "POST",
beforeSend: function(){
},
success: function (data) {
},
error: function(){
}
});
}
</script>
Para executar esse método, insira na tag do botão desejado o seguinte código:
<button type="button" onclick="enviarMetodo($(this).attr('data-id'));" data-id="seu valor"></button>
**O seu erro ai é por que você não instalou o jQuery ****!**
Insira o seguinte código no fundo de sua página, depois da tag que encerra o **"<body>"**, a tag **"</body>"**:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Bom .. Agora vou te explicar exatamente o que é cada parte da execução do ajax, assim entenderá melhor !
após o disparo do ajax, ele precisa de algumas pré-definições para execução iniciar, isso já deve ter notado ...
** • O que é url ?**
**- url **é referente ao destino de envio dos dados, para onde esses dados devem ir, onde chegar para ser processado ! Ele poderia ser definido até entre pastas, dessa forma: **"url: 'pasta tal/pasta dois/seu arquivo.php',"**.
**• O que é data ?**
**- data** é referente aos valores que serão enviados, há diversas formas de definir, e podem ser passada várias de uma só vez (usando o **ajaxSubmit** poderá ser enviado até um formulário inteiro, recomendo que pesquise sobre, ou pode perguntar aqui mesmo que te explico ele todinho), elas podem ser definidas dessas formas:
**- data: {variavel}** // Dessa forma será enviada uma variável, chegará no PHP como uma super variável, sendo ela "**GET**" ou "**POST**", com o nome de **"variavel"**, sendo assim, seria acessada dessa forma **"$_GET['variavel'] **ou** $_POST['variavel']"**;
**- data: {'nome': variavel}** // Definindo data dessa forma, ele enviará ao PHP que o valor dentro da variável, será lido como "nome", ou seja, se definido para ser enviado como POST, ele irá ler **"$_POST['nome']"**, se definido como GET será **"$_GET['nome']"**;
**- data: {'nome': 13, variavel, 'sobrenome': nome2}** // Mesma coisa que os outros, o data pode enviar diversos valores ao mesmo tempo, o tamanho dessa requisição não tem limite, a não ser que atinja o valor limite de MB restrito a sua hospedagem lá no **php.ini**, o que é bem difícil de conseguir chegar se não for fazer upload de arquivos.
**• O que é dataType ?**
**- dataType** é o cara que decide como será o retorno, ele diz o que o PHP irá retornar ! se você definir que será um **json**, ele irá definir que o retorno que o PHP entregará sera do tipo json, então o seu PHP deverá finalizar as funções entregando o valor da seguinte forma: **"echo json_encode(array(0 => 1, 1 => 'Valor final', 2 => $algumaCoisa));"** (Sempre que ele retornar algum erro que faça com que envie algo que não seja do tipo json, o ajax ira cair em ***error ***ao invés de ***success***), se dizer que o retorno será **html**, ele poderá receber normalmente o conteúdo e processado como um html comum. (Recomendo usar bastante o **console.log()** para printar o conteúdo e ver o que o PHP esta retornando, ou usar **$('#algumaDiv').html();** para verificar diretamente no HTML).
** • O que é type ?**
**- type** define como ele será enviado, POST ou GET ? (Tem outros também, mas estude esses antes !'), quando definido como GET, o PHP irá ler **na supervariável $_GET**, caso seja POST, ele irá ler com **a supervariável $_POST**.
**• O que é beforeSend ?**
**- beforeSend **é o que acontecerá na página antes da requisição terminar ! Poderia ser um aviso de carregando, loading, um gif girando para indicar que esta sendo carregado, ou um fa icons bonitão, sei lá ... você decide !
** • O que é success ?**
** - success** é quando a requisição funciona corretamente, quando tudo da certo ! Caso não caia nele, significa que tem algo errado, poderá ser no PHP, recomendo que verifique todas as definições do ajax quando ocorrer um erro no success!
** • O que é error ?**
** - error** é chamado caso o ***success ***não tenha sido como o planejado, caso ele não dê certo, ele irá apresentar ***error***, poderá ser instalado uma execução para solução desse erro, ou uma simples notificação pra que você saiba o que esta errado!
Bons estudos !Obrigado amigo!!
Amigo, deu o seguinte erro:
<li>Augusto disse: <button onclick='enviarMetodo($(this).attr('data-id'));' data-id='55'>Deletar</button> <br> Comentario... </li>
>
Citar
Uncaught SyntaxError: Unexpected end of input comentario.php:53
Boa tarde, desculpe a demora.
Esse erro ai já é referente ao PHP, ele indicou ali a linha que ocorreu tal erro, nos mande seu código em PHP para analisarmos !
Beleza brother, valeu! Bom, o código é meio grande, mas eu dei uma ajeitada para ficar mais fácil de entender. Os erros acredito que estejam no evento onclick(), na hora de pegar o valor do data-id do button, ou de retornar o valor do AJAX para o PHP, que é algo que não compreendi muito bem ainda. Mas, de qualquer forma, ai está o código amigo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="comentario.css" >
<title>Comentário</title>
</head>
<body>
<div class="formulario">
<!-- Formulário -->
<form method="post" name="comentario">
<label for="subject" id="title-coment">Escreva seu comentário aqui:</label>
<textarea name="mensagem" rows=5 cols=50 wrap="hard" required="" resize="none" placeholder="Digite aqui..."></textarea>
<input type="submit" value="Enviar">
</form>
<!-- End formulário -->
<!-- Comentários -->
</div>
<div class="container_2">
<ul>
<!-- As linhas da <ul> são geradas via PHP: -->
<?phpinclude_once('conn.php'); //Arquivo de conexão com o Banco de Dados
include_once ("login.php"); //Inclusão para pegar os cookies $nome e $email, durante uma seção
$mensagem = $_POST['mensagem'];
//Comando para identificar o convidado que comentou:
$sql_convid = "SELECT idconvidado FROM convidado WHERE nome = '{$nome}'";//execução do comando:
$idop = $PDO->query($sql_convid);
//armazenamento do resultado da busca:
$idconvidado = $idop->fetch();
//Comando para inserir comentário no Banco de Dados:
$sql_op2 = $PDO->prepare('INSERT INTO comentarios(comentario,idconvidado) value(:mensagem,:idconvidado)');
$sql_op2->bindValue(':mensagem', $mensagem);
$sql_op2->bindValue(':idconvidado', $idconvidado["idconvidado"]);//Definir limite de comentários:
$vf_comentarios = "SELECT idcomentario FROM comentarios";
// Se nenhuma mensagem foi enviada,
if($mensagem == "" || $mensagem == null){
// E se o email do usuário logado for o do administrador (gu@gmail.com)
if(@$email == "gu@gmail.com"){
// Definição do script (será mostrado no final do HTML!)
$script = "<script type='text/javascript'>
function enviarMetodo(valor){
$.ajax({
url: 'comentario.php',
data: {valor},
dataType: 'json',
type: 'POST',
beforeSend: function(){
},
success: function (data) {
},
error: function(){
}
});
};
</script>";
//Comando para buscar o nome do usuário que comentou, o comentário em sí e o id desse comentário:
$lista = $PDO->query("SELECT convidado.nome, comentarios.comentario, comentarios.idcomentario FROM convidado INNER JOIN comentarios ON convidado.idconvidado = comentarios.idconvidado ORDER BY idcomentario");
//Loop de exibição do $lista + um botão em cada linha (para o administrador deletar comentários indesejados)
while ($rows = $lista->fetch()){
$nome_cmt = $rows['nome'];
$coment_cmt = $rows['comentario'];
$id_coment = $rows['idcomentario'];
//Codificação da $linha no HTML (com o botão)
printf("<li>$nome_cmt disse: <button type='button' onclick='enviarMetodo($(this).attr('data-id'));' data-id='$id_coment'>Deletar</button> <br> $coment_cmt </li>");
}
//Variável que deveria pegar o valor do data-id do button, quando esse for enviado via AJAX pelo script definido anteriormente:
$valor_do_id = $_POST['valor']; //No meu entendimento, aqui o $valor_do_id deve se tornar igual o valor enviado pelo AJAX
//Definição da função de Exclusão de Comentários:
function removerComentario( $id ) {
//Se o $id não for nulo, ou seja, se algum botão for apertado
if($id != null){
$select = $PDO->query("SELECT comentario FROM comentarios");
$deleta = $PDO->prepare("DELETE comentario FROM comentarios WHERE idcomentario = :idcomentario");
$deleta->bindValue(':idcomentario', $id);
$deleta->execute();
//E se após a exclusão o numero de linhas não foi alterado:
if($deleta->rowCount()==$select->rowCount()){
//Erro na exclusão
echo "<script language='javascript' type='text/javascript'>alert('O comentário já foi excluído!');window.location.href='comentario.php';</script>";
return false;
}else{
//Exclusão OK
echo "<script language='javascript' type='text/javascript'>alert('Comentário excluido com sucesso!!');window.location.href='comentario.php';</script>";
return true;
}
}else{
//Nenhum botão pressionado
return false;
}
}
//Executa a função acima ( de exclusão de comentários):
removerComentario( $valor_do_id );
//Encerramento de conexão:
$PDO=null;
}else{ // Se o usuário não for o administrador):
//Comando para buscar apenas nome do usuário que comentou, e o comentário (Não há botão para deletar agora, logo não precisa do id do comentário):
$lista = $PDO->query("SELECT convidado.nome, comentarios.comentario FROM convidado INNER JOIN comentarios ON convidado.idconvidado = comentarios.idconvidado ORDER BY idcomentario");
//Comando para definir o script, que será "nada":
$script = "";
//Loop de exibição do $lista normal, sem botão:
while ($rows = $lista->fetch()){
$nome_cmt = $rows['nome'];
$coment_cmt = $rows['comentario'];
//codificação dessa linha no HTML:
printf("<li>$nome_cmt disse: <br> $coment_cmt </li>");
}
}
}else{ // Se a mensagem enviada não é nula:
//Definição do número de comentários no Banco de Dados:
$exec_vf = $PDO->query($vf_comentarios);
$contador = $exec_vf->rowCount();
$limite = $contador;
//Se houver menos do que 1000 comentários:
if($limite<1000){
//E se o email do usuário logado for o do administrador (gu@gmail.com)
if($email == "gu@gmail.com"){
//Comando para buscar o nome do usuário que comentou, o comentário em sí e o id desse comentário:
$lista = $PDO->query("SELECT convidado.nome, comentarios.comentario, comentarios.idcomentario FROM convidado INNER JOIN comentarios ON convidado.idconvidado = comentarios.idconvidado ORDER BY idcomentario");
// Definição do script
$script = "<script type='text/javascript'>
function enviarMetodo(valor){
$.ajax({
url: 'comentario.php',
data: {valor},
dataType: 'json',
type: 'POST',
beforeSend: function(){
},
success: function (data) {
},
error: function(){
}
});
};
</script>";
//Exibição do $lista + um botão em cada linha (para o administrador deletar comentários indesejados)
while ($rows = $lista->fetch()){
$nome_cmt = $rows['nome'];
$coment_cmt = $rows['comentario'];
$id_coment = $rows['idcomentario'];
//Codificação da $linha no HTML (com o botão)
printf("<li>$nome_cmt disse: <button type='button' onclick='enviarMetodo($(this).attr('data-id'));' data-id='$id_coment'>Deletar</button> <br> $coment_cmt </li>");
}
//Variável para pegar o valor do data-id do button, quando o valor for enviado via AJAX pelo script definido anteriormente.
$valor_do_id = $_POST['valor']; //No meu entendimento, aqui o $valor_do_id deve se tornar igual o valor enviado pelo AJAX
//Chamando a função de Exclusão de Comentários:
removerComentario( $valor_do_id );
//Execução do comando de inserção de comentário no Bnaco de Dados (definido lá em cima)
$sql_op2->execute();
//Mensagem de alerta "Comentário enviado com sucesso!"
echo "<script language='javascript' type='text/javascript'>alert('Comentário enviado com sucesso!!!');window.location.href='comentario.php';</script>";
}else{ // Se o usuário não for o administrador):
//Comando para buscar apenas nome do usuário que comentou, e o comentário (Sem botão para deletar):
$lista = $PDO->query("SELECT convidado.nome, comentarios.comentario FROM convidado INNER JOIN comentarios ON convidado.idconvidado = comentarios.idconvidado ORDER BY idcomentario");
//Comando para definir o script, que será "nada":
$script = "";
//Loop de exibição do $lista normal, sem botão:
while ($rows = $lista->fetch()){
$nome_cmt = $rows['nome'];
$coment_cmt = $rows['comentario'];
//codificação dessa linha no HTML:
printf("<li>$nome_cmt disse: <br> $coment_cmt </li>");
}
//Execução do comando de inserção de comentário no Bnaco de Dados (definido lá em cima)
$sql_op2->execute();
//Avisa que o comentário foi enviado com sucesso:
echo "<script language='javascript' type='text/javascript'>alert('Comentário enviado com sucesso!!!');window.location.href='comentario.php';</script>";
//Encerra conexão:
$PDO = null;
}
}else{ //Se já existem 1000 comentários no Banco de Dados:
//Mensagem de limite de comentários:
echo "<script language='javascript' type='text/javascript'>alert('Fim de comentários');window.location.href='index1.html';</script>";
}
}
?>
</ul>
<!-- End comentários -->
</div>
</body>
</html><!-- Aqui em baixo onde o script é escrito para cada caso: -->
<?php printf($script); ?>
**Esse é o resultado da página anterior vista no F12 do navegador. O erro diz estar na linha do*** button: *
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="comentario.css" >
<title>Comentário</title>
</head>
<body>
<div class="formulario">
<!-- Formulário -->
<form method="post" name="comentario">
<label for="subject" id="title-coment">Escreva seu comentário aqui:</label>
<textarea name="mensagem" rows=5 cols=50 wrap="hard" required="" resize="none" placeholder="Digite aqui..."></textarea>
<input type="submit" value="Enviar">
</form>
<!-- End formulário -->
<!-- Comentários -->
</div>
<div class="container_2">
<ul>
<!-- As linhas da <ul> são geradas via PHP: -->Nome: Augusto
<br />
<b>Notice</b>: Undefined index: mensagem in <b>C:\xampp\htdocs\teste\script.php</b> on line <b>45</b><br />
<li>Augusto disse: <button type='button' onclick='enviarMetodo($(this).attr('data-id'));' data-id='55'>Deletar</button> <br> Bla bla bla </li><br /> <!-- O erro é nessa linha -->
<b>Notice</b>: Undefined index: valor in <b>C:\xampp\htdocs\teste\script.php</b> on line <b>145</b><br />
</ul>
<!-- End comentários -->
</div>
</body>
</html><!-- Aqui em baixo onde o script é escrito para cada caso: -->
<script type='text/javascript'>
function enviarMetodo(valor){
$.ajax({
url: 'comentario.php',
data: {valor},
dataType: 'json',
type: 'POST',
beforeSend: function(){
},
success: function (data) {
},
error: function(){
}
});
};
</script>
O erro é: Uncaught SyntaxError: Unexpected end of input
Muito obrigado pela atenção brother!Qualquer dúvida no código eu lhe esclareço.
Para resumir esse código gigante, acredito, como lhe disse, que o problema esteja em uma dessas partes:
No script do $script:
<script type='text/javascript'>
function enviarMetodo(valor){
$.ajax({
url: 'comentario.php',
data: {valor},
dataType: 'json',
type: 'POST',
beforeSend: function(){
},
success: function (data) {
},
error: function(){
}
});
};
</script>
No <button></button> que envia o data-id:
printf("<li>$nome_cmt disse: <button type='button' onclick='enviarMetodo($(this).attr('data-id'));' data-id='$id_coment'>Deletar</button> <br> $coment_cmt </li>");
No resultado desse button no HTML (veja que as aspas do* onclick()* ficam meio estranhas:
<li>Augusto disse: <button type='button' onclick='enviarMetodo($(this).attr('data-id'));' data-id='55'>Deletar</button> <br> Comentário teste teste bla bla </li><br />
Na forma como estou tentando pegar o valor retornado do AJAX, que é:
$valor_do_id = $_POST['valor'];
Ou no chamamento da função:
removerComentario( $valor_do_id );
Flw Brother, desculpe o textão ai!Bem não li tudo, mas basicamente é só executar ajax, o que é muito simples de fazer.
Escrevi uma coisa genérica aqui, só para mostrar como se faz de forma simples
Veja:
Spoiler
<button id="enviar" data-id="param_html5">Veja o Exemplo</button>
<div id="mostra_resultado"></div>
<script>
// Adicionar o evento click no botão vinculando-o a função
document.getElementById('enviar').addEventListener('click', funcao_exemplo, false);
function funcao_exemplo(e) {
var a = e.target.dataset.id; // Armazeno o valor do data-'id' do botão
var http = new XMLHttpRequest; // Inicio o protocolo para executar ajax
// Adciono um evento para a execução do ajax
http.addEventListener('readystatechange', function () {
// Verifico se o documento está pronto e carregado
if ((http.readyState === 4) && (http.status === 200)) {
// mostrar o resultado (Não é necessario se não quiser mostrar)
document.getElementById('mostra_resultado').innerHTML = http.responseText;
}
}, false);
// Tipo de requisição para o arquivo
// !!! IMPORTANTE NUNCA SE DEVE OMITIR O TERCEIRO PARARÂMETRO OU DEFINIR ELE COMO FALSE
http.open('GET', 'seu_arquivo.php?parametro=' + a, true);
http.send(); // envio da requisição para o servidor
}
</script>
Isso é apenas a execução de javascript e não jquery, pelo fato que eu desaconselho o uso por milhares de motivos, mas tanto faz.
O segredo está em enviar por parâmetro os dados para o arquivo que será solicitado pela requisição
seu_arquivo.php?nome_do_parametro=conteudo_do_parametro
Nesse caso no arquivo php teremos **$_GET['nome_do_parametro'];** que é "**conteudo_do_parametro**"
De qualquer coisa veja essas documentações:
[https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest](https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest)
[https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/dataset](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLElement/dataset)Opa, obrigado amigo. Só uma coisa: eu poderia trocar o GetElementById() pelo GetElementByClassName()?
Veja como ficaria:
<script>
var els = document.getElementsByClassName('btn-remove');
for(var i = 0; i < els.length; i++) {
els[i].addEventListener('click', exclusao, false);
}
function exclusao(e) {
var a = e.target.dataset.id; // Armazeno o valor do data-'id' do botão
var http = new XMLHttpRequest; // Inicio o protocolo para executar ajax
// Adciono um evento para a execução do ajax
http.addEventListener('readystatechange', function () {
// Verifico se o documento está pronto e carregado
if ((http.readyState === 4) && (http.status === 200)) {
}
}, false);
// Tipo de requisição para o arquivo
// !!! IMPORTANTE NUNCA SE DEVE OMITIR O TERCEIRO PARARÂMETRO OU DEFINIR ELE COMO FALSE
http.open('GET', 'pagina.php?id_comentario=' + a, true);
http.send(); // envio da requisição para o servidor
}
</script>
.E quanto ao nome_do_parametro, para acessa-lo via PHP, eu preciso colocar algo como:
$valor_parametro = $_GET['nome_do_parametro']; ???
Está dando o seguinte erro:
script.php:60 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
>
4 horas atrás, Augusto A.S disse:
E quanto ao nome_do_parametro, para acessa-lo via PHP, eu preciso colocar algo como:
$valor_parametro = $_GET['nome_do_parametro']; ???
Exemplo: arquivo.php?envio_a=chaves&envio_b=madruga
No php
$_GET['envio_a']; // Isso será chaves
$_GET['envio_b']; // Isso será madruga
Exemplo:
<?php
if ($_GET['envio_a'] != 'chaves') {
echo ("O param get envio_a não é igual a chaves"); echo ("O param get envio_a é igual a chaves veja o resultado");
var_dump($_GET);
}>
3 horas atrás, Augusto A.S disse:
Está dando o seguinte erro:
script.php:60 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
Possivelmente (não tenho certeza) está tentando vincular não um evento e sim um objeto.
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype
>
4 horas atrás, Augusto A.S disse:
Opa, obrigado amigo. Só uma coisa: eu poderia trocar o GetElementById() pelo GetElementByClassName()?
Veja como ficaria:
Sim entendo, possivelmente você tem múltiplos botões para executar a mesma coisa então tente assim:
(obs.: Mesmo sem precisar, testei mesmo assim...)
Spoiler
<button class="btn-remove" data-id="param_1">Primeiro</button>
<button class="btn-remove" data-id="param_2">Segundo</button>
<button class="btn-remove" data-id="param_3">Terceiro</button>
<button class="btn-remove" data-id="param_4">Quarto</button>
<button class="btn-remove" data-id="param_5">Quinto</button>
<div id="resultado"></div>
<script>
var btn = document.getElementsByClassName('btn-remove');
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function (e) {
var a = e.target.dataset.id;
ajax_simples('seu_arquivo.php?enviar=' + a, 'resultado');
}, false);
}
function ajax_simples(arquivo, mostrar) {
if (arquivo) {
var http = new XMLHttpRequest;
http.addEventListener('readystatechange', function () {
if (http.status === 404) {
http.abort();
console.log('Ops!! o arquivo ' + arquivo + ' não foi encontrado!');
} else if (mostrar && (http.readyState === 4 && http.status === 200)) {
document.getElementById(mostrar).innerHTML = http.responseText;
}
}, false);
http.open('GET', arquivo, true);
http.send();
} else {
console.log('Informe um arquivo para ser aberto');
}
}
</script>
Troque isso:
data: { 'id': id }A função success do jquery recebe o retorno do POST sobre a operação realizada, leia um pouco mais sobre os métodos de requisições HTTP aqui.