I am updating the value of the textfield through jquery but when i run queryBuilder('getRules') it is empty. May i know if there are still some functions that need to trigger for the rules to be not empty?

[pixobit]

I am updating the value of the textfield through jquery but when i run queryBuilder('getRules') it is empty. May i know if there are still some functions that need to trigger for the rules to be not empty?

Originally posted by @PIlepRusel in https://github.com/mistic100/jQuery-QueryBuilder/issues/581#issuecomment-640490138

I noticed the exact same issue... I think the queryBuilder isn't binding the events to these generated input elements

[mistic100]

try to trigger an "change" event on the textfield, this way the builder will be notified of the changed value

[mistic100]

Otherwise please provide a demo as explicitely requested in the issue template.

[pixobit]

what do you mean trigger a change event? I'm using the inputs as 
input: function(){
 return '\';
}
(The above is just a dummy example, it's not the actual input, but serves the purpose)

These already have html specific change event, it's just not getting picked up by the queryBuilder. So if I trigger a change event, that's the same as the native event, but that won't get picked up by the queryBuilder

[mistic100]

I cannot help you if you don't show a whole working code.

[pixobit]

The whole code would be huge, and hard to understand, but I'm going to try to create a simplified codepen example

[pixobit]

Sorry, I actually realized that I was overwriting the value field's outerHTML on operator change. Would it be possible to add the required events to the input field at this point?

For example creating the value input element on "afterUpdateRuleOperator.queryBuilder", replacing the element in the DOM (need to do this because the value field changes based on the operator), and attaching the required events manually.

$(...).on('afterUpdateRuleOperator.queryBuilder', function (e, rule, operator) {
    var currentOperator = rule.$el[0].querySelector('.rule-operator-container .form-control').value;
    var selectedOperator = fieldOperatorsSetup[rule.filter.id].filter(function (f) {
        return f.OperatorName == currentOperator;
    })[0];

    var id = rule.$el[0].querySelector('.rule-value-container .form-control').id;
    if (['Exists', 'Set To NULL'].indexOf(currentOperator) >= 0) {
        document.getElementById(id).style.display = 'none';
    } else {
        var inputHtml = getInputHtml(rule.filter, selectedOperator, rule.value, id);
        document.getElementById(id).outerHTML = inputHtml;
    }
}

[pixobit]

// Solved it by attaching the event listener like this... (Also made sure the input has the name attribute set to the auto generated one for ex. queryBuilder0_rule_7_value_0)
var qryBuilder = document.getElementById(id).closest('.query-builder').queryBuilder;
$('#' + id).on('change', function () {
    if (!rule._updating_input) {
        rule._updating_value = true;
        rule.value = qryBuilder.getRuleInputValue(rule);
        rule._updating_value = false;
    }
});

[mistic100]

I suppose you are trying to change the input based in the operator, which is not supported (there is an issue for that).
Of course if you manually overwrite the inputs it will destroy the existing listeners and nothing will update.

Your solution is correct I guess.

If it works please close this issue, the input/operator feature will be tracked in #284

(disclaimer : I don't really work on this project anymore)