Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-24T23:57:58.003Z
Answers.Text: 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.
Answers.UserDisplayName: Justin Kimbrell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-25T00:36:58.970Z
Answers.Text: 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.
Answers.UserDisplayName: Justin Kimbrell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-24T19:56:46.520Z
Answers.LastActivityDate: 2014-08-26T12:26:50.623Z
Answers.LastEditDate: 2014-08-26T12:26:50.623Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-08-25T04:19:18.930Z
Comments.Text: 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.
Comments.UserDisplayName: Brandon Kelly
Tags: <plugin-development><custom-fieldtype>
Title: Is there a JavaScript event that is triggered when a field type's settings html is displayed within Matrix?
ThreadText: # 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 username_0, 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()](http://buildwithcraft.com/classreference/services/TemplatesService#includeJs-detail) 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()](http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputs-detail) 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:
  
  ```php
  $js = "\$('#types-FieldTypeClassHandle-myInputId')" // ...
  
  ```
  
  Matrix’s unpredictability shows why it’s important to **not** do that, and instead always use [TemplatesService::namespaceInputId()](http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputId-detail) and [namespaceInputName()](http://buildwithcraft.com/classreference/services/TemplatesService#namespaceInputName-detail) whenever you need to reference an input’s ID or name from your Javascript:
  
  ```php
  $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.  
  
  ---
  
  