CODEWITHSUNDEEP
ajaxformssymfony
n0ni0
n0ni0

Reputation: 13

Symfony ajax form need reload page to show results

I have a product page where users can write comments, this works fine but i would like to implement ajax form with no page refresh.

The code call ajax and persist, but need press f5 to show new comment. what am I doing wrong?

Thanks, and sorry for my english.

In product view, render a controller that call the form:

<div class="comments">
  {{ render(controller('AppBundle:Comment:newComment',{'media': selected.id})) }}
</div>

Controller:

class CommentController extends Controller
{
/**
 * @Route("/media/{media}/", name="create_comment", options={"expose"=true})
 * @Method("POST")
 * @ParamConverter("media", class="AppBundle:Media")
 */
public function newCommentAction(Request $request, $media)
{
    $comment = new Comment();
    $form = $this->createForm(CommentType::class, $comment);
    $form->handleRequest($request);

    if($form->isSubmitted() && $form->isValid()){
        $data = $form->getData();
        $data->setUser($this->getUser());
        $data->setMedia($media);

        $em = $this->getDoctrine()->getManager();
        $em->persist($data);
        $em->flush();

        return new JsonResponse('Success!');

    }

    return $this->render('comment/newComment.html.twig', array(
        'media' => $media,
        'form'  => $form->createView()
    ));

}

}

newComment.html.twig

<form method="POST" id="commentForm" action="{{path('create_comment', {'media': media.id})}}">
{{ form_row(form.comment) }}
<button type="submit" id="submitButton" class="btn btn-xs btn-danger">{{ 'btn.send' |trans }}</button>

app.js

$('body').on('click','#submitButton',  function(e){

e.preventDefault();

var $form = $('#commentForm');
$.ajax({
    type: "POST",
    dataType: "json",
    url: 'http://demo/app_dev.php/media/16/',
    data: $form.serialize(),
    cache: false,
    success: function(response){
        $(".ajaxResponse").html(response);
        console.log(response);
    },
    error: function (response) {
        console.log(response);
    }
});

});

Upvotes: 0

Views: 1774

Answers (1)

Dave Maple
Dave Maple

Reputation: 8402

This should work for you to reload the element with class="comments" after your POST:

$('#submitButton').on('click', function (e) {
    e.preventDefault();
    var $form = $('#commentForm');

    $.ajax({
        type: "POST",
        dataType: "json",
        url: 'http://demo/app_dev.php/media/16/',
        data: $form.serialize(),
        cache: false,
        success: function (response) {
            $('.comments').load(window.location + ' .comments >  *');
            console.log(response);
        },
        error: function (response) {
            console.log(response);
        }
    });
});

Edit: As far as your second question regarding $request->isXmlHttpRequest() -- this method just looks for the X-Requested-With header with value of XMLHttpRequest. Are you testing for it on the first request or on the second request or on both requests? Can you take a look in Firebug or Chrome Tools and see if the header is on both requests?

Upvotes: 1

Related Questions