4

Estou a começar a entrar no jQuery só que eu preciso no meu site que uma pessoa escreva uma opinião e ela apareça logo abaixo sem ter de fazer atualizar pagina. queria que uma pessoa ao inserir qualquer coisa na base dados esse conteúdo aparece-se logo na pagina sem ter de atualizar.

Preciso de algumas luzes de como fazer isso.

Codigo que estou a utilizar

JS

$(function () {
    $(".submit_button").click(function () {
        var textcontent = $("#comentario").val();
        var dataString = 'id_estabelecimento=<?php echo $row->id; ?>&user_id=<?php echo $_SESSION['
        user_id '] ?>&opiniao=' + textcontent;
        if (textcontent == '') {
            alert("Por favor escreva um comentário..");
            $("#comentario").focus();
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="load">Aguarde por favor..</span>');
            $.ajax({
                type: "POST",
                url: "ajax/adicionar_comentario.php",
                data: dataString,
                cache: true,
                success: function (html) {
                    $("#show").after(html);
                    document.getElementById('comentario').value = '';
                    $("#flash").hide();
                    $("#comentario").focus();
                }
            });
        }
        return false;
    });
});

HTML

<form method="post" name="form" action="">
    <input type="hidden" name="valida" id="valida" value="ok" />
    <table border="0" bgcolor="#E9EAED" style="margin:0px 0px 30px 0px;" width="100%" cellpadding="0" cellspacing="0">
        <?php if($_SESSION[ 'FBID'] || $_SESSION[ 'user_id']){ ?>
        <tr>
            <td valign="top">
                <div id="flash" align="left"></div>
                <div id="show" align="left"></div>
            </td>
        </tr>
        <tr>
            <td valign="top" width="7%">
                <div style="padding:15px 5px 5px 20px;">
                    <img width="33" height="33" src="<?php echo $_SESSION['user_foto'] ?>" />
                </div>
            </td>
            <td valign="top" width="93%">
                <div style="padding:15px 20px 15px 5px;">
                    <input type="text" style="width:100%; height:33px;" placeholder="Escreve um comentário..." id="comentario" name="comentario" value="">
                </div>
                <input type="submit" id="submit" style="display:none;" class="submit_button">
            </td>
        </tr>

Codigo php do ficheiro adiconar_comentario.php

session_start();
require_once("../gtm/bd/funcoes.php");
ligarBd();  

mysql_query("INSERT INTO comentarios (user_id, post_id, comentario, data) VALUES('".$_REQUEST['user_id']."', '".$_REQUEST['id_estabelecimento']."', '".$_REQUEST['opiniao']."', now())"); 
0

4 Respostas 4

2

Ok, então dividindo por partes:

Para fazer submissão quando o utilizador carregar no "Enter" podes usar:

$('#comentario').on('keydown', function(e){
    if (e.which != 13) return true;
    $('#submit').click();
});

Deste modo ele clica no botão escondido somente quando e.wich == 13 (a tecla é "Enter").

Para enviar esse comentário para a base de dados podes otimizar o teu código para:

$(".submit_button").click(function () {
    var input = document.getElementById('comentario');
    var textcontent = input.value;
    var data = {
        id_estabelecimento: "<?php echo $row -> id; ?>",
        user_id: "<?php echo $_SESSION['user_id']; ?>",
        opiniao: textcontent
    };

    $("#flash").html('<span class="load">Aguarde por favor..</span>').fadeIn(800);
    $.ajax({
        type: "POST",
        url: "ajax/adicionar_comentario.php",
        data: data,
        cache: true,
        success: function (html) {
            $("#show").after(html);
            input.value = '';
            $("#flash").hide();
            input.focus();
        }
    });
    return false;
});

Agora só falta prevenires/parar o submit da form. Podes fazer isso com:

$('form').on('submit', function (e) {
    e.preventDefault();
});

porém, se nunca queres submeter a form então não precisas de uma form e podes fazer tudo só com o imput...

Nota: no teu código tens <?php echo $_SESSION['user_id'] ?>. Falta aí ; antes de ?>, assim como está dá erro.

Nota2: usei um objeto no data, o jQuery aceita também uma string, mas acho mais limpo/claro/legível assim.

0
1

Montei o que você quer rapidinho usando HTML e jQuery. Não mexi com CSS. Fora isso, se você quer que esses dados sejam salvos no banco de dados, irá precisar mexer com AJAX. Nesse caso, dentro do evento de clique, irá ter que usar AJAX para enviar uma requisição para um arquivo PHP (ou outra linguagem) que será encarregado de fazer a conexão+inserção da mensagem no banco de dados.

$(function() {
  
  $("button.enviar").click(function() {
    
    var mensagem = $("textarea.mensagem").val();
    
    limparCampo();
    
    if($.trim(mensagem)==""){
      return false;
    }
    
    $("#mensagens").prepend('<li>' + mensagem + '</li>');
    
  });
  
});

function limparCampo(){
  $("textarea.mensagem").val("");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea class="mensagem"></textarea>
<button class="enviar">OK</button>

<ul id="mensagens">
  <!-- Irá adicionar mensagens pelo jQuery -->
</ul>

1
  • No título da pergunta está referindo-se ao uso de ajax, sua resposta só mostra como criar um elemento temporário na página. Commented 4/02/2015 às 16:33
0

Você pode fazer assim

     function salvarComentario(){
        $.post("/caminho/para/funcao/save-comentario", {comentario: $('#campo_comentario').val()}, function(d) {
             if(d === "true" ){
                $("#id_div_comentarios").load('caminho/para/recuperar/comentarios',"#id_div_comentarios");      
            } else {
                alert("falha ao salver seu comentario");
            }

        });
    }

Esta função vai enviar o valor do campo comentário para uma a função saveComentarios. Se o retorno for true esta parte $("#id_div_comentarios").load('caminho/para/recuperar/comentarios',"#id_div_comentarios"); fará uma requisição na função que você usa para buscar os comentários do banco e fará um reload na div fazendo com que o novo comentário apareça.

SaveComentarios

 public function saveComentariosAction() {
    $request = $this->getRequest();
    if ($request->isPost()) {
        $aux = $request->getPost();
        $values = get_object_vars($aux);
        // codigo para salver o comentario no banco
        //verificar se foi salvo e dar um return true ou false;
    }
    return $boolean;
}
1
  • Desculpe mas nao percebi muito bem como implementar isso eu estou agora a entrar mais a fundo em ajax porque estou a precisar Commented 4/02/2015 às 16:57
0

Você pode fazer da seguinte forma...aproveitando o código do @YoSH

$(function() {
   $("button.enviar").click(function() {
     var mensagem = $("textarea.mensagem").val();

     if($.trim(mensagem)==""){
       return false;
     }else{
       var dados = "mensagem="+mensagem;
       $.ajax({
          url: 'pagina.php',
          type: 'POST',
          data: dados,
          success:function(result){
             if(result){
                $("#mensagens").prepend('<li>' + mensagem + '</li>');
             else{
                alert("Não foi possível inserir seu comentário");
             }
          }
       })
     }    
   });
});

Onde url:'pagina.php', vai ser uma página separada, que recebera o texto e fazer todo o processo de inserção no banco...

espero que ajude!

1
  • Ajudou estava aqui a tentar por a funcionar mas não esta a funcionar carrego no botao nao me faz nada Commented 4/02/2015 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .