How to set an INPUT value when it is in the footer

jstuardo

Hello, this is breaking my head for more than 2 hours.

I have a datatable with a summary footer. In the footer I have placed an INPUT called TxtEmail, this way:

            <tfoot>
                    <tr>
                        <th class="text-right font-weight-bold align-middle" colspan="3">
                            <div class="row">
                                <div class="col-md-6 text-right">
                                    <button type="button" id="BtnEnviar" class="btn btn-outline-info btn-rounded"><i class="fa fa-mail"></i> Enviar por Mail</button>
                                </div>
                                <div class="col-md-6">
                                    <input type="text" id="TxtEmail" class="form-control" maxlength="100" />
                                </div>
                            </div>
                        </th>
                        <th class="text-right align-middle">
                            <div class="row">
                                <div class="col-6 font-weight-bold">Total:</div>
                                <div class="col-6" id="summaryGrossAmount"><div class="apply-tax" rel="summary"></div></div>
                            </div>
                        </th>
                    </tr>
                </tfoot>

And the footer callback is as follows:

    footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                api.columns('.summary', {
                    page: 'current'
                }).every(function () {
                    var sum = this
                        .data()
                        .reduce(function (a, b) {
                            var x = parseFloat(a) || 0;
                            var y = parseFloat(b) || 0;
                            return x + y;
                        }, 0);

                    let footer = $(this.footer());

                        $.post('example.com',
                            {
                                id: $('#sClienteId').val(),
                                __RequestVerificationToken: token
                            },
                            function (data) {
                                $('#TxtEmail').val('hello');
                            });

                    footer.find('div[rel="summary"]:first').html(sum.toFixed(2));
                });
            }

All code that sums the column values and add them to the column works perfect. But please look at the $.post instruction. It calls an URL and when returns, it should update the TxtEmail field value. In this case, I have hardcoded the value.

The fact is that the field is not updated.

The field is updated only if I place the code that updates outside of everything, what is obvious because is like I initialize the INPUT with some value. The problem is that I cannot update that INPUT when I refresh the datatable.

Any help, please?

Thanks
Jaime

jstuardo

Finally I have used $(tfoot).find('input').eq(0).val(data); to set the value and it worked. I don't know why it did not work getting the control directly.