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.

  • Sorry Justin, was responding from my phone, and totally missed that this is for the settings’ HTML, not your input’s HTML. Can you send me your field type - [email protected] - and I’ll see if there’s something we can do to make this easier. Commented Aug 25, 2014 at 4:19

1 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.

  • That's the method I am currently using to include JS. My FT works 100% with the getInputHtml() method, but it's not in the getSettingsHtml() method. I will give it a shot with the logic you mentioned and I will you know how it goes. Commented Aug 24, 2014 at 23:57
  • After looking more into this, I did make some headway on this and got it working better than before but still not there yet. I really need a JS event to be fired when the field type settings are show, ideally along with the parent DOM node so I can traverse through it. I can explain more about "why" I need this if necessary, but you can file this is as a request. Should be easy enough to add to the JS you already have. Commented Aug 25, 2014 at 0:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.