In my Rails application, I am using the gridList library to display charts. The chart data is fetched asynchronously from a controller method in JSON format via AJAX. Upon initial page load, each gridlist item displays a loading icon while simultaneously making an AJAX call to retrieve the data. Each grid item triggers a separate AJAX request. While the charts are rendering correctly, an issue arises where the server becomes unresponsive to other requests such as page refresh or route changes until all the charts have finished loading.
The problem appears to be on the server side, as the front-end JavaScript functions properly during AJAX calls.
The grid items are generated using the following partial:
%li.grid_item{ data: { id: chart.id } }
.chart-loading
// loading icon
.chart-content.hide
// hidden chart content
:javascript
var chart_id = "#{chart.id}"
$.ajax({
url: "#{get_data_charts_path(chart.id)}",
success: function (res) {
var data = JSON.parse(res)
hideLoadingChart(chart_id) // hides loading and shows chart-content
renderChart(data) // plots chart for the data
}
})
The partial is invoked using this command:
.grid-container
%ul#grid.grid
= render partial: 'chart', collection: @current_user.get_charts
What might be causing this issue? Is there a way to cancel ongoing AJAX calls when a new request is made to the server? Also, is the approach of making multiple AJAX calls for each chart the right design choice? I aim to have the charts load dynamically as data becomes available, rather than all at once towards the end.