title: Partial View Refreshes after Jquery Ajax Post
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(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);
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>When a specific button is clicked, partial view 1 is refreshed.</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(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);
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(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);
          }
      });
  &lt;/script&gt;
  </code></pre>