Jquery – View comment data

Question:

I'm trying to return in JQuery comment data and at the end a form to insert more comments.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $("#exibir-comentario").click(function(){

          var valor = $("#exibir-comentario").attr('rel');
          var dados = $("#resposta-form"+valor+"")
          $.ajax({
              type: "POST",
              url: "comentarios.asp?id_questao="+valor+"",
              success: function(resposta) {
                  dados.html(resposta);
              },
              beforeSend: function(){
                dados.html('Buscando...');
              },
              error: function(data) {
                  dados.html('Erro ao buscar!');
              }
        });
      return false;
      });
});
</script>
</head>
<body>
<%questao=1%>
  <a id="exibir-comentario" href="#">Exibir fomulário</a>
  <div id="resposta-form<%=questao%>"></div>
<%questao=2%>
  <a id="exibir-comentario" href="#">Exibir fomulário</a>
  <div id="resposta-form<%=questao%>"></div>
</body>
</html>

But the second link does not return.

I solved putting the dynamic id and making the class receive the click.


//carrega comentarios
$(function() {
    $("a.link").click(function(){
          var valor = $(this).attr('id');
          var dados = $("#resposta-form"+valor+"")
          $.ajax({
              type: "POST",
              url: "comentarios.asp?id_questao="+valor+"",
              success: function(resposta) {
                  dados.html(resposta);
              },
              beforeSend: function(){
                dados.html('Buscando...');
              },
              error: function(data) {
                  dados.html('Erro ao buscar!');
              }
        });
      return false;
      });
});

Now the following has occurred. I managed to bring the form and comments. I'm trying to send the form data doing exactly as I did with the previous script, but as the form is already loaded, it won't.

Answer:

Your problem seems to be with the IDs , you are using the same id for both objects and only one of them is being recognized by the script.

Use something like this:

<%questao=1%>
  <a id="exibir-comentario-a" href="#">Exibir fomulário</a>
  <div id="resposta-form<%=questao%>"></div>
<%questao=2%>
  <a id="exibir-comentario-b" href="#">Exibir fomulário</a>
  <div id="resposta-form<%=questao%>"></div>

You will also need to change your jquery to understand and handle both IDs.

Post Views: 0