How to re-init a combotree after destroy it?

[mrhieuit]

I want re-init a combotree after destroy it. How i do it?

Eg1: init on focus and destroy on blur:

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
        isSelectable: false,
        subs: [
            {
                id: 10,
                title: 'Pigeon'
            }, {
                id: 11,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }, {
        id: 2,
        title: 'Rabbit'
    }, {
        id: 3,
        title: 'Fox'
    }, {
        id: 5,
        title: 'Cats',
        isSelectable: false,
        subs: [
            {
                id: 50,
                title: 'Kitty'
            }, {
                id: 51,
                title: 'Bigs',
                isSelectable: false,
                subs: [
                    {
                        id: 510,
                        title: 'Cheetah'
                    }, {
                        id: 511,
                        title: 'Jaguar'
                    }, {
                        id: 512,
                        title: 'Leopard'
                    }
                ]
            }
        ]
    }, {
        id: 6,
        title: 'Fish'
    }
];

var comboTree1;
jQuery(document).ready(function ($) {
    $('#justAnInputBox').focus(function () {
        comboTree1 = $('#justAnInputBox').comboTree({
            source: SampleJSONData,
            isMultiple: true,
            cascadeSelect: false,
            collapse: true
        });
    }).blur(function () {
        comboTree1.destroy(); --> Cannot read property 'destroy' of undefined
    });
});

Eg2:

//Init comboTree --> success
comboTree1 = $('#justAnInputBox').comboTree({
    source: SampleJSONData,
    isMultiple: true,
    cascadeSelect: false,
    collapse: true
});

// Remove plugin  --> success
comboTree1.destroy();

//Re-init comboTree --> NOT WORK
comboTree1 = $('#justAnInputBox').comboTree({
    source: SampleJSONData,
    isMultiple: true,
    cascadeSelect: false,
    collapse: true
});

Look forward to your feedback. Thanks!

[HolyOne]

Also having the same problem, I have multiple records on my site, i try to reinit ComboTree everytime I click one of them.

[mrhieuit]

Hi @erhanfirat ,

Do you have any idea about this? Please help me resolve this issues.

[ajaychig]

I have drop-down. Based on drop-down selection,need to change the JSON value for the input combotree.
But the old JSON source values still exist. Any idea how can we achieve this.

[juneyoung]

I have faced with similar problem and in my case, it comes out there is a bug(?) in destroy method.

My specific scenario:

• Got primary fields in the form
• When a primary field changes, it will change comboTree input values(meaning json source)

<div id="comboTree924938Wrapper" class="comboTreeWrapper">
	<div id="comboTree924938InputWrapper" class="comboTreeInputWrapper">
		<input id="client" name="client" placeholder="client" class="comboTreeInputBox">
	<div id="comboTree924938ArrowBtn" class="comboTreeArrowBtn" type="button"><span class="mdi mdi-chevron-down 	comboTreeArrowBtnImg"> 

	...
	
	</div>
</div>

DOM looks like above when comboTree initialized, but in my case there is still comboTreeWrapper in the DOM after call $(elem).comboTree('destroy') ... So I cleaned up the comboTree area and init again,

Below is how I solved the problem in my specific case

function initMultiSelect(domId, data){
    let targetDiv = document.myForm.querySelector(`#${domId}`);
    let replicaDom = targetDiv.cloneNode(false);
    let multiSelectDom = targetDiv;
    try {
        let $domElem = $(targetDiv);
        let panel =$domElem.parents().eq(2)[0];
        let comboTreeWrapper = $domElem.parents().eq(1)[0];
        if(comboTreeWrapper.className.indexOf('comboTreeWrapper') >= 0) {
            comboTreeWrapper.remove();
            panel.appendChild(replicaDom);
            multiSelectDom = replicaDom;
        }
    } catch (e){=
        console.error('Failed to search comboTreeWrapper', e);
    } finally {
        $(multiSelectDom).comboTree({
            source : data,
            isMultiple: true
        });
    }
}

[h3rb]

I've also run into this problem. It returns "undefined" .. this is when you attempt to reapply a comboTree to an element where its comboTree has been previously destroyed. In the constructor, at end of javascript, it has no test for length = 0, and this leads me to believe that the $.data() wasn't removed.

In comboTreePlugin.js:

  ComboTree.prototype.destroy = function () {
    this.unbind();
    this._elemWrapper.before(this._elemInput);
    this._elemWrapper.remove();
    //this._elemInput.removeData('plugin_' + comboTreePlugin);
  }

The line that removes the data is commented out for some reason...

[RArielVillalobos]

I've also run into this problem. It returns "undefined" .. this is when you attempt to reapply a comboTree to an element where its comboTree has been previously destroyed. In the constructor, at end of javascript, it has no test for length = 0, and this leads me to believe that the $.data() wasn't removed.

In comboTreePlugin.js:

  ComboTree.prototype.destroy = function () {
    this.unbind();
    this._elemWrapper.before(this._elemInput);
    this._elemWrapper.remove();
    //this._elemInput.removeData('plugin_' + comboTreePlugin);
  }

The line that removes the data is commented out for some reason...

exactly