Aligning ADN adding text (or fields) in Editor

menashe

I thought that I saw something about this in the past, but with several hundred open tabs--I cannot find it!

I have used render in DataTables to successfully format fields.

In Editor, I have played around with the template and used CSS, below the image (the red boxes are from the example that I found; left for highlighting).

However, instead of

Price: xxx For: yyy

what I really want is

Price: yyy for xxx

I'm obviously not asking you how to switch the order!

How do I include the "For" quantity (yyy) but not as a field in the template (I don't want a label)!

Also, I would like to include it conditionally--if the quantity (yyy) is 1, I don't need to display "1 For $9.99" (Just "$9.99").

            <div class="tab-pane fade show active" id="v-pills-prices" role="tabpanel" aria-labelledby="v-pills-price-tab" tabindex="0">
                <editor-field name="prices.date"></editor-field>
                <editor-field name="prices.store_id"></editor-field>
                <div class="flex-container">
                    <div class="flex-child">
                        <editor-field name="prices.price"></editor-field>
                    </div>
                    <div class="flex-child">
                        <editor-field name="prices.price_per_units"></editor-field>
                    </div>
                </div>
                <editor-field name="prices.notes"></editor-field>
            </div>

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid red;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

menashe

Is this an (the?) answer?
https://datatables.net/forums/discussion/72114/display-field-values-in-custom-editor-form

menashe

Well, I got it--almost!!

But how do I "set" the values for the two fields??

        pricesEditor.on('open', function(e, mode, action) {

            ...

            if (action === 'edit' && mode === 'main') {
                var data = pricesTable.row({
                    selected: true
                }).data();

                $('div.sale-price').val(data.prices.sale_price);

                if (data.prices.units_per_sale_price > 1) {
                    $('div.units-per-sale-price').val(data.prices.units_per_sale_price);
                } else {
                    $('div.units-per-sale-price').css('display', 'none');
                    $('div.for').css('display', 'none');
                }
            }
        };

menashe

And done!

                $('div.sale-price #sale-price').val(data.prices.sale_price);

I would VERY much like to hear your thoughts on this overall method!

allan

It's getting there - but you might want to consider using dependent() so that the field updates as other values in the form change. You can also change its visibility based on other inputs (which you indicated was needed).

dependent() is basically the same as adding a change event listener to a field (which is the other way of doing this - listen for changes and update the fields around it as needed).

Allan

menashe

How would dependent apply here?

So as not to get the default labels, my Editor template does not include sale price and "units". I defined then as input elements and use the ID to access.

Am I missing something??

            <div class="tab-pane fade" id="v-pills-sales" role="tabpanel" aria-labelledby="v-pills-sale-tab" tabindex="0">
                <!-- <editor-field name="prices.is_sale"></editor-field> -->
                <editor-field name="prices.sale_start"></editor-field>
                <editor-field name="prices.sale_end"></editor-field>
                <div class="flex-container DTE_Field form-group row">
                    <label class="flex-child col-lg-4 col-form-label">Sale Price:</label>
                    <div class="flex-child units-per-sale-price col-sm-2 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="DTE_Field_InputControl" style="display: block;">
                            <input id="sale-price" type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <editor-field name="prices.limit"></editor-field>
                <editor-field name="prices.dollars_off"></editor-field>
                <editor-field name="prices.percent_off"></editor-field>
            </div>

On a related note, once I have retrieved what the user types in for the sale price value, how do I update the database (that is, the prices.sale_price column) with that value?

The first statement (below) retrieves the entered value, but it is not being saved to the database.

        pricesEditor.on('close', function() {
            var sale_price = $('#sale-price').val();

            pricesEditor.field('prices.sale_price').set(sale_price);
        })

allan

my Editor template does not include sale price and "units".

Ooo - I missed that bit - sorry. Yes, dependent() only works on fields that Editor has defined.

Your approach is probably the best one in that case.

Allan

menashe

Allan,

Did you see the question nat the bottom of previous post?

allan

I missed that - sorry. Use initSubmit to update a fields value before the form is read for data submission. Basically the same event handler, just a different event that needs to be used.

Allan

menashe

Hi,

Related to the above, I now have the units and sale price fields working and updating the database.

I have now added a button. I cannot seem to "capture" and act upon the click event? (As before, this button is not and Editor field; rather, added html. See below.)

                    <div class="flex-child multi template-prices_input-fields-format">
                        <div class="button-container" style="display: block;">
                            <div class="button-center DTE_Field_InputControl">
                                <button class="button"></button>
                            </div>
                        </div>
                    </div>

kthorngren

You might need to use jQuery delegated events. Maybe something like this:

$('document').on('click', 'button.button', function () {
  // Event code
});

Kevin

menashe

The click event on the button is not being captured!

kthorngren

Typo on my part. Remove the quotes around document:

$(document).on('click', 'button.button', function () {
  // Event code
});

Kevin

menashe

And a magician too! THANK YOU!!