Problems with Ajax in PHP MVC project

Question

I’m having trouble using ajax with html.

I have an html file that answers questions from a chat and put the ajax below ajax. It redirects to the question controller and the answer method. The request status is 200, but nothing happens. I debugged and saw that ajax neither access the method, does not pass any of the variables I need.

$(document).ready(function(){

  $(".form-response").on('click',function(e){

    e.preventDefault();
    var seller_id = $(this).attr("seller_id");
    var dataValue = $(this).attr("data-value");
    var resposta = $("#resposta-pergunta-" + dataValue).val();
    console.log(dataValue);
    console.log(resposta);
    console.log(seller_id);

    $.ajax({
      method: 'POST',
      url : '../perguntas/responder',
      data: {
        id: dataValue,
        resposta: resposta,
        seller_id: seller_id

      }}).done(function(data){

        console.log($("#card-" + dataValue).hide());
        alert("Respondido com Sucesso! - Ajax");

      }).fail(function(){

        alert('Problema para RESPONDER');

      });
    return false;   });

When I click the reply button, the information appears on my console.

My project is in MVC and I am using Twig to render the templates. I have a layout.html file, which has the header and another file called formulario.html, which would be between {% block formulario %} and {% endblock %}. My ajax is along with the.html form.

Answer 1

At this point:

url : '../perguntas/responder',

should be the "ext file." ex: '../perguntas/responder.php', which contains the method that processes your request (the data from the data: {...}) for example and returns the result in success: function(data).

I hope I’ve helped.

Answer 2

Have you checked if the click event is being triggered? Try printing some static text below the click event to check if you are triggering the event.

$(".form-response").on('click',function(e){
 console.log('Está acionando o evento');
 ...

Answer 3

Check the Id or Name with care in your HTML and confirm that they are equal in the file and try to use this syntax in your controller json:

   jQuery.ajax({
        type: "POST",
        url: "../perguntas/responder",
        dataType: "json",
        data: {
             id: dataValue,
        resposta: resposta,
        seller_id: seller_id
},
        success: function(data)
        {    
            alert("sucesso");
        },
        error: function (request, status, erro) {

                alert("erro");                                      

             },
                 complete: function (jqXHR, textStatus) {
                //colocar aqui algo que deseja que faça ao terminar todo o processo (finnaly)
              }
       });