selectize plugin - ERROR TypeError: d[e.plugin] is not a function

[surajMetkar33]

I am working on including jquery query builder in angular 2 cliproject. till now i have am done with everything that is basic for the query builder. currently working on selectize plugin. but when i used the code from : http://querybuilder.js.org/demo.html for seletize i am getting below error. not able to understand the root cause of this and how to overcome it.

angluar CLi.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "query-builder"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css",
        "../node_modules/jQuery-QueryBuilder/doc/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "class": {
      "spec": false
    },
    "component": {}
  }
}

formuladetails.ts:

import { Component, OnInit, AfterViewInit, Input } from '@angular/core'
import { SelectItem } from 'primeng/primeng';

declare var $: any;

@Component({
    selector: 'formuladetails',
    templateUrl: './formulaDetail.html',
    styleUrls: ['./formulaDetail.css']
})
export class formulaDetailComponent implements AfterViewInit, OnInit {

    trackingType: SelectItem[] = [];
    ruleName : string = 'RuleNameGoesHereWithOutSpaceAndSpecialCharecters';
    description: string = 'Rule Description';
    priority: number = 3;
    enabled: boolean = true;

    protected rules_basic = {
        condition: 'AND',
        rules: [{
            id: 'category',
            operator: 'contains',
            value: 11
        }]
    };

    ngOnInit() {
        this.trackingType.push({label:'Send Shipment to Fourkites with Temperature Tracking', value:'Send Shipment to Fourkites with Temperature Tracking'});
        this.trackingType.push({label:'Send Shipments to Fourkites without Temperature Tracking', value:'Send Shipments to Fourkites without Temperature Tracking'});
        this.trackingType.push({label:'Send Shipments to Macropoint without Temperature Tracking', value:'Send Shipments to Macropoint without Temperature Tracking'});
        this.trackingType.push({label:'Send Shipments/Parcel to Agile', value:'Send Shipments/Parcel to Agile'});
        this.trackingType.push({label:'Send Shipments/Parcel to UPS', value:'Send Shipments/Parcel to UPS'});
        this.trackingType.push({label:'Send Shipments/Parcel to Fedex', value:'Send Shipments/Parcel to Fedex'});
        this.trackingType.push({label:'Send Shipments/Parcel to USPS', value:'Send Shipments/Parcel to USPS'});
    }

    onKeyPress(event) {
        var k;  
        k = event.charCode;
        return((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || (k >= 48 && k <= 57));
    }

    onPaste(event) {
        event.preventDefault();
        return false;
    }

    ngAfterViewInit() {
        this.getNewQueryBuilder();
    }

    reset() {
      $('#builder-basic').queryBuilder('reset');
    }

    setRules(rules: any) {
      $('#builder').queryBuilder('setRules', rules);
    }

    getRules() {
      var result = $('#builder').queryBuilder('getRules');

      if (!$.isEmptyObject(result)) {
        //alert(JSON.stringify(result, null, 2));
        console.log(JSON.stringify(result, null, 2));
      }

      return result;
    }

    getESBool() {
      var result = $('#builder').queryBuilder('getESBool');

      console.debug(result)
      if (!$.isEmptyObject(result)) {
        alert(JSON.stringify(result, null, 2));
        console.log(JSON.stringify(result, null, 2));
      }

      return result;
    }

    aler(){
        alert("HIII..");
    }

    private getNewQueryBuilder() {
        $('#builder').queryBuilder({
            plugins: ['bt-tooltip-errors'],

            filters: [
                {
                    id: 'category',
                    label: 'Selectize',
                    type: 'string',
                    plugin: 'selectize',
                    plugin_config: {
                      valueField: 'id',
                      labelField: 'name',
                      searchField: 'name',
                      sortField: 'name',
                      create: true,
                      maxItems: 1,
                      plugins: ['remove_button'],
                      onInitialize: function() {
                        var that = this;

                        if (localStorage.demoData === undefined) {
                          $.getJSON('http://localhost:4200/cart.json', function(data) {
                            localStorage.demoData = JSON.stringify(data);
                            data.forEach(function(item) {
                              that.addOption(item);
                            });
                          });
                        }
                        else {
                          JSON.parse(localStorage.demoData).forEach(function(item) {
                            that.addOption(item);
                          });
                        }
                      }
                    },
                    valueSetter: function(rule, value) {
                      rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
                    }
                  },

                {
                id: 'Origin_Zone',
                label: 'Origin Zone',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Destination_Zone',
                label: 'Destination Zone',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Origin_City',
                label: 'Origin City',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Destination_City',
                label: 'Destination City',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Origin_Facility',
                label: 'Origin Facility',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Destination_Facility',
                label: 'Destination Facility',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Origin_Postal_Code',
                label: 'Origin Postal Code',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Destination_Postal_Code',
                label: 'Destination Postal Code',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Origin_State',
                label: 'Origin State',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Destination_State',
                label: 'Destination State',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Origin_Country',
                label: 'Origin Country',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Destination_Country',
                label: 'Destination Country',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Business_Partner',
                label: 'Business Partner',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Business_Unit',
                label: 'Business Unit',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Assigned_Carrier',
                label: 'Assigned Carrier',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Total_Cost',
                label: 'Total Cost',
                type: 'double',
                operators: ['equal', 'not_equal', 'less', 'greater', 'less_or_equal','greater_or_equal', 'between']
            },
            {
                id: 'Monetary_Value',
                label: 'Monetary Value',
                type: 'integer',
                operators: ['equal', 'not_equal', 'less', 'greater', 'less_or_equal','greater_or_equal', 'between']
            },
            {
                id: 'Mode',
                label: 'Mode',
                type: 'string',
                input: 'select',
                multiple: 'true',
                values: {
                    1: 'TL',
                    2: 'LTL'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Equipment_Type',
                label: 'Equipment Type',
                type: 'string',
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Product_Class',
                label: 'Product Class',
                type: 'string',
                input: 'select',
                multiple: 'true',
                values: {
                    1: 'PC 1',
                    2: 'PC 2'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Protection_Level',
                label: 'Protection Level',
                type: 'string',
                input: 'select',
                multiple: 'true',
                values: {
                    1: 'DRY',
                    2: 'ICE'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Commodity_Class',
                label: 'Commodity Class',
                type: 'string',
                input: 'select',
                multiple: 'true',
                values: {
                    1: 'COM 1',
                    2: 'COM 2'
                },
                operators: ['equal', 'not_equal', 'in', 'not_in']
            },
            {
                id: 'Is_Hazmat',
                label: 'Is Hazmat',
                type: 'string',
                input: 'radio',
                values: {
                    1: 'Yes',
                    0: 'No'
                },
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Custom Attributes_String',
                label: 'Custom Attributes - String',
                type: 'string',
                operators: ['equal', 'not_equal']
            },
            {
                id: 'Custom Attributes_Integer',
                label: 'Custom Attributes - Integer',
                type: 'integer',
                operators: ['equal', 'not_equal', 'less', 'greater', 'less_or_equal','greater_or_equal', 'between']
            }],

            rules: this.rules_basic
        });
    }

}

Please help me with this, i am stuck further want to implement selectize with ajax loading

[mistic100]

Please reformat your message with triple back-quotes and language code https://guides.github.com/features/mastering-markdown/#examples > Code

[mistic100]

I do not see anywhere in your code the JS and CSS for Selectize !!

[surajMetkar33]

@mistic100 I am new to this and do not know exactly which css and js to add in angular cli.json Could u please give any refer link or snippet it tried downloading the selectize.js from standalone folder and included its reference in cli.json but no luck! thanks for immediate reply :)

[surajMetkar33]

Exception :

ERROR TypeError: d[e.plugin] is not a function at g.createRuleInput (scripts.bundle.js:19) at g.updateRuleFilter (scripts.bundle.js:19) at b.update (scripts.bundle.js:19) at b.dispatch (scripts.bundle.js:4) at b.q.handle (scripts.bundle.js:4) at Object.trigger (scripts.bundle.js:5) at r.fn.init.triggerHandler (scripts.bundle.js:5) at b.trigger (scripts.bundle.js:20) at k.set [as filter] (scripts.bundle.js:20) at HTMLSelectElement. (scripts.bundle.js:19)

[mistic100]

The files of selectize https://github.com/selectize/selectize.js It's a library it doesn't come from nowhere.

I don't use Angular with explicit configuration I cannot help you.

[surajMetkar33]

Hi @mistic100 I overcame that problem by adding below js from the mentioned URLs

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.min.js",
        "../src/selectize.js",
        "../src/selectize.min.js"
      ],

and styles

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css",
        "../node_modules/jQuery-QueryBuilder/doc/css/bootstrap.min.css",
        "../src/selectize.bootstrap3.css",
        "styles.css"
      ],

[surajMetkar33]

@mistic100 I have a different problem now i have implemented selectize with ajax and was successful with creating the rule JSON but with that rule i am not able to reconcstruct the selectize selected values

any help would be appreciated

code below :

protected rules_basic = {
        condition: 'AND',
        rules: [{
            "id": "ProduitIngredients",
            "field": "ProduitIngredients",
            "type": "string",
            "input": "text",
            "operator": "equal",
            "value": "Arcu Institute"
          }]
    };

and

$('#builder').queryBuilder({
            plugins: ['bt-tooltip-errors'],

            filters: [ 
                {
                    id: 'ProduitIngredients',
                    label: 'Ingredients',
                    type: 'string',
                    plugin: 'selectize',
                    plugin_config: {
                      valueField: 'name',
                      labelField: 'name',
                      searchField: 'name',
                      sortField: 'name',
                      create: false,
                      options: [],
                      render: {
                        option: function(item, escape) {
                          return '<div>'+item.name+'</div>';
                        }
                      },
                      load: function(query, callback) {
                        var that = this;
                        if (!query.length) return callback();
                        $.ajax({
                          url: 'http://querybuilder.js.org/assets/demo-data.json?query=' + encodeURIComponent(query),
                          type: 'GET',
                          error: function() {
                            callback();
                          },
                          success: function(res) {
                            callback(res.slice(0, 10));
                          }
                        });
                      }
                    },
                    valueSetter: function(rule, value) {
                        //rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);

                            if (rule.operator.nb_inputs > 0) {
                                debugger;
                                var val = value.split(',');
                                var select = rule.$el.find('.rule-value-container').selectize()[0].selectize;
                                val.forEach(function (item) {
                                    select.addItem(item);
                                });

                                select.setValue(val);
                            }

                    }
                  }],

            rules: this.rules_basic
        });
    }

I have refered some code from this issue https://github.com/mistic100/jQuery-QueryBuilder/issues/189 but was still not able to reconstruct the rule