Sf2 : FOS UserBundle : registration AJAX

Question

I'm trying to register a user with AJAX.

I created an event listener on FOSUserEvents::REGISTRATION_SUCCESS

So I'm trying to know is an AJAX request has been made but the response on my client side doesn't satisfy me.

Here my event listener, note that the response sent is a test so of course there should be no "else" condition.

<?php

namespace SE\AppBundle\EventListener;

use FOS\UserBundle\FOSUserEvents;
use FOS\UserBundle\Event\FormEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\RequestStack;

/**
 * Ajax listener on FOS UserBundle registration
 */
class RegistrationListener implements EventSubscriberInterface
{
    private $router;

    public function __construct(RequestStack $RequestStack)
    {
        $this->requestStack = $RequestStack;
    }

    /**
     * {@inheritDoc}
     */
    public static function getSubscribedEvents()
    {
        return array(
            FOSUserEvents::REGISTRATION_SUCCESS => 'onRegistrationSuccess'
        );
    }

    public function onRegistrationSuccess()
    {

        $request = $this->requestStack->getCurrentRequest();

        if ($request->isXmlHttpRequest()) {

            $array = array( 'success' => true ); // data to return via JSON
            $response = new Response( json_encode( $array ) );
            $response->headers->set( 'Content-Type', 'application/json' );

            return $response;

        }
        else{
            $array = array( 'success' => false ); // data to return via JSON
            $response = new Response( json_encode( $array ) );
            $response->headers->set( 'Content-Type', 'application/json' );

            return $response;
        }
    }
}

services.yml:

se.app.listener.registration:
    class: SE\AppBundle\EventListener\RegistrationListener
    arguments: ["@request_stack"]
    tags:
        - { name: kernel.event_subscriber }

javascript:

// Submit the request
$.ajax({
    type        : 'POST',
    url         : url,
    data        : data,
    success     : function(data, status, object) {

        console.log('success');
        console.log(data);

    },
    error: function(data, status, object){
        console.log('error');
        console.log(data);
    }
});

Firstly the weird thing is that it goes in the error condition.

The console.log (data) is returned the DOM of the registration success page :

...
<p>Congrats [email protected], your account is now activated.</p> 
...

So does this logic should be here or should I override the controller? What am I doing wrong?

chalasr chalasr · Accepted Answer · 2016-04-03T11:20:32

Because of the level of the REGISTRATION_SUCCESS event, you can't return a response directly from the EventListener.

You need to grab the FormEvent and modify its response.
Lets pass it as argument:

class RegistrationListener implements EventSubscriberInterface
{
    // ...

    public function onRegistrationSuccess(FormEvent $event)
    {
        $request = $this->requestStack->getCurrentRequest();

        // Prepare your response
        if ($request->isXmlHttpRequest()) {
            $array = array( 'success' => true ); // data to return via JSON
            $response = new Response( json_encode( $array ) );
            $response->headers->set( 'Content-Type', 'application/json' );
        } else {
            $array = array( 'success' => false ); // data to return via JSON
            $response = new Response( json_encode( $array ) );
            $response->headers->set( 'Content-Type', 'application/json' );
        }

        // Send it
        $event->setResponse($response);
    }
}

And it should work.

Note There is an issue about this event where the response cannot be modified.
If the problem occurs, you need to set a low priority in your event subscribing:

public static function getSubscribedEvents()
{
    return [
        FOSUserEvents::REGISTRATION_SUCCESS => [
            ['onRegistrationSuccess', -10],
        ],
    ];
}

See #1799.

EDIT

Note You should use a JsonResponse instead of json_encode your data and set the Content-Type manually.

To grab the form itself and its eventual errors, you can do this:

public function onRegistrationSuccess(FormEvent $event)
{
    $form = $event->getForm();

    if (count($validationErrors = $form->getErrors()) == 0) {
        return $event->setResponse(new JsonResponse(['success' => true]));
    }

    // There is some errors, prepare a failure response
    $body = [];

    // Add the errors in your response body
    foreach ($validationErrors as $error) {
        $body[] = [
            'property' => $error->getPropertyPath() // The field
            'message'  => $error->getMessage() // The error message
        ];
    }

    // Set the status to Bad Request in order to grab it in front (i.e $.ajax({ ...}).error(...))
    $response = new JsonResponse($body, 400); 
    $event->setResponse($response);
}

But because it's a success event, you may need to override the method itself.

Sf2 : FOS UserBundle : registration AJAX

1 Answers