Asyncronously Load Panels using jQuery in ASP.NET application

Question

I have an ASP.net application which contains a dashboard interface which consists of various number of panels. Each Panel contains a HighChart control and is loaded from a different data source. Some of the data source may take some time to execute, therefore I don't want to slow down the overall page execution because of one slow loading data source.

I would like the page to load then each panel to appear when it's data is ready.

As I'm using High charts to display the data I have jQuery code similar to:

 $(document).ready(function () {

        var panelIDList = dashID.Get("panelList");

        for (var i = 0; i < panelIDList.length; i++) {
            addpanel(panelIDList[i]);
        }            
    }); 

    function addpanel(panelID)
    {
        $.ajax({
            type: "POST",
            url: "Data.aspx/GetData",
            data: "{val:'" + panelID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var myObject = eval('(' + msg.d + ')');

                var options = {
                    chart: {
                        renderTo: myObject.renderTo,
                        type: myObject.chartVal,
                        height: 300,
                        width: 600
                    },
                xAxis: {
                        categories: myObject.xaxis.Categories,
                },
                series: myObject.serList
            };

            var chart = new Highcharts.Chart(options);

        }
    });

As can be seen in $(document).ready I make an Ajax call back to the server to retrieve a JSON data structure which is used to construct the charts data.

This all works fine, except that the calls not seems to be truly asynchronous, if the first panel is slow to load then the subsequent panels aren't loaded until after the slow first panel loads. To demonstrate I've added a Thread.Sleep in 1 of the panels DataSource.

I wouldn't have though that this was the case as I'm using Ajax calls.

Community · Accepted Answer · 2017-05-23 12:13:18Z

0

Well once I had a similar problem

First try adding

async: true,
cache: false

to you ajax call

If that doesn't solve your problem then you need to disable the Session on the page

<%@ Page EnableSessionState="False" ....

For more info:

How to display the Asynchronous results which one is first in asp.netweb application?

REST WCF service locks thread when called using AJAX in an ASP.Net site

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jul 25, 2012 at 9:08

Jupaol

21.4k9 gold badges71 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

keitn Over a year ago

Unfortunately I having the Session enabled on my page is pretty crucial to me application. Setting async to true and cache to false doesn't solve my problem.

Jupaol Over a year ago

Well then probably you should consider moving your PageMethods to services: stackoverflow.com/q/11250109/1268570, I just tested the solution provided in the previous link and it worked, even when the Session is enabled on the page

keitn Over a year ago

The problem I have is that I'm using Session information quite a bit, when a user logs on there is quite a bit of information stored in the session for that user, changes they make while in my app are also stored in the session. It may be that I need to restructure my calls to pass all pertinent information as a WS call

Jupaol Over a year ago

Are you using your Session in the GetData method?

keitn Over a year ago

Yes, it's a dashboard type app. In the UI a user may change a whole host of parameter values, there will be other values set in the session based on their login (department, roles, access levels etc). This stuff must be persisted in the Session. I could in theory pass all this information to the GetData method, however this could become very convuleted.

|

Collectives™ on Stack Overflow

Asyncronously Load Panels using jQuery in ASP.NET application

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related