Access add and remove events with the Craft Element Selector?

Question

Is there any way to access an event, and trigger some function, when an element is added / removed with the Craft Element Selector logic available in Garnish?

I am working on a custom field type and to keep everything tidy I only want to show a set of options when an asset is selected.

Answer 1

As of Craft 2.4.2688:

It is now possible to access Craft.BaseElementSelectInput objects from their container elements, via .data('elementSelect').

On select element:

$('#theElementSelectField').data('elementSelect').on('selectElements', function(e) {
    console.log(e); // Take a look
    // Do stuff here when elements are selected...
});

On remove element:

$('#theElementSelectField').data('elementSelect').on('removeElements', function(e) {
    console.log(e);
    // Do stuff here when elements are removed...
});

NB. If you are using the Craft macros to build the select element inputs, make sure your javascript is run after craft has done its magic with the input field.

---

Thanks to Brandon Kelly & Lindsey D

Answer 2

Edit For Craft installs 2.4.2688 or later, see Sam Hibberd's answer!

---

@AaronBerkowitz is correct – unfortunately there's no way, currently.

Here's a workaround, which uses setInterval to poll the elementselects in the DOM for changes. If any of the elementselects have changed, the container will trigger a custom elementselectchange event, which you can listen for:

$('.elementselect').on('elementselectchange', onElementSelectChange);

This is hardly an elegant or best practice solution, but in this case it's the best I can think of. Instead of polling it might be better to bind a click listener to the elementselect's add/delete buttons, however as elementselects can exist in so many different contexts, writing a reliable event listener is really tricky. In any case, should P&T add a "elementChange" event or the like down the line, you'd likely be able to rip out the poller and keep your event handler.

The code in the Gist can be copy pasted as-is to a JS file and added to the Craft CP like this (in your plugin's main class):

if (!craft()->request->isAjaxRequest() && craft()->request->isCpRequest())
{
    craft()->templates->includeJsResource('myplugin/js/elementSelectChange.js');
}

The test for AJAX requests is important, if you leave it out the script will execute every time an Assets modal opens etc, which will make your event handlers fire multiple times.