After clicking a button, I expect a chart to be created but it does not appear.
In my project there are 2 divs: container1 and container2.
Container1 successfully renders a partialView in Razor which creates the chart. However, container2 is supposed to display a chart after clicking the Change Data button. When the button is clicked, an AJAX request is made to call an action that renders the same partialView as shown in container1, but the chart does not show up!
Where did I go wrong?
The action is called, the server responds, and there are no errors in the console. This is what happens after clicking the button:
https://i.sstatic.net/qwoZn.png
Index.cshtml (View)
<button id="changeDataButton">Change Data</button>
<div id="container1">
@{
Random random = new Random();
Html.RenderPartial("~/Views/Shared/chartPartialView.cshtml", new ChartModel()
{
CategoriesStackBar = new List<string>() { "A", "B", "C" },
Series = new List<Series>()
{
new ColumnSeries()
{
Name = "A",
Data = new List<ColumnSeriesData>()
{
new ColumnSeriesData()
{
Y = random.Next(100),
},
new ColumnSeriesData()
{
Y = random.Next(100),
},
new ColumnSeriesData()
{
Y = random.Next(100),
},
},
}
},
Id = "chart",
});
}
</div>
<div id="container2">
</div>
@section scripts{
<script src="~/Scripts/highcharts.js"></script>
<script>
$(document).ready(function () {
$('#changeDataButton').click(function (event) {
console.log('change data button clicked');
$.ajax({
async: false,
url: '/Home/UpdateChart',
success: function (partialView) {
console.log("success");
console.log(partialView);
$('#container2').innerHTML = (partialView);
}
})
})
});
</script>
}
(Controller)
public ActionResult UpdateChart()
{
Random random = new Random();
PartialViewResult partialViewResult = PartialView("~/Views/Shared/chartPartialView.cshtml", new ChartModel()
{
CategoriesStackBar = new List<string>() { "A", "B", "C" },
Series = new List<Series>()
{
new ColumnSeries()
{
Name = "A",
Data = new List<ColumnSeriesData>()
{
new ColumnSeriesData()
{
Y = random.Next(100),
},
new ColumnSeriesData()
{
Y = random.Next(100),
},
new ColumnSeriesData()
{
Y = random.Next(100),
},
},
Id = "dynamicChart",
}
}
});
return partialViewResult;
}
Thank you for your assistance in advance.