Yellow Flag

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

Value : a

Value : b

Value : c

Events after updating the collection

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>