Update parent table cell value from child table

I have a table (parent) and one another table inside that table(child).

I want to update the cell value of parent table from child table.

<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
        <thead>
            <tr class="bg-primary text-light">
                <th></th>
                <th>
                    @Html.DisplayName("Restaurant Name")
                </th>
                <th>
                    @Html.DisplayName("Delivery Date")
                </th>
                <th>
                    @Html.DisplayName("Status")
                </th>
                <th class="none">
                    @Html.DisplayName("Prefferred Delivery Date")
                </th>
                <th class="none">
                    <b> @Html.DisplayName("Item List") </b>
                </th>
                <th class="none"></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
            <tr>
                <td></td>
                <td>
                    @Html.DisplayFor(modelItem => item.RestaurantName)
                </td>
                <td>
                    @String.Format("{0:dd/MM/yyyy}", item.DELIVERED_DATE)
                    @*@Html.DisplayFor(modelItem => item.DELIVERED_DATE.Value.ToString("dd/MM/yyyy"))*@
                </td>
                <td>
                    @if (item.STATUS == 1)
                    {
                        <span class="badge badge-secondary">Draft</span>
                    }
                    @if (item.STATUS == 2)
                    {
                        <span class="badge badge-warning">Pending confirmation</span>
                    }
                    @if (item.STATUS == 3)
                    {
                        <span class="badge badge-primary">Confirmed</span>
                    }
                    @if (item.STATUS == 4)
                    {
                        <span class="badge badge-suceess">Delivered</span>
                    }
                </td>
                <td>
                    :  @String.Format("{0:dd/MM/yyyy}", item.PREFERRED_DELIVERY_DATE)
                </td>
                <td>
                    :
                    <table>
                        <thead>
                            <tr class="bg-primary text-light">
                                <th>
                                    @Html.DisplayName("Item Name")
                                </th>
                                <th>
                                    @Html.DisplayName("Quantity")
                                </th>
                                <th>
                                    @Html.DisplayName("Price")
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                @foreach (var test in item.OrderSupplierItems)
                                {
                                <tr>
                                    <td>@Html.DisplayFor(modelItem => test.IngredientName)</td>
                                    <td>@Html.DisplayFor(modelItem => test.QUANTITY)</td>
                                    <td>@Html.DisplayFor(modelItem => test.PRICE)$</td>
                                </tr>
                            }
                                <tr>
                                    <td colspan="2">Sum</td>
                                    <td>@item.OrderSupplierItems.Sum(b => b.PRICE)$</td>
                                </tr>
                                <tr>
                            </tbody>
                        </table>
                    </td>
                <td>
                    <a class='Confirm btn btn-success' href='javascript:;@item.ID_ORDER_SUPPLIER'>CONFIRM</a>
                    <a class='btn btn-primary'>MAKE CHANGES</a>
                </td>
                </tr>
                }
        </tbody>
    </table>

I want to change the status on ajax success request.

$("body").on("click", "#example TBODY .Confirm", function () {
        if (confirm("Do you want to confirm this order?")) {
            var row = $(this).closest("tr");
            var orderSupplierId = $(this).attr('href').substr(12); 
            $.ajax({
                type: "PUT",
                url: "@System.Configuration.ConfigurationManager.AppSettings["ServiceUrl"]/api/OrderSupplier/" + orderSupplierId +"?status=3",
                contentType: 'application/json',  // <---add this
                dataType: 'text',
                success: function (response) {
//here i want to do this
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });
        }

I need to update the status field of parent table based on confirm changes button.
I need to replace the current text of status field of current table.

30 thoughts on “Update parent table cell value from child table”

Leave a Comment