<p>There’s no event for it, but any JS you include using <a href="http://buildwithcraft.com/classreference/services/TemplatesService#includeJs-detail" rel="nofollow">craft()->templates->includeJs()</a> from your field type's getSettingsHtml() method will get fired each time a new Matrix sub-field is created, so <strong>if you code your field type correctly</strong> with properly namespaced inputs] IDs/names, no event will be needed.</p>

<p>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 <a href="http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputs-detail" rel="nofollow">TemplatesService::namespaceInputs()</a> with the namespace <code>blockTypes[__BLOCK_TYPE__][fields][__FIELD__][typesettings]</code>, and those “__BLOCK_TYPE__” and “__FIELD__” placeholders are replaced dynamically by MatrixConfigurator’s Javascript before adding the settings HTML to the DOM.</p>

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



<pre class="lang-php prettyprint-override"><code>$js = "\$('#types-FieldTypeClassHandle-myInputId')" // ...
</code></pre>

<p>Matrix’s unpredictability shows why it’s important to <strong>not</strong> do that, and instead always use <a href="http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputId-detail" rel="nofollow">TemplatesService::namespaceInputId()</a> and <a href="http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputName-detail" rel="nofollow">namespaceInputName()</a> whenever you need to reference an input’s ID or name from your Javascript:</p>

<pre class="lang-php prettyprint-override"><code>$namespacedId = craft()-&gt;templates-&gt;namespaceInputId('myInputId');

$js = "\$('#{$namespacedId}')" // ...
</code></pre>

<p>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.</p>

CC BY-SA 3.0
2014-08-24T23:57:58.003Z
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.
Justin Kimbrell
CC BY-SA 3.0
2014-08-25T00:36:58.970Z
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.
Justin Kimbrell
CC BY-SA 3.0
2014-08-24T19:56:46.520Z
2014-08-26T12:26:50.623Z
2014-08-26T12:26:50.623Z
Brandon Kelly
<p>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 <code>$(document).ready()</code> 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.</p>

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

CC BY-SA 3.0
2014-08-25T04:19:18.930Z
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 - support@buildwithcraft.com - and I’ll see if there’s something we can do to make this easier.
Brandon Kelly
<plugin-development><custom-fieldtype>
Is there a JavaScript event that is triggered when a field type's settings html is displayed within Matrix?
# Is there a JavaScript event that is triggered when a field type's settings html is displayed within Matrix?

(Asked by: username_0 on 2014-08-24)

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.

**Tags:** plugin-development, custom-fieldtype

> **Comments:**
> **username_1**: 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 - support@buildwithcraft.com - and I’ll see if there’s something we can do to make this easier.  

---

## 1 answers

### Answer by username_1 on 2014-08-24. Score: 2

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.

> **Comments:**
> **username_0**: 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.  
> **username_0**: 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.  

---

