Partial View Refreshes after Jquery Ajax Post

Question

In my c# MVC4 application I am working with two partial views. Partial View 1 is located in a div with the id Partial_Analysis, Partial View 2 is in a div with the id Display_Average. Each view contains a datatables.net datatable. When a row is selected within the table in partial view one, a jquery ajax post is made that causes partial view 2 to refresh with an updated datatable showing results based off of the row selection that was made in partial view 1.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('.rowselection').click(function (e) {
            var tdata = $('#form1').serialize();
            $.ajax({
                type: "POST",
                data: tdata,
                url: "Home/PartialAverage",
                success: function (result) { success(result); }
            });
        });

        function success(result) {
            $("#Display_Average").html(result);
        }
    });
</script>

When a specific button is clicked, partial view 1 is refreshed.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#ChangeName').click(function (e) {
            var tdata = $('#form1').serialize();
            var origname = $('#NameDiv').find('input[name="Name"]').first().val();
            var newname = $('#NameDiv').find('input[name="updatedName"]').first().val();
            $.ajax({
                type: "POST",
                data: {
                    mCollection: tdata,
                    Name: origname,
                    updatedName: newname
                },

                url: "Home/ChangeName",
                success: function (result) { success(result); }
            });
        });


        function success(result) {
            $("#Partial_Analysis").html(result);
        }
    });
</script>

Upon this refresh of partial view 1, I want the second partial view to refresh also. I have tried this which causes an infinite loop.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#Partial_Analysis').ajaxSuccess(function (e) {
            var tdata = $('#form1').serialize();
            $.ajax({
                type: "POST",
                data: {
                    mCollection: tdata,
                },

                url: "Home/PartialAverage",
                success: function (result) { success(result); }
            });
        });


        function success(result) {
            $("#Display_Average").html(result);
        }
    });
</script>

Andrei Andrei · Accepted Answer · 2013-04-15T11:56:09

ajaxSuccess is a global handler which is called whenever a response for an ajax call is received. Performing another ajax call in it will definitely cause an infinite loop.

Probably the best option here is to update second table in the success handler of the first partial view:

function success(result) {
    $("#Partial_Analysis").html(result);

    reloadDisplayAverage();
}

function reloadDisplayAverage() {   
    var tdata = $('#form1').serialize();
    $.ajax({
        type: "POST",
        data: {
            mCollection: tdata,
        },
        url: "Home/PartialAverage",
        success: function (result) { success(result); }
    });

    function success(result) {
        $("#Display_Average").html(result);
    }
}

Partial View Refreshes after Jquery Ajax Post

2 Answers