Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-10-16T00:44:29.807Z
Answers.LastActivityDate: 2017-10-16T00:44:29.807Z
Answers.UserDisplayName: Ben Parizek
Body: <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>
  
Tags: <plugin-development><javascript>
Title: How to avoid "Double-instantiating a pane on an element"
ThreadText: # 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');
  }
  
  ```
  
  
  ---
  
  