How to append a div using AJAX jquery in Symfony 2?

Question

I want to fill a div with data rendered from this Symfony 2 php code using Jquery AJAX

<?php echo $view['actions']->render('ShowfileBundle:Event:choosePerf', array('year' => $event->getYear(), 'name' => $event->getName(), 'thisUser' => $thisUser)); ?>

This should happen after a click event on the div and the same div should be populated with the data from the php code. I am just getting familiar with Symfony 2 so I am not sure how this should work.

Answer 1

This server-side code will only send back some HTML content to your AJAX callbacks.

You have to add it to your existing DOM with some JavaScript / jQuery:

$.ajax({
    url: '/your/symfony2/route',
    type: 'post', // or 'get', 'update', 'delete' etc.
    data: { [...] },
    dataType: 'text'
}).done(function (response) {
    console.log(response);
    $('#your-div-on-which-you-have-cliqued').append(response.responseText);
}).fail(function (response) {
    alert('FAIL');
});

Of course you have to choose the target yourself :)

$('#your-div-on-which-you-have-cliqued') will be the div you have cliqued.

Answer 2

You can do a standard jQuery $.ajax() and specify your php file as the url within your ajax call.

$.ajax({
    type: "POST",
    url: "/path/to/php.php",
    data: "vars=" + vars,
    success: function(result) {
        $('body').append('<div>' + result + '</div>');
    }
);