Execute an action before redirecting to the template in the confirm dialog

Question

The first field is the title of critic, the second field is the content of critic. When I write something in the title field automatically creates the object Critic in the db. In this situation I have a new row with the new critic but in the fileld of content the value is null. In this situation appears a confirm dialog.

When the confirm dialog appears, what should I do to click the "ok" button and, apart from being redirected to the new template, executing the eliminarCriticaAction of the Controller.

$('a').on('click', function(e) {
        if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
            if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
                if(! window.confirm( 'Falta el titulo' )) {
                    e.preventDefault();
                }               
            }
            else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
                return confirm('Falta el contenido');
            }   
        }
    });

Delete action of Controller:

public function eliminarCriticaAction($pysStr)
{
    $em = $this->getDoctrine()->getManager();
    $pys = $em->getRepository('PYSBundle:Pys')->findPys($pysStr);
    $usuario = $this->get('security.context')->getToken()->getUser();
    $critica = $em->getRepository('UsuarioBundle:Usuario')->findCritica($usuario, $pys);

    if(!$critica) 
    {
        throw new AccessDeniedException("No hay ninguna crítica que borrar");
    }

    $em->remove($critica);

    $em->flush();

}

EDIT

$('a').on('click', function(e) {
    var titulo = $('#criTitulo').val(), contenido = $('#criContenido').val();
    console.log(titulo);
    console.log(contenido);
    if ( ( titulo && !contenido ) || ( !titulo && contenido ) ) {
        e.preventDefault();
        console.log('Link clicked !');
        if (window.confirm( 'Falta el titulo' )) {
            $.get(Routing.generate('eliminar_critica.' + $('html').attr('lang'), { "_locale": $('html').attr('lang'), "pysStr": $('section').attr('pelicula') }));
            window.location.href = $(e.target).attr('href');
        }
    }
});

Answer 1

It is unclear to me what the route to your delete controller is. I will assume "/Pys/{pysStr}" with route name "my_pys". Also your current "pysStr" should be available as variable in your twig template. Assuming in your display controller you put:

'currentPysStr' => $pysStr    (put this in the render method are argument)

$('a').on('click', function(e) {
    if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
        if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
            if(! window.confirm( 'Falta el titulo' )) {
                e.preventDefault();
            } else {
                $.get({{ path('my_pys', {'pysStr': currentPysStr}) }})
            }
        }
        else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
            return confirm('Falta el contenido');
        }   
    }
});

Then in your delete controller you will have the current PysStr and this controller will only be called when you press OK in the confirmation dialog.

The same as in your order question you have a choice if you want to put this script in a twig template or use a global variable. ( https://stackoverflow.com/questions/18035337/translate-the-jeditable-plugins-attributes/18035436#18035436 )

EDIT: (after chat)

$('a').on('click', function(e) {
    var titulo = $('#criTitulo').val(),
        contenido = $('#criContenido').val();
    console.log(titulo);
    console.log(contenido);
    // Requested: XOR
    // One of the values must be set, the other one must not be set
    if ( ( titulo && !contenido ) || ( !titulo && contenido ) ) {
            e.preventDefault();
            console.log('Link clicked !');
            if (window.confirm( 'Falta el titulo' )) {
                var ajax;
                var url = Routing.generate('eliminar_critica.' + $('html').attr('lang'), { "_locale": $('html').attr('lang'), "pysStr": $('section').attr('pelicula') });
                console.log(url); // This is just here for debugging purposes
                ajax = $.get(url);
                ajax.done(function() {
                    window.location.href = $(e.target).attr('href');
                });
            }
    }
});

Placing window.location.href in done() guarantees the request was made before the page refresh

eliminarCriticaAction should give a Response that everything went on (2**) response. 204 is appropriate like this:

return new response('', 204); // 204: No Content

Answer 2

Take a look at the FOSJsRoutingBundle. It gives you the possibility to use your routes in JavaScript as well.

After installing the bundle, modify your Controller annotation:

eliminar_critica:
    locales: { es: "/eliminar-critica/{pysStr}/", en: "/delete-critic/{pysStr}/" }
    defaults: { _controller: UsuarioBundle:Default:eliminarCritica }
    options:
        expose: true

After that you can use this code of JavaScript to access the route:

Routing.generate('eliminar_critica', { pysStr: 10 });
// will result in /eliminar-critica/10/

$.get(Routing.generate('eliminar_critica', { pysStr: 10 }));
// will call /eliminar-critica/10/ without redirecting your browser

For further reading you should read about jQuery and AJAX

---

In your JavaScript:

$('a').on('click', function(e) {
    if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
        if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
            if(! window.confirm( 'Falta el titulo' )) {
                e.preventDefault();
            } else {
                // insert this line: (optional add a callback)
                $.get(Routing.generate('eliminar_critica', { pysStr: 10 }));
            }
        }
        else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
            return confirm('Falta el contenido');
        }   
    }
});

For a nice callback like

Your Entity has been deleted!

Take a look at the jQuery get() method here.