0

I have a jQuery Dialog box which is populated by an AJAX call to a controller action in ASP.net MVC. This AJAX call returns more than 13,000 rows of data which is bound to a table inside the dialog.

In IE11 the scrollbar becomes unresponsive for few seconds while I am trying to scroll through the result, and then responds and then again becomes unresponsive and so on. It's not really giving a good UI experience for the user. The scrollbar mostly remains freezed. I do not face the same issue in Chrome.

Below is the code I have written for the dialog.

$("#dialog").dialog({
  title: "title",
  width: 800,
  height: 450,
  modal: true,
  open: function(event, ui) {
    $(this).load(UrlHelper.Resolve("/ControllerName/ACtionMethodName"), function(data, status) {
      $('#ajaxSpinner').hide();
      if (status == 'success') {
        $("#dialog").html(data);
      } else {
        alert('An error occurred while processing your request');
      }
    });
  },
  close: function(event, ui) {
    $(this).dialog('close');
  },
  dialogClass: 'dialogPosition'
});

I wish I could have condensed the problem into a fiddle for your help, I have no idea how to reproduce it in a smaller scale. Hope I was able to explain the issue.

1
  • 1
    You're loading 13,000 rows of data, it's going to be slow. I'd strongly suggest you look in to server side filtering and paging if you want to speed this up.
    – Rory McCrossan
    Commented Dec 19, 2018 at 10:41

1 Answer 1

Reset to default
0

You are trying to load too much content in one time, try to paginate your datas.

You can even try this jquery infinite scroll plugin (jscroll) : https://jscroll.com/

4
  • can we paginate inside the jquery dialog?
    – subhrendu
    Commented Dec 19, 2018 at 11:15
  • jscroll usage The jscroll method is called on the selector for which you want your scrollable content contained within.
    – ELRECO
    Commented Dec 19, 2018 at 14:31
  • You can call the plugin inside you open function : open: function(event, ui) { ... *call the plugin*... }
    – ELRECO
    Commented Dec 19, 2018 at 14:36
  • 1
    Based on my understanding, No one going to view 13000 rows of data in a JQuery dialog. So it is better that you can only display the data which can be easily view and understand by the user. Like top 10 or top 50 records. If user want to view more data than it is better to display on other page with in grid. Generally dialog used to display the small amount of information. Further, You can also try to modify your JQuery code for better performance. You can refer the link below. modernweb.com/5-things-you-should-stop-doing-with-jquery
    – Deepak-MSFT
    Commented Dec 20, 2018 at 2:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.