In my C # MVC4 application, I work with two partial views. Partial view 1 is in the div with the identifier Partial_Analysis, Partial View 2 is in the div with the id Display_Average. Each view contains datatables.net datatable. When a row is selected inside the table in a partial view, a jquery ajax message is generated that causes partial view 2 to be updated with updated data displaying the results based on 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 pressed, partial view 1 is updated.
<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>
With this update of partial view 1, I also want the second partial view to also be updated. I 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>