Dependent and form open

menashe

I am trying to use field.dependent to hide or show a <div>. Butdependent is apparently called before 'editor.open such that elements that I place on the Editor Form (so that I can customize the layout) are not yet defined.

What event or method would work?

colin

It sounds like you'd be better off using an event here, something like open or preCreate. This example may help - it's changing the size of the lightbox when the form is opened,

Colin

allan

dependent() is used to change the form based on a selected value. That can happen as the form is being readied for display (i.e. an edit or create action), so it is correct before the end user sees it.

Perhaps you could clarify a little more about what you want to do. As Colin indicates, open might be what you want, but it really depends on what you want to do.

Allan

menashe

Allan/Colin,

Good morning! Yes, I have tried open and it works perfectly--when the Editor Form opens.

I want to modify (show/hide) a field on the form every time the value of another field changes. I tried dependent, but it appears that runs before the form is "ready" such that my HTML elements to not yet exists.

(This particular template looks as follows, with a number of HTML elements for which I control the layout:)

<div class="template-discounts" id="template-discounts">
    <fieldset class="discounts">
        <legend>Discount</legend>
        <editor-field name="crosswalk_prices_to_discounts.discount_id" id='aaa'></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.discount_description_id"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.apply_order"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.sale_start"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.sale_end"></editor-field>
        <div class="flex-container DTE_Field form-group row" id="crosswalk_prices_to_discounts.sale_price">
            <label class="flex-child col-lg-4 col-form-label">Sale Price:</label>
            <div class="flex-child units-per-sale-price col-sm-1 template-prices_input-fields-format">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <input id="units-per-sale-price" type="text" class="form-control">
                </div>
            </div>
            <div class="flex-child for col-sm-1">
                <label class="col-form-label" id="for">for</label>
            </div>
            <div class="flex-child sale-price col-sm-2 template-prices_input-fields-format">
                <div class="currency DTE_Field_InputControl" style="display: block;">
                    <input id="sale-price" type="text" class="form-control">
                    <i>$</i>
                </div>
            </div>
            <div class="flex-child multi template-prices_input-fields-format">
                <div class="button-container" style="display: block;">
                    <div class="button-center DTE_Field_InputControl">
                        <input type="checkbox" class="checkbox" name="units-per-sale-price"></button>
                    </div>
                </div>
            </div>
        </div>
        <editor-field name="crosswalk_prices_to_discounts.limit"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.dollars_off"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.percent_off"></editor-field>
        <div class="flex-container DTE_Field form-group row">
            <label class="flex-child col-lg-4 col-form-label">Restriction:</label>
            <div class="flex-child must-buy-restriction col-sm-5">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <select id="must-buy-restriction" name="must-buy-restriction" class="form-control" style="appearance: menulist">
                        <option value="" disabled selected hidden>Please select a Restriction...</option>
                        <option value=0> </option>
                        <option value=1>Must Buy</option>
                        <option value=2>When You Buy</option>
                    </select>
                </div>
            </div>
            <div class="flex-child must-buy-quantity col-sm-2">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <input id="must-buy-quantity" type="text" class="form-control prevent-select" readonly>
                </div>
            </div>
        </div>
        <div class="flex-container DTE_Field form-group row">
            <label class="flex-child col-lg-4 col-form-label">Limit:</label>
            <div class="flex-child purchase-limit-quantity col-sm-1">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <input id="purchase-limit-quantity" type="text" class="form-control">
                </div>
            </div>
            <div class="flex-child purchase-limit-units col-sm-2">
                <div class="DTE_Field_InputControl" style="display: block;">
                    <select id="purchase-limit-units" name="purchase-limit-units" class="form-control" style="appearance: menulist">
                        <option value="" disabled selected hidden>Please select a unit...</option>
                        <option value=0> </option>
                        <option value=1>Items</option>
                        <option value=2>Offers</option>
                    </select>
                </div>
            </div>
        </div>
        <editor-field name="crosswalk_prices_to_discounts.purchase_limit_quantity"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.purchase_limit_units"></editor-field>
        <editor-field name="crosswalk_prices_to_discounts.notes"></editor-field>
    </fieldset>
</div>

allan

but it appears that runs before the form is "ready" such that my HTML elements to not yet exists.

That should not be the case. The Editor DOM is constructed when the fields are added (either with fields or add()).

What will happen is that the fields are inserted into the template structure when an editing action is triggered. If you are showing / hiding your own elements, rather than using show() / hide() then that is when you might run into issues. Is that what you are doing? Perhaps you can show the code you are using so I have a better idea of what is going on?

Allan

menashe

If you are showing / hiding your own elements, rather than using show() / hide() then that is when you might run into issues. Is that what you are doing?

Sounds very reasonable.

I sent you the template this morning. The code to show/hide is:

                    discountEditor.field('crosswalk_prices_to_discounts.dollars_off').hide();
                    discountEditor.field('crosswalk_prices_to_discounts.percent_off').show();
                    document.getElementById('crosswalk_prices_to_discounts.sale_price').style.display = 'none';

As I mentioned, used in the open all three line work perfectly.

Placed in a dependent() (or anything else that I've tried) the first two (show/hide) also work, but the style.display = 'none'; fails ("attempt to read null == reading 'style')."

I am trying to hide the entire "Sale Price" row, below. As mentioned, it works in open.

So how can I do that?

Thank you!!

allan

Right - I'm with you now. Thank you for the code, that explains a lot.

document.getElementById('crosswalk_prices_to_discounts.sale_price') ...

Will select an element that is in the document (and that line assumes it will find it). However, since the Editor modal isn't inserted into the document until it is needed, that selector will find nothing, and since it assumes it will find an element, it throws the error you are seeing.

To access the element you need to use the template() method for your use case - e.g.:

var template = editor.template();
template[0].getElementById('crosswalk_prices_to_discounts.sale_price').style.display = 'none';

One point - the use of a . in an element's ID is valid per the HTML5 spec, but it makes selecting the element a lot more difficult since the . means that it is a class name selector.

I'd encourage you to avoid the use of dots / periods in an element's id.

Allan

menashe

Thank you!

template[0] -- the "0" as in the first template?

No matter how much I've learned (from you) about DataTables, jQuery, etc., there is always more to learn!

Thank you for the pointer regarding element IDs. I was doing it to remain consistent with the names that (I thought) are generated by DataTables when I look in Dev Tools!

menashe

I put

                    var template = discountEditor.template();
                    template[0].getElementById('crosswalk_prices_to_discounts.sale_price').style.display = 'flex';

using the dependent() method, and I got:

allan

Sorry - my mistake. I totally thought getElementById was on all nodes. Apparently not!

Try:

discountEditor.template().find('#crosswalk_prices_to_discounts\\.sale_price').css('display', 'flex');

Note the need to escape the .. I'd really suggest you change the id to not include a period.

Allan

menashe

PERFECT!!