I'm using jQuery QueryBuilder, and I noticed that when changing the left-hand side field, the operator resets automatically. I understand this is built-in behavior since different fields may support different operators.

Looking into the source code, I found this behavior in core.js:

// set the operator without triggering update event  
if (rule.filter.default_operator) {  
    rule.__.operator = this.getOperatorByType(rule.filter.default_operator);  
}  
else {  
    rule.__.operator = operators[0];  
}

(Reference: QueryBuilder Source Code)

However, in my use case, I'd like to retain the previously selected operator whenever possible.

Is there a way to override this behavior and prevent the operator from resetting unnecessarily? Any suggestions or workarounds would be greatly appreciated!

I'm using jQuery QueryBuilder, and I noticed that when changing the left-hand side field, the operator resets automatically. I understand this is built-in behavior since different fields may support different operators.

Looking into the source code, I found this behavior in core.js:

// set the operator without triggering update event  
if (rule.filter.default_operator) {  
    rule.__.operator = this.getOperatorByType(rule.filter.default_operator);  
}  
else {  
    rule.__.operator = operators[0];  
}

(Reference: QueryBuilder Source Code)

However, in my use case, I'd like to retain the previously selected operator whenever possible.

Is there a way to override this behavior and prevent the operator from resetting unnecessarily? Any suggestions or workarounds would be greatly appreciated!

• javascript
• jquery
• reactjs
• query-builder
• jquery-query-builder

Share Improve this question Follow edited Mar 16 at 19:44 Abhignya B asked Mar 12 at 12:52 Abhignya BAbhignya B 122 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

You can fix this by adding some JavaScript that listens for when you change the filter in QueryBuilder. Here's how to do it:

$('#builder').on('afterUpdateRuleFilter.queryBuilder', function(e, rule, previousFilter) {
    // Only try to preserve the operator if there was a previous filter
    if (previousFilter && rule.filter) {
        var previousOperator = rule.operator;

        // Get the list of valid operators for the new filter
        var newOperators = rule.queryBuilder.getOperators(rule.filter);

        // Check if the old operator is still good with the new filter
        var operatorFound = newOperators.find(function(op) {
            return op.type === previousOperator.type;
        });

        if (operatorFound) {
            // If it's good, keep using the old operator
            rule.$el.find(QueryBuilder.selectors.rule_operator).val(previousOperator.type);
            rule.operator = previousOperator;
        }
    }
});

What this code does is it checks every time you change a filter to see if you can keep using the same operator (like equals, not equals, etc.). If the operator can still be used with the new filter, it doesn't change it.

This way, the operator won't reset every time you change the filter, making things less annoying and more consistent.

We can fix this by keeping track of the operator for each rule.

const [ruleOperators, setRuleOperators] = useState({});

We can do that by using afterUpdateRuleOperator.queryBuilder

   $('#builder').on('afterUpdateRuleOperator.queryBuilder', (e, rule) => {
       setRuleOperators(prev => ({
          ...prev,
          [rule.id]: rule.operator,
       }));
    });

Then update the rule with previous operator immediately after changing the field using afterUpdateRuleFilter.queryBuilder

   $('#builder').on('afterUpdateRuleFilter.queryBuilder', (e, rule) => {
      const prevOp = ruleOperators[rule.id];

      if (prevOp) {
        rule.operator = prevOp;
        $('#builder').queryBuilder('trigger', 'afterUpdateRuleOperator', rule);
      }
    });