Is there a JavaScript event that is triggered when a field type's settings html is displayed within Matrix?

Question

Google Maps for Craft has a settings page that uses JavaScript that aids the user in setting up their Google Maps field. So the user can set a default center and zoom for the map, and they do this by manipulating a map in the settings page. All works fine when creating a standard field. I used the $(document).ready() method to trigger my code, but since Matrix creates these fields after the DOM has already triggered that event, my code isn't getting instantiated. Matrix for EE has a similar callback function that is triggered, so I assume Matrix for Craft has the same thing.

Any code examples for listening for when new Matrix fields are created? I tried browsing through the existing field type code and MatrixConfigurator.js but couldn't find any examples yet.

Answer 1

There’s no event for it, but any JS you include using craft()->templates->includeJs() from your field type's getSettingsHtml() method will get fired each time a new Matrix sub-field is created, so if you code your field type correctly with properly namespaced inputs] IDs/names, no event will be needed.

The thing about Matrix is, there’s no way to predict what the actual input IDs/names are going to be when they are added to the DOM, as they will be run through TemplatesService::namespaceInputs() with the namespace blockTypes[__BLOCK_TYPE__][fields][__FIELD__][typesettings], and those “__BLOCK_TYPE__” and “__FIELD__” placeholders are replaced dynamically by MatrixConfigurator’s Javascript before adding the settings HTML to the DOM.

Regular field settings get namespaced too, but in a more predictable way (their namespace will always be types[FieldTypeClassHandle]), so it can be tempting to just hard-code the namespaced IDs directly into your Javascript, like this:

$js = "\$('#types-FieldTypeClassHandle-myInputId')" // ...

Matrix’s unpredictability shows why it’s important to not do that, and instead always use TemplatesService::namespaceInputId() and namespaceInputName() whenever you need to reference an input’s ID or name from your Javascript:

$namespacedId = craft()->templates->namespaceInputId('myInputId');

$js = "\$('#{$namespacedId}')" // ...

When you let TemplatesService generate the namespaced IDs/names for you, you can be sure that it will always give you an ID/name that will match whatever the actual ID/name will be in the DOM.