Question

I added a new client using JQuery dialog and on success I want to reload the page but not happening.

JQuery call

 $("#saveNewClient").click(function () 
        {
            if ($(this).valid())
            {
                var clientName = null;
                var clientTypeId = null;
                var clientCode = null;

                clientName = $('#Client_ClientName').val();
                clientTypeId = $('#ClientTypeSelectId').val();
                clientCode = $('#Client_ClientCode').val();

                $.ajax(
                    {
                        type: "POST",
                        async: false,
                        url: "/Client/AddClient",
                        cache: false,
                        data: { "clientName": clientName, "clientTypeId": clientTypeId, "clientCode": clientCode },
                        dataType: "json",
                        error: function (request) {
                            alert(request.responseText);
                        },
                        success: function (result) {
                            //alert('Successfully Inserted Client');
                            $.ajax({
                                url: "/Client/Index",
                                type: 'GET',
                                datatype: 'json',
                                success: function (data) {
                                    //alert('got here with data');
                                },
                                error: function () {
                                    //alert('something bad happened');
                                }
                            });
                            $('#myClientDialogContainer').dialog('close');
                        }
                    });
            }
            return false;
        });

Earlier I given an alert message “Successfully added client”. But as the client added is not appearing in the grid. I called another ajax call to refresh the page with the data. The action method is calling and when the page loads I can see the the added client data is passing to Grid, but the grid is not appearing with the newly inserted client. When I refresh the page the row is appearing. Please can anyone help.

Answer 1

Make sure that in your success callback you refresh your DOM:

success: function (data) {
    //alert('got here with data');
    $('#yourGridContainer').html(data);
}

This obviously assumes that the Index controller action is returning a partial view containing the grid with the updated results.