How to write a controller in Symfony2 to edit content with Jeditable

Question

I'm using jeditable plugin for JavaScript and I want to implement it in my Symfony2 project. I want to edit a name with the plugin and that name to be edited in the database, too, not the change to be gone when I refresh the page, but in my case, it's gone. :(

I'm almost sure that the controller shouldn't be in that way and the problem is from it, but how exactly to write it? Here it is:

public function editCategoryAction(Request $request, $id)
{   
    $category = $this->repository->find($id);      
    $form = $this->createForm(new CategoryType(), $category);

    if ($request->isMethod('POST')) {
        $form->bind($request);

        if ($form->isValid()) {
            $this->em->persist($category);
            $this->em->flush();

            return $this->redirect($this->generateUrl('categories'));
        }
    }

    return $this->render(
        'AcmeBudgetTrackerBundle:Categories:categories.html.twig', array( 
            'form' => $form->createView()));      
}

This is my template:

    <a href="{{ path('edit_category', { 'id': cat.id}) }}">
        <strong class="edit">
            {{ cat.name }}
        </strong>
    </a> 

<script>
    var token = "{{form._token.vars.value}}";
    var path = "{{ path('edit_category', { 'id': cat.id}) }}";
</script>

And this is in the .js file:

(function(){
     $('.edit').editable(function (value, settings) {
            var data = {};
            data[this.id] = value;
            data["_token"] = token;
            console.log(path);
            console.log(data);
            $.post(path, data);
                return(value);
            }, {
                indicator:'Saving...'
            });
}) ();

The output in the console looks fine:

/BudgetTracker/web/app_dev.php/edit_category/52
Object {: "Edu", _token: "9d29860b59ccafbc265ea12346c91fa7e378cc97"} 

but the problem is that nothing is posted to the database and when I hit refresh the change I made is gone.

Can you please help me to solve this? Thanks in advance! :)

Answer 1

I think you don't need to use the form component here, you only want to handle a string. So I'll explain a way to do.

JavaScript:

$('.edit').editable(path);

Controller:

public function editCategoryAction(Category $category)
{   
    //check if exists/valid

    //get the text sent from jeditable
    $name = $this->request->get('value');
    $category->setName($name);

    $em = $this->getDoctrine()->getManager();
    $em->persist($category);
    $em->flush();
    //return the name value to jeditable so it can display it
    return new Response($name);     
}

Twig:

<strong class="edit">{{ cat.name }}</strong>

<script>
    var path = "{{ path('edit_category', { 'id': cat.id}) }}";
</script>

jEditable sends edited text named as 'value', so you can get it in the controller. In your controller, you implicitly use paramconverter to get the category from the id in the URL. And that should be OK now.

Note that you can use FORJsRoutingBundle, if you want to avoid mixing twig with javascript in order to access path.