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?

1 Answer 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"));
    // Use the existing pane object if it exists
    this.$pane = $("#myelement.pane").data('pane');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.