<p>I was able to resolve this by testing to see if the pane existed before re-instantiating the element. Happy to consider another answer if someone can explain what is going on better. For now, the following worked:</p>

<pre><code>// Check to see if an element was already registered as a `Craft.Pane`:
if (!$("#myelement.pane").data('pane'))
{
    // Create a pane object if it is not
    this.$pane = new Craft.Pane($("#myelement.pane"));
}
else
{
    // Use the existing pane object if it exists
    this.$pane = $("#myelement.pane").data('pane');
}
</code></pre>

CC BY-SA 3.0
2017-10-16T00:44:29.807Z
2017-10-16T00:44:29.807Z
Ben Parizek
<p>Without going into too much detail, I have a plugin where I'm trying to manage two different sets of tabs with some custom javascript. When the object initializes, I need to add a <code>pane</code> from the page layout to the object. Something like:</p>

<pre><code>this.$pane = new Craft.Pane($(".pane"));
</code></pre>

<p>That line of code kinda works. However, when the page loads the console reports:</p>

<pre><code>Double-instantiating a pane on an element
</code></pre>

<p>If I remove the above line of code <code>this.$pane = new Craft.Pane($(".pane"));</code>, the console log message goes away. With the line of code some things work. Without the line of code other things work. I need all the things to work at the same time.</p>

<p>I'm struggling to know the right question to ask, so please point me in the right direction if I am off the mark. <strong>Is it possible to check if there is an existing <code>Craft.Pane</code> object that exists before I try to create a <code>new Craft.Pane</code> object?</strong></p>

<plugin-development><javascript>
How to avoid "Double-instantiating a pane on an element"
# How to avoid "Double-instantiating a pane on an element"

(Asked by: username_0 on 2017-10-14)

Without going into too much detail, I have a plugin where I'm trying to manage two different sets of tabs with some custom javascript. When the object initializes, I need to add a pane from the page layout to the object. Something like:
this.$pane = new Craft.Pane($(".pane"));

That line of code kinda works. However, when the page loads the console reports:
Double-instantiating a pane on an element

If I remove the above line of code this.$pane = new Craft.Pane($(".pane"));, the console log message goes away. With the line of code some things work. Without the line of code other things work. I need all the things to work at the same time.
I'm struggling to know the right question to ask, so please point me in the right direction if I am off the mark. Is it possible to check if there is an existing Craft.Pane object that exists before I try to create a new Craft.Pane object?

**Tags:** plugin-development, javascript


---

## 1 answers

### Answer by username_0 on 2017-10-16. Score: 1

I was able to resolve this by testing to see if the pane existed before re-instantiating the element. Happy to consider another answer if someone can explain what is going on better. For now, the following worked:
// Check to see if an element was already registered as a `Craft.Pane`:
if (!$("#myelement.pane").data('pane'))
{
    // Create a pane object if it is not
    this.$pane = new Craft.Pane($("#myelement.pane"));
}
else
{
    // Use the existing pane object if it exists
    this.$pane = $("#myelement.pane").data('pane');
}


---

