Uncaught ConfigError: No target defined while using Jquery Query builder

Question

I am working on a project in which I want to use Query builder.

I followed [https://querybuilder.js.org/] for simple implementation,but getting following error

query-builder.js:3113 Uncaught ConfigError: No target defined
at Object.Utils.error (file:///C:/Users/Admin/Desktop/Querybuilder/query-builder.js:3113:19)
at w.fn.init.$.fn.queryBuilder (file:///C:/Users/Admin/Desktop/Querybuilder/query-builder.js:3849:15)
at file:///C:/Users/Admin/Desktop/Querybuilder/test.html:40:21

and my code is

<html>
<head>
  <title></title>
  <link href="./query-builder.default.min.css" rel="stylesheet" />
  <link href="./bootstrap.min.css" rel="stylesheet" />

  <script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./query-builder.standalone.js"></script>
  <script type="text/javascript" src="./doT.min.js"></script>
  <script type="text/javascript" src="./moment.js"></script>
  <script type="text/javascript" src="./jQuery.extendext.min.js"></script>
  <script type="text/javascript" src="./query-builder.js"></script>

  <script type="text/javascript">
    var rules_basic = {
  condition: 'AND',
  rules: [{
    id: 'price',
    operator: 'less',
    value: 10.25
  }, {
    condition: 'OR',
    rules: [{
      id: 'category',
      operator: 'equal',
      value: 2
    }, {
      id: 'category',
      operator: 'equal',
      value: 1
    }]
  }]
};


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

  filters: [{
    id: 'name',
    label: 'Name',
    type: 'string'
  }, {
    id: 'category',
    label: 'Category',
    type: 'integer',
    input: 'select',
    values: {
      1: 'Books',
      2: 'Movies',
      3: 'Music',
      4: 'Tools',
      5: 'Goodies',
      6: 'Clothes'
    },
    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
  }, {
    id: 'in_stock',
    label: 'In stock',
    type: 'integer',
    input: 'radio',
    values: {
      1: 'Yes',
      0: 'No'
    },
    operators: ['equal']
  }, {
    id: 'price',
    label: 'Price',
    type: 'double',
    validation: {
      min: 0,
      step: 0.01
    }
  }, {
    id: 'id',
    label: 'Identifier',
    type: 'string',
    placeholder: '____-____-____',
    operators: ['equal', 'not_equal'],
    validation: {
      format: /^.{4}-.{4}-.{4}$/
    }
  }],

  rules: rules_basic
});

$('#btn-reset').on('click', function() {
  $('#builder-basic').queryBuilder('reset');
});

$('#btn-set').on('click', function() {
  $('#builder-basic').queryBuilder('setRules', rules_basic);
});

$('#btn-get').on('click', function() {
  var result = $('#builder-basic').queryBuilder('getRules');

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

  </script>
</head>
<body>
  <div id="builder"></div>
  <button class="btn btn-success" id="btn-set">Set Rules</button>
  <button class="btn btn-primary" id="btn-get">Get Rules</button>
  <button class="btn btn-warning" id="btn-reset">Reset</button>
</body>
</html>

I have refrered to No target defined error and github.com/mistic100/jQuery-QueryBuilder/issues/527 but those are not helpful.

Can someone please advice me ,what is wrong with this?

imvain2 · Accepted Answer · 2019-03-15T19:13:26.977

0

No Target Defined Error: You are targeting #builder-basic but your div id is builder

Tool Tip Error: According to https://querybuilder.js.org/plugins.html, you need to include bootstrap CSS & JS. You can create a custom version of Bootstrap to limit it to what you need here https://getbootstrap.com/docs/3.4/customize/

edited Mar 15 '19 at 19:13

answered Mar 15 '19 at 18:28

imvain2

15,480
1
16
21

1

@SM another observation is you are targeting #builder-basic but your div id is builder. – imvain2 Mar 15 '19 at 18:36
That error is resolved , but now getting `'Uncaught MissingLibraryError: Bootstrap Tooltip is required to use "bt-tooltip-errors" plugin. Get it here: http://getbootstrap.com` – S M Mar 15 '19 at 19:07
Thank you so much @imvain2 the code is working fine now – S M Mar 15 '19 at 19:20

Uncaught ConfigError: No target defined while using Jquery Query builder

1 Answers1