Though there were major architectural changes in QueryBuilder 2, basic usage remains the same. The only big change is about callbacks: there are no more callbacks ! everything is done via events, which also changed a bit.

Changes in events

There were previously only 5 events, all five have been modified, four of them have been renamed and 15 new were added !

The renamed events are :
  • addGroup.queryBuilder beforeAddGroup.queryBuilder
  • deleteGroup.queryBuilder beforeDeleteGroup.queryBuilder
  • addRule.queryBuilder beforeAddRule.queryBuilder
  • deleteRule.queryBuilder beforeDeleteRule.queryBuilder

Be sure to check the documentation about events to know the new usages.

Migrate callbacks

In the following I will illustrate how to convert each 1.4 callback to 2.0 events.

onValidationError

1.4.x

$('#builder').queryBuilder({
  /* ... */
  onValidationError: function($rule, error, value, filter, operator) {
    if (filter == 'name') {
      $rule.something();
    }
  }
});

// OR

$('#builder').queryBuilder({
  filters: [{
    id: 'name',
    onValidationError: function($rule, error, value, filter, operator) {
      $rule.something();
    }
  }]
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('validationError.queryBuilder', function(e, node, error, value) {
  // node is a Rule or a Group
  if (node.filter && node.filter.id == 'name') {
    node.$el.something();
  }
});

onAfterAddGroup

1.4.x

$('#builder').queryBuilder({
  /* ... */
  onAfterAddGroup: function($group) {
    $group.something();
  }
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('afterAddGroup.queryBuilder', function(e, group) {
  group.$el.something();
});

onAfterAddRule

1.4.x

$('#builder').queryBuilder({
  /* ... */
  onAfterAddRule: function($rule) {
    $rule.something();
  }
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('afterAddRule.queryBuilder', function(e, rule) {
  rule.$el.something();
});

onAfterCreateRuleInput

1.4.x

$('#builder').queryBuilder({
  filters: [{
    id: 'name',
    onAfterCreateRuleInput: function($rule, filter) {
      $rule.something();
    }
  }]
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
  if (rule.filter.id == 'name') {
    node.$el.something();
  }
});

onAfterChangeOperator

1.4.x

$('#builder').queryBuilder({
  filters: [{
    id: 'name',
    onAfterChangeOperator: function($rule, filter, operator) {
      if (operator == 'equal') {
        $rule.something();
      }
    }
  }]
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('afterUpdateRuleOperator.queryBuilder', function(e, rule) {
  if (rule.filter.id == 'name' && rule.operator.type == 'equal') {
    node.$el.something();
  }
});

onAfterSetValue

1.4.x

$('#builder').queryBuilder({
  filters: [{
    id: 'name',
    onAfterSetValue: function($rule, value, filter, operator) {
      $rule.something(value);
    }
  }]
});

2.x

$('#builder').queryBuilder({
  /* ... */
});

$('#builder').on('afterSetRuleValue.queryBuilder', function(e, rule, value) {
  if (rule.filter.id == 'name') {
    node.$el.something(value);
  }
});