How to reload view after AJAX POST

Being new to AJAX I have encountered this problem and have had no luck resolving it. I want my table to be refreshed after an ajax post to review an object, everything I've tried has been futile.

Assume the ajax response is a JSON result, to avoid posting my OnPost() code. I send the Id of the product using ajax and then use that Id to remove the product

I then call the same method OnGet() uses to populate the tables which returns the updated list. In chrome debug tools I see the response successfully returns with the updated list. I just don't know how to get it across back to my list. Thanks in advance guys.

    @Html.AntiForgeryToken()
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ShoppingBagItems)
        {
            <tr>
                <td>
                    @item.Product.Name
                </td>
                <td>
                    @item.Price.ToString("C")
                </td>
                <td>
                    <input value="@item.Quantity" size="1" maxlength="1" class="text-center" />
                </td>
                <td>
                        <button onclick="remove(@item.Product.Id.ToString())" class="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
    function remove(id) {
        $.ajax({
            type: 'POST',
            url: 'ShoppingBag?handler=Delete',
            headers: {
                "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: ''+id+'',
            sucess: function (response) {
                append_json(response);
            }
        });
    }

    function append_json(data){
        var table = document.getElementById('shoppingBag');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }
</script>

Upvotes: 0

Answers (3)

Zulqarnain Jalil

Reputation: 1691

you are appending your data to main <table> if you inspect your table you can see the appended html.but you need to append data in body of table for this you can use $("#shoppingBag tbody").append(tr);

or you can add id to <body> like <tbody id="myTestTableBody"> and use this in to your JavaScript

function append_json(data){
        var table = document.getElementById('myTestTableBody');
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.product.name +
                '</td>' +
                '<td>' +
                object.price +
                '</td>' +
                '<td>' +
                object.quantity +
                '</td>';
            table.appendChild(tr);
        });
    }

I have added a sample code that how you can append data to existing table

var page=1;
function AddData() {

       $.ajax({
    url: "https://reqres.in/api/users?page="+page,
    type: "GET",
    
    success: function(response){
        append_json(response.data);
    }
});
page++;
}

    function append_json(data){
        data.forEach(function(object) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' +
                object.first_name +
                '</td>' +
                '<td>' +
                object.last_name +
                '</td>' +
                '<td>' +
                '<img src ='+object.avatar +' width="50px" height="50px" />'+
                '</td>';
            $("#shoppingBag tbody").append(tr);
        });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Add Data" onclick="AddData()">
<table id="shoppingBag" class="table">
    <thead>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>
    </thead>
    <tbody>
       
    </tbody>
</table>

Upvotes: 0

Ram_UI

Reputation: 485

In Ajax success method after this append_json(response);add below code to refresh the table

$("#shoppingBag").load(window.location + " #shoppingBag");

Upvotes: 2

programmer-man

Reputation: 385

change:

var table = document.getElementById('shoppingBag');

to:

var table = $('#shoppingBag tbody');

AND

change:

table.appendChild(tr);

to:

table.append(tr);

Upvotes: 0

How to reload view after AJAX POST

Answers (3)

Related Questions