This website version is not maintained anymore

Up to date documentation is available in Symfony 3.x website (see the dropdown menu above).

JavaScript options : events on buttons

Use before_up, before_down, before_add, before-duplicate and before_remove options to set a callback before applying an action to the collection.

Use after_up, after_down, after_add, after-duplicate and after_remove options to set a callback after applying an action to the collection.

Callback takes 2 arguments: collection contains the collection's root node and element the element in the collection that have been added, moved or deleted.

Note: element may be undefined on before_add event when add_at_the_end is set to true or when collection has no elements yet.

Your callback should return true or undefined to apply the action else it is cancelled or rollbacked.

---

This demostration is made of the following files (click to see on GitHub in a new tab):
    -     Controller/OptionsController.php
    -     Resources/views/Options/eventCallbacks.html.twig

---

Events before updating the collection

Add, move, remove values and press Submit.

Value

Value

Value

Submit

Value :a

Value :b

Value :c

Events after updating the collection

Add, move, remove values and press Submit.

Value

Value

Value

Submit

Value :a

Value :b

Value :c

Code used:

    <script type="text/javascript">

        $('.eventsBefore-collection').collection({
            before_up: function(collection, element) { return confirm("Do you really want to move the element up?"); },
            before_down: function(collection, element) { return confirm("Do you really want to move the element down?"); },
            before_add: function(collection, element) { return confirm("Do you really want to add the element?"); },
            before_remove: function(collection, element) { return confirm("Do you really want to delete the element?"); },
            before_duplicate: function(collection, element) { return confirm("Do you really want to duplicate the element?"); },
            allow_duplicate: true
        });

        $('.eventsAfter-collection').collection({
            after_up: function(collection, element) { return confirm("Do you really want to move the element up?"); },
            after_down: function(collection, element) { return confirm("Do you really want to move the element down?"); },
            after_add: function(collection, element) { return confirm("Do you really want to add the element?"); },
            after_remove: function(collection, element) { return confirm("Do you really want to delete the element?"); },
            after_duplicate: function(collection, element) { return confirm("Do you really want to duplicate the element?"); },
            allow_duplicate: true
        });

    </script>