How to use query builders, with dynamic filters, in different tabs within same view?

[shrabanee]

Hi,

I am trying to use the query builder inside some tabs. I have multiple tabs in my view. I want to create different querybuilders for each of them. The code I am using is as below:-

<div data-bind="foreach: tabList">
    <div class="builder"></div>
    <br/>
    <label>
        Tab name <input class="tabName" type="text"/>
    </label>
    <div class="saveBtnAdmin parse-mongo" data-bind="click : $root.saveTab">Create new tab</div>
</div>

this.tablist = ko.observableArray([{tna: 'abc'},{tna : 'mno'},{tna : 'pqr'}]);

 $('.builder').queryBuilder({
      filters: [
                {
                    id: 'url',
                    label: 'URL',
                    type: 'string'
                },
                {
                    id: 'nal',
                    label: 'Org Name',
                    type: 'string'
                },
                {
                    id: 'ca',
                    label: 'Created at',
                    type: 'date',
                    plugin: "showCalender"
                }
            ]
});

var objArr= [{
        id: 'event1',
        label: "Event1",
        type: 'date',
    },
    {
        id: 'event2',
        label: "Event2",
        type: 'date'
    },
    {
        id: 'event3',
        label: "Event3",
        type: 'integer'
    }];

$(".builder").queryBuilder('addFilter', objArr, 3);

Getting error in console as (Uncaught ConfigError: Missing filters list). It added the first three options (which is already there in 'filters' option) in filter drop down, but not the options I am trying to add to it later.

First time when "QueryBuilder.prototype.init" function is being called, this.filters is with length 3 (since I have given 3 filters initially), but when second time it is being called this.filters is coming with length 0.

Is it I need to call "$('.builder').queryBuilder" multiple times to do the configs again?

[mistic100]

Should I repeat that I can't help without a live example ?

You are showing a small part of your code, of a framework I absolutely don't know, what can I do ?

[shrabanee]

check the link

Error is coming in console.

[mistic100]

You are using $('#builder') and then $('.builder') so of course it does not work.

And as I understand your are creating multiple builders, one for each tab, perhaps you should wait the tabs are builded before initializing the builders. This is always the same problematic when using jQuery plugins with frameworks like React/Angular etc.

Now I don't know Knockout, and I won't learn Knockout.