0

Galera, este é o meu primeiro post. Desculpa se não segui alguma regra/etiqueta de publicação.

Fiz um formulario em html que manda dados para um arquivo em php. Depois coloquei ajax pra não dar reload na pag. Até aí ok. Mas o html e ajax estão no mesmo scrip e quero separar eles.

O formulario tem um botao de responder. Então pensei em fazer no arquivo js. um querySelector com o id do formulario e addEventListener, e, quando o click ocorresse, ele executaria o ajax. É possível fazer isso?

1 - Ajax

<script>
    $(document).ready(function(){   

    $("#form_resp_<?=$row['id']?>").submit(function(e){
    //event.preventDefaut();

    $.ajax({
        method: 'POST',
        url : 'banco-responder.php',
        data: {
        id : $("#id-resposta-<?=$row['id']?>").val() ,
        resposta : $("#resposta-pergunta-<?=$row['id']?>").val()
    }
        }).done(function(data){
        console.log($("#card-<?=$row['id']?>").hide());
        alert("Respondido com Sucesso!");
        }).fail(function(){
        alert('Deu pau');
        });
    return false;
        });
    });
</script>

2 - Query Selector/addEventListener:

<script>                            
    var botaoResponder = document.querySelector("#botao_resp_<?=$row['id']?>");
    botaoResponder.addEventListener("click", function(){
        alert("teste: Botão responder foi clicado com sucesso!!!");

    });
</script>

Quero colocar o ajax dentro do addEventListener quando o click acontecer e depois assim separar os arquivos. Como posso fazer isso?

0

1 Resposta 1

0

Você pode usar o jQuery para fazer isso, usando o método .on(), por exemplo:

/** Seu arquivo JavaScript separado. */

(function ($) {
  'use strict';
  
  $(function () {
    $('#ajax-button').on('click', function () {
      alert('Você clicou no botão!');
      
      /** Do stuff. */
    });
  });
})(jQuery);
<!-- Seu arquivo HTML -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <button id="ajax-button">Clique-me!</button>
</form>

4
  • Não consegui fazer :( Coloquei em outro arquivo .js isso aqui: <script> $("#botao_resp_<?=$row['id']?>").on('click', function (event) { event.preventDefault(); alert('Você clicou no botão!'); $.ajax({ method: 'POST', url : 'banco-responder.php', data: { id : $("#id-resposta-<?=$row['id']?>").val() , resposta : $("#resposta-pergunta-<?=$row['id']?>").val() } }).done(function(data){ console.log($("#card-<?=$row['id']?>").hide()); alert("Respondido com Sucesso!"); }).fail(function(){ alert('Deu pau'); }); return false; }); </script>
    – Guilherme
    27/01/2018 às 15:46
  • Importei no html: <script src="principal.js" ></script> E no console do aparece isso: Uncaught Error: Syntax error, unrecognized expression: #botao_resp_<?=$row['id']?>
    – Guilherme
    27/01/2018 às 15:51
  • No arquivo do javascript você não deve incluir as tags <script> e </script>. 27/01/2018 às 16:00
  • Tirei as tags e nada ainda.
    – Guilherme
    28/01/2018 às 12:45

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 .