unable to get value as well as input when rule operators are "match or equal"

[ghost]

when i set rule operator "equal or match" then value field should have input type and given value but it is working only on (in operator)

$(document).ready(function() {

                          const auth_attributes = ["User","Station","Called"];
                          const auth_operators  = ["in", "equal", "match"];
                          const auth_values     = ["group","earphone","certificate"];

                          // ------------------------------ creating predefine conditions ------------------------------------
                          var rules_basic = {
                                  condition: 'AND',
                                          rules: [          
                                                  {
                                                  condition: 'AND',
                                                  rules: [
                                                          {
                                                              id: auth_attributes[0],
                                                              operator: auth_operators[0],
                                                              value: auth_values[2]
                                                          },
                                                          {
                                                              id: auth_attributes[2],
                                                              operator: auth_operators[1],
                                                              value: "55"
                                                          }
                                                      ]
                                                  },
                                                  {
                                                  condition: 'AND',
                                                  rules: [
                                                          {
                                                              id: auth_attributes[0],
                                                              operator: auth_operators[0],
                                                              value: auth_values[1]
                                                          }
                                                      ]
                                                  }
                                  ]
                            };

                          let filter_obj = [];
                          for(let auth_atr = 0; auth_atr < auth_attributes.length; auth_atr++)
                          {
                              filter_obj.push({
                                              id: auth_attributes[auth_atr],
                                              label: auth_attributes[auth_atr],
                                              type: 'string',
                                              input: function(rule, name)
                                              {
                                                    var operator = rule.__.operator.type;
                                                    var form = "";
                                                    if(operator == "in")
                                                    {
                                                      form = '<select class="form-control"  name="'+name+'">';
                                                      form += '<option required>--- Select ---</option>';
                                                        $.each(auth_values, function( index, val ) {
                                                        form += '<option value="'+val+'">'+val+'</option>';
                                                      });
                                                       form += '</select>';
                                                    }
                                                    else
                                                    {
                                                        form = '<input class="form-control" name="'+name+'" type="text">';
                                                    }
                                                return form;
                                              },
                                              operators: auth_operators,
                                              values: auth_values
                                          });
                          } // --------------------------- end for loop of auth_atr < auth_attributes.length -------------------------- 

                          //-------------------------------- creating predefine options -----------------------------------
                          var options = {
                                  allow_empty: false,
                                  default_rule_flags: {no_delete: true},
                                  filters: filter_obj,
                                  rules: rules_basic
                          };

                          // rendering all options in html 
                          $('#builder').queryBuilder(options); 

                          // define what should happen when select operator
                          $("#builder").on("afterSetRules.queryBuilder afterUpdateRuleOperator.queryBuilder", function(e, rule)
                            {
                                    var  name = "builder_rule_0_value_0";

                                    if (rule.operator.type == 'match' || rule.operator.type == 'equal')
                                    {
                                      var output = rule.filter.input(rule, name);
                                      rule.$el.find('.rule-value-container').html(output);
                                      rule.$el.find('.rule-value-container input').on('change', function(e) {
                                      rule.value = this.value;
                                      });
                                    }
                                    else if ( rule.operator.type == 'in')
                                    {
                                        var output = rule.filter.input(rule, name);
                                        rule.$el.find('.rule-value-container').html(output);
                                        rule.$el.find('.rule-value-container select').on('change', function (e) {
                                        rule.value = $(this).val();
                                        });
                                    } 
                            });
});

[mistic100]

match is not a standard operator, of you want a custom operator you need to register it https://querybuilder.js.org/#operators

also your define what should happen when select operator block should be unecessary, you are messing with the builder internals, effectively breaking links by using the wrong "name"

---

Please create a jsfiddle for a better assistance, I don't have time to setup your code somewhere else

[ghost]

https://jsfiddle.net/gptgaurav04/ofydxcu7/8/

here i m providing you jsfiddle code link

[mistic100]

First of all remove your event handler on afterSetRules.queryBuilder afterUpdateRuleOperator.queryBuilder, as I said this breaks everything.

Now the problem is the builder does not try to rebuild the input, see the condition here: https://github.com/mistic100/jQuery-QueryBuilder/blob/4c30ebd69404f2c347d236e68b66211e6530fb08/src/core.js#L791-L796

A dirty (and only) solution is to use optgroups on operators, put the in operator in it's own optgroup (and optionally equal and match on another optgroup), and it will work.

Also replace rule.__.operator by rule.operator https://querybuilder.js.org/index.html#inside_the_box

[ghost]

i only want whenever my page load and html render then VALUE and INPUT type TEXT OR SELECT comes according to operator

[ghost]

Thanks a lot! Great work. it is working now.

[ghost]

thank you for solving my problem.

On Thu, 1 Apr, 2021, 3:45 pm Damien Sorel, @.***> wrote:

First of all remove your event handler on afterSetRules.queryBuilder afterUpdateRuleOperator.queryBuilder, as I said this breaks everything.

Now the problem is the builder does not try to rebuild the input, see the condition here:

https://github.com/mistic100/jQuery-QueryBuilder/blob/4c30ebd69404f2c347d236e68b66211e6530fb08/src/core.js#L791

A dirty (and only) solution is to use optgroups on operators, put the in operator in it's own optgroup (and optionally equal and match on another optgroup), and it will work.

Also replace rule.__.operator by rule.operator https://querybuilder.js.org/index.html#inside_the_box

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mistic100/jQuery-QueryBuilder/issues/908#issuecomment-811807396, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJZTOHJYOVBNIYOZAGDJSSTTGRBSNANCNFSM42EB5HYA .

[ghost]

Thanks, I'll check it out.

On Sat, 10 Apr, 2021, 12:29 am Damien Sorel, @.***> wrote:

Closed #908 https://github.com/mistic100/jQuery-QueryBuilder/issues/908.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mistic100/jQuery-QueryBuilder/issues/908#event-4575971265, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJZTOHIEXTWX7HREKLD27V3TH5FC3ANCNFSM42EB5HYA .