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

CC BY-SA 3.0
2014-07-16T20:44:44.450Z
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.
Jack Pallot
CC BY-SA 4.0
2020-01-22T19:13:40.420Z
More than 5 years later, this is still relevant, even for Craft 3 
nstCactus
CC BY-SA 3.0
2014-07-16T20:17:03.183Z
2014-07-16T20:17:03.183Z
Brandon Kelly
<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>

CC BY-SA 3.0
2014-07-16T17:55:04.867Z
Have you read through this? http://buildwithcraft.com/docs/plugins/field-types#binding-javascript
Brandon Kelly
CC BY-SA 3.0
2014-07-16T19:19:44.343Z
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.
Jack Pallot
<templating><plugins>
Namespace issues with binding Javascript
# 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.






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:




{% 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 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.  
> **username_2**: More than 5 years later, this is still relevant, even for Craft 3   

---

