Hide field on grid edit based on a value

[josejad]

Hi:

I'm trying in a master/detail grid-edit or grid-add to hide fields in a card, if I choose a value in a select. (url PartesDiariosList?action=gridedit)
I have this code in Client-side events of the field, in order I got it in every row of the grid (v2024)

{ // keys = event types, values = handler functions
	"change": function(e) {
		// Your code
		;
		switch ($(this).val()) {
        case "U": 
        console.log('fired')
            $("#r_proyecto").hide();
            break;
        default:
            $("#r_proyecto").show();
            break;
    }
	}
}

But nothing happens. I'm trying to inspect the code to get the appropriate element to hide, but I can't find it (r_proyecto doesn't exist, I've tried with o_proyecto too)

This is the source code of one card:

 <div class="row partes_diarios_observaciones">
            <label class="col-sm-2 col-form-label ew-label">Observaciones</label>
            <div class="col-sm-10"><div>
<input type="text" name="x3_observaciones" id="x3_observaciones" data-table="partes_diarios" data-field="x_observaciones" value="" size="30" maxlength="255" placeholder="Observaciones" data-format-pattern="" class="form-control">
<div class="invalid-feedback"></div>
<input type="hidden" data-table="partes_diarios" data-field="x_observaciones" data-hidden="1" data-old name="o3_observaciones" id="o3_observaciones" value="">
</div></div>
        </div>

Thanks in advance

[arbei]

You better use .fields() plugin. There is no "#r_xxx" in Grid page.

[josejad]

Thanks for the answer:

Following the examples, this code changes the value to "yyy" or "zzz", but not hide the field. :-(

{ // keys = event types, values = handler functions
    "change": function(e) {
        if (this.value == "U") {
            $(this).fields("observaciones").value("yyy"); // Set value to FieldA
            $(this).fields("observaciones").visible(false); // true to show, false to hide
        } else {
            $(this).fields("observaciones").value("zzz"); // Set value to FieldB
        }
    }
}

[arbei]

There is no this.value if the field is a selection list.

[josejad]

Do you mean this.value == "U"?
The if is working and the code enters in the if part. A console.log(this.value) returns U

[arbei]

josejad wrote:

if I choose a value in a select...

What is the Edit Tag of the field? If it is "SELECT", there is no this.value, you should use $(this).val(). If this.value has value, then it is not "SELECT", and your code will work, partially. You need to use .visible(true) to unhide the field.

Also press F12 in your browser and go the Console panel to check for JavaScript errors, make sure $(this).fields("observaciones") has value.

[josejad]

Yes, it's a SELECT.
With this code, I get no errors in console. Both this.value and $(this).val() shows "U" in console.
The values in observaciones change to "Changed to U" and "changed to another one", but always visible

{ // keys = event types, values = handler functions
    "change": function(e) {
        console.log(this.value);
        console.log($(this).val());
        if ($(this).val() == "U") {
            $(this).fields("observaciones").visible(false); // true to show, false to hide
            $(this).fields("observaciones").value('changed to U');
        } else {
            $(this).fields("observaciones").visible(true); // Set value to FieldB
            $(this).fields("observaciones").value('changed to another one');
        }
    }
}

[arbei]

You may right click and inspect the HTML element for the field "observaciones" in your browser, post the actual HTML for discussion.

[josejad]

If I'm not wrong, is the one on my first post

<div class="row partes_diarios_observaciones">
            <label class="col-sm-2 col-form-label ew-label">Observaciones</label>
            <div class="col-sm-10"><div>
<input type="text" name="x1_observaciones" id="x1_observaciones" data-table="partes_diarios" data-field="x_observaciones" value="4 extras" size="30" maxlength="255" placeholder="Observaciones" data-format-pattern="" class="form-control">
<div class="invalid-feedback"></div>
</div></div>
</div>

[arbei]

It seems that you are using Multi-Column with Grid-Edit, then you cannot use .visible(). You need to hide the field with correct code, try modify your code. You may want to see jQuery's doc on .closest() and .hide/show/toggle().

[josejad]

Thanks. Solved with this code:

{ // keys = event types, values = handler functions
    "change": function(e) {
        // find the container to 'observaciones'
        var $fieldRow = $(this).closest(".card-body").find(".row.partes_diarios_observaciones");
        console.log($fieldRow); 
        if ($(this).val() == "U") {
            $fieldRow.hide();
            $(this).fields("observaciones").value('changed to U');
        } else {
            $fieldRow.show();
            $(this).fields("observaciones").value('changed to another one');
        }
    }
}

[philip8922]

I have also faced the same issue...

[josejad]

So I hope this post had helped you.

Version v2024.14.0 changelog says:
- Improved: .fields() plugin .visible() method