php Symfony 4 Ajax issue

Question

im learning Symfony and now trying to connect Ajax with Symfony. I put Ajax between javascript block in twig and put really simple function in controller file to check whether it is working, but found out it's not working. Doesn't show alert inside Ajax, and not showing dump($r) in console as well.

this is my Ajax script in twig file '''

   {%block javascripts %}
 <script language = "javascript">
   
$(document).ready(function () {
    $("#customize").on("click", function (event) {
        $.ajax({
            url: "{{ 'test/ajax' }}",
            type: 'POST',
            async: true,
            dataType: 'json',
            data:{
                id:1,
                text: 'hello'
            }
        }).done(function(data) {
            alert('yes');
        }).fail(function() {
            alert('no');
        })
    });
});
 </script> 
{%endblock%}

'''

this is the Anker connected to Ajax. '''

{{form_start(form)}}
    {{form_widget(form)}}
{{form_end(form)}}        
<a href="#" id="customize" name="customize" class="btn-basic">Customize</a>

'''

this is the controller file '''

/**
* @Route("/test/ajax", name="ajax_edit")
*/
public function ajaxAction(Request $request){
  $r = $request->request->get('data');
  dump($r);
}

'''

I guess Anker is not responding even though I clicked it. but I don't know how to fix this problem..

Try changing to url: '/test/ajax'. Also your controller method should return a JsonResponse object. — Bossman
– Bossman, Commented Oct 3, 2022 at 10:05
thanks for the reply! I changed route to return jsonResponse and tried url: '/test/ajax' but doesn't show any change in network tab in browser console.. — maz32
– maz32, Commented Oct 4, 2022 at 1:24

Skuti · Accepted Answer · 2022-10-03 14:18:11Z

1

To ensure you have the good URL in your TWIG template, you should used the path() method to generate your URL using the route name:

$(document).ready(function () {
    $("#customize").on("click", function (event) {
        $.ajax({
            url: "{{ path('ajax_edit') }}",
            type: 'POST',
            async: true,
            dataType: 'json',
            data: {
                id:1,
                text: 'hello'
            }
        }).done(function(data) {
            alert('yes');
        }).fail(function() {
            alert('no');
        })
    });
});

And as Bossman said, your route must return a JsonResponse:

/**
 * @Route("/test/ajax", name="ajax_edit")
 */
public function ajaxAction(Request $request)
{
  $r = $request->request->get('data');
  
  return $this->json($r);
}

And of course, if you want to check the response content, you should open you browser console, in network tab and check the request response. Open the console on correct tab before click on button #customize.

answered Oct 3, 2022 at 14:18

Skuti

3422 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maz32 Over a year ago

thanks for the reply! I just fixed the my route and checked in network tab in browser, but it doesn't show any change...

Skuti Over a year ago

Could you please share the actual code ? Could you try to access your route directly on browser? Are you sure you click on the good button or have the right ID?

maz32 Over a year ago

Oh I figured it out..{%block javascripts %} supposed to be {%block javascript %}

Collectives™ on Stack Overflow

php Symfony 4 Ajax issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related