Answers.Body: <p>It’s not enough to simply define <code>$namespacedId</code> – you need to actually use it in your Javascript code.</p>
  
  <p>If you’re defining the javascript code in your template, you’ll need to pass the namespaced ID to your template, along with <code>name</code>, <code>id</code>, and <code>value</code>:</p>
  
  <pre><code>return craft()-&gt;templates-&gt;render("myplugin/my_input_template", array(
      'name'         =&gt; $name,
      'id'           =&gt; $id,
      'namespacedId' =&gt; $namespacedId,
      'value'        =&gt; $value
  ));
  </code></pre>
  
  <p>Then in your template, use the <code>id</code> variable within <code>id=</code> attributes, and the <code>namespacedId</code> variable within Javascript code:</p>
  
  <pre><code>&lt;input type="text" id="{{ id }}-output" name="{{ name }}" value="{{ value }}"&gt;
  &lt;span id="{{ id }}-value"&gt;&lt;/span&gt;
  &lt;input id="{{ id }}-input" type="range" value="{{ value }}" min="0" max="1000" step="0"&gt;
  
  {% set js %}
      $("#{{ namespacedId }}-input")[0].oninput = function () {
          $('#{{ namespacedId }}-value').html(this.value);
      };
  {% endset %}
  
  {% includeJs js %}
  </code></pre>
  
  <p><em>(I’ve cleaned up your HTML a little, besides the formatting – I added a missing quote after <code>min="0</code>, and removed the entire <code>name=</code> attribute from the 3rd input, since the first input seems like it will already take care of that.)</em></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-16T20:44:44.450Z
Answers.Text: Thanks Brandon, that works perfectly. 
  
  I appreciate you cleaning up the source too. Although this isn't the exact code I'm using, it's more of a late night cut and paste job.
  
  As usual, awesome support from the Craft team! Thanks.
Answers.UserDisplayName: Jack Pallot
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-22T19:13:40.420Z
Answers.Text: More than 5 years later, this is still relevant, even for Craft 3 
Answers.UserDisplayName: nstCactus
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-07-16T20:17:03.183Z
Answers.LastActivityDate: 2014-07-16T20:17:03.183Z
Answers.UserDisplayName: Brandon Kelly
Body: <p>I'm building a plugin that relies on Javascript to function correctly. Having tried different methods, I can't get the ID names to remain consistent.</p>
  
  <p>Here's an example of the code that is being output.</p>
  
  <pre><code>&lt;input type="text"
  id="fields-slider-output"
  name="fields[slider]"
  value="539"&gt;
  
  &lt;span id="fields-value"&gt;&lt;/span&gt;
  
  &lt;input
  id="fields-input"
  type="range"
  name="fields[slider]"
  value="539"  min="0 max="1000" step="0"&gt;
  </code></pre>
  
  <p>The first input is a text input, and displays the ID as you would expect. The span element below only contains "fields-", and leaves out the name of the field. The same happens with the range input, which is the most surprising, as it's a form input with a name.</p>
  
  <p>When using JavaScript, the "fields-" namespace is left out entirely, which means that the Javascript can't bind to an element.</p>
  
  <pre><code>$("#slider-input")[0].oninput = function () {
      $('#slider-value').html(this.value);
  };
  </code></pre>
  
  <p>I'm using this code from the Craft docs.</p>
  
  <pre><code>$id = craft()-&gt;templates-&gt;formatInputId($name);
  $namespacedId = craft()-&gt;templates-&gt;namespaceInputId($id);
  </code></pre>
  
  <p>I've also looked into the namespacing HTML docs (<a href="http://buildwithcraft.com/docs/apis/templatesservice#namespacing-html" rel="nofollow">http://buildwithcraft.com/docs/apis/templatesservice#namespacing-html</a>) with little success.</p>
  
  <p>Does anyone know a possible solution to this? Bearing in mind this Fieldtype requires Matrix support, so using a class instead of an ID is not an option.</p>
  
  <p>Thanks.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-07-16T17:55:04.867Z
Comments.Text: Have you read through this? http://buildwithcraft.com/docs/plugins/field-types#binding-javascript
Comments.UserDisplayName: Brandon Kelly
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2014-07-16T19:19:44.343Z
Comments.Text: That was one of the things I looked at first of all, but the file can't be included externally, or using includeJs in fieldtype.php, because it uses variables in the template file to do things like change the input value. If I added the JS in the fieldtype.php file, these values wouldn't exist yet. I think that's where I'm getting stuck.
Comments.UserDisplayName: Jack Pallot
Tags: <templating><plugins>
Title: Namespace issues with binding Javascript
ThreadText: # Namespace issues with binding Javascript
  
  (Asked by: username_0 on 2014-07-16)
  
  I'm building a plugin that relies on Javascript to function correctly. Having tried different methods, I can't get the ID names to remain consistent.
  
  Here's an example of the code that is being output.
  
  ```
  <input type="text"
  id="fields-slider-output"
  name="fields[slider]"
  value="539">
  
  <span id="fields-value"></span>
  
  <input
  id="fields-input"
  type="range"
  name="fields[slider]"
  value="539"  min="0 max="1000" step="0">
  
  ```
  
  The first input is a text input, and displays the ID as you would expect. The span element below only contains "fields-", and leaves out the name of the field. The same happens with the range input, which is the most surprising, as it's a form input with a name.
  
  When using JavaScript, the "fields-" namespace is left out entirely, which means that the Javascript can't bind to an element.
  
  ```
  $("#slider-input")[0].oninput = function () {
      $('#slider-value').html(this.value);
  };
  
  ```
  
  I'm using this code from the Craft docs.
  
  ```
  $id = craft()->templates->formatInputId($name);
  $namespacedId = craft()->templates->namespaceInputId($id);
  
  ```
  
  I've also looked into the namespacing HTML docs (<http://buildwithcraft.com/docs/apis/templatesservice#namespacing-html>) with little success.
  
  Does anyone know a possible solution to this? Bearing in mind this Fieldtype requires Matrix support, so using a class instead of an ID is not an option.
  
  Thanks.
  
  **Tags:** templating, plugins
  
  > **Comments:**
  > **username_1**: Have you read through this? http://buildwithcraft.com/docs/plugins/field-types#binding-javascript  
  > **username_0**: That was one of the things I looked at first of all, but the file can't be included externally, or using includeJs in fieldtype.php, because it uses variables in the template file to do things like change the input value. If I added the JS in the fieldtype.php file, these values wouldn't exist yet. I think that's where I'm getting stuck.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-07-16. Score: 4 | Accepted answer
  
  It’s not enough to simply define `$namespacedId` – you need to actually use it in your Javascript code.
  
  If you’re defining the javascript code in your template, you’ll need to pass the namespaced ID to your template, along with `name`, `id`, and `value`:
  
  ```
  return craft()->templates->render("myplugin/my_input_template", array(
      'name'         => $name,
      'id'           => $id,
      'namespacedId' => $namespacedId,
      'value'        => $value
  ));
  
  ```
  
  Then in your template, use the `id` variable within `id=` attributes, and the `namespacedId` variable within Javascript code:
  
  ```
  <input type="text" id="{{ id }}-output" name="{{ name }}" value="{{ value }}">
  <span id="{{ id }}-value"></span>
  <input id="{{ id }}-input" type="range" value="{{ value }}" min="0" max="1000" step="0">
  
  {% set js %}
      $("#{{ namespacedId }}-input")[0].oninput = function () {
          $('#{{ namespacedId }}-value').html(this.value);
      };
  {% endset %}
  
  {% includeJs js %}
  
  ```
  
  *(I’ve cleaned up your HTML a little, besides the formatting – I added a missing quote after `min="0`, and removed the entire `name=` attribute from the 3rd input, since the first input seems like it will already take care of that.)*
  
  > **Comments:**
  > **username_0**: Thanks username_1, that works perfectly.   I appreciate you cleaning up the source too. Although this isn't the exact code I'm using, it's more of a late night cut and paste job.  As usual, awesome support from the Craft team! Thanks.  
  > **username_2**: More than 5 years later, this is still relevant, even for Craft 3   
  
  ---
  
  