PHPackages                             ninsuo/symfony-collection - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ninsuo/symfony-collection

ActiveLibrary[Utility & Helpers](/categories/utility)

ninsuo/symfony-collection
=========================

A jQuery plugin that manages adding, deleting and moving elements from a Symfony collection

2.1.33(6y ago)4392.2M↓35.6%86[54 issues](https://github.com/ninsuo/symfony-collection/issues)[5 PRs](https://github.com/ninsuo/symfony-collection/pulls)5MITJavaScript

Since Jun 24Pushed 4y ago21 watchersCompare

[ Source](https://github.com/ninsuo/symfony-collection)[ Packagist](https://packagist.org/packages/ninsuo/symfony-collection)[ RSS](/packages/ninsuo-symfony-collection/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependenciesVersions (42)Used By (5)

symfony-collection
==================

[](#symfony-collection)

A jQuery plugin that manages adding, deleting and moving elements from a Symfony collection

[![sample](https://camo.githubusercontent.com/9699dfb4dc24d380247c6bcfbca55206a10c2eef46139c6706b5bfe6bb9ad6aa/687474703a2f2f6f636172696e612e66722f6d65646961732f636f6c6c656374696f6e2e706e67)](https://camo.githubusercontent.com/9699dfb4dc24d380247c6bcfbca55206a10c2eef46139c6706b5bfe6bb9ad6aa/687474703a2f2f6f636172696e612e66722f6d65646961732f636f6c6c656374696f6e2e706e67)

This is not really difficult to manage your collections using the `data-prototype` Symfony provides. But after using several times collections, it appeared useful to me to create a jQuery plugin to do this job.

This is even more true when you need your elements to be moved up and down or added at a specific position: as the form will be proceeded using field names, we should swap field contents or field names instead of moving fields themselves to get the job done. That's not really friendly in javascript, so this plugin also aims to deal with that.

Live demo
=========

[](#live-demo)

Demo of this plugin is available live at:

Demo source code is here:

Installation
============

[](#installation)

This plugin is a set of 2 files:

- the jquery plugin itself, it should be located with your assets
- a twig form theme that will ease use of it, it should be located in your views

Installation using Composer
---------------------------

[](#installation-using-composer)

To automate the plugin download and installation, edit composer.json and add:

```
    "require": {
        ...
        "ninsuo/symfony-collection": "dev-master"
    },
    "scripts": {
        "post-install-cmd": [
            ...
            "Fuz\\Symfony\\Collection\\ScriptHandler::postInstall"
        ],
        "post-update-cmd": [
            ...
            "Fuz\\Symfony\\Collection\\ScriptHandler::postUpdate"
        ]
    }
```

Files will be automatically installed at:

- symfony-collection form theme will be installed in `app/Resources/views`
- symfony-collection jquery plugin will be installed in `web/js`.

Tips:

- Replace `dev-master` by the current stable version.
- Put script handlers before Symfony's installAssets if you wish to benefit from your assets optimizations.
- Add `app/Resources/views/jquery.collection.html.twig` and `web/js/jquery.collection.js` to your `.gitignore`

If you prefer to install the plugin manually, you can use:

```
composer require ninsuo/symfony-collection
```

You'll have to move:

- `vendor/ninsuo/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`)
- `vendor/ninsuo/symfony-collection/jquery.collection.html.twig` in your views (for example in `app/Resources/views`)

Installation using npm
----------------------

[](#installation-using-npm)

```
npm install ninsuo/symfony-collection
```

You'll have to move:

- `node_modules/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`).
- `node_modules/symfony-collection/jquery.collection.html.twig` wherever you want in your views (for example in `app/Resources/views`)

Installation using Bower
------------------------

[](#installation-using-bower)

```
bower install ninsuo/symfony-collection
```

You'll have to move:

- `bower_components/symfony-collection/jquery.collection.js` in your assets (for example in `web/js`)
- `bower_components/symfony-collection/jquery.collection.html.twig` in your views (for example in `app/Resources/views`)

Basic usage
===========

[](#basic-usage)

A simple collection
-------------------

[](#a-simple-collection)

Your collection type should contain `prototype`, `allow_add`, `allow_remove` options (depending on which buttons you require of course). And a class that will be used as a selector to run the collection plugin.

```
->add('myCollection', 'collection',
   array (
        // ...
        'allow_add' => true,
        'allow_remove' => true,
        'prototype' => true,
        'attr' => array(
            'class' => 'my-selector',
        ),
))
```

Then, render your form after applying the given custom theme:

```
     {% form_theme myForm 'jquery.collection.html.twig' %}
     {{ form(myForm) }}
```

Finally, put the following code at the bottom of your page.

```

        $('.my-selector').collection();

```

Using a form theme
------------------

[](#using-a-form-theme)

Most of the time, you will need to create a [form theme](https://symfony.com/doc/current/form/form_customization.html)that will help you render your collection and its children in a fancy way.

- in your form type(s), overwrite the `getBlockPrefix()` method and return a good name.

```
// Fuz/AppBundle/Form/AddressType.php