Load Page in Sections

[tqeonline]

I have a page that has 2 gridviews and 3 or 4 charts. It takes it a few seconds to load depending on a couple of items.

1. How many items are in the gridviews
2. The number of days the charts span

My question is this

1. Is there a way to make the page display like Gridview1 then continue to load the rest?

2. If not, is there a way to just databind the gridviews and like the first chart on page load then have checkboxes for when you want to see the other charts?

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[ca8msm]

1. Yes, but you would have to change your approach to use an AJAX method. You would need to write javascript based functions to load the charts once the page had loaded.

2. You could use a checkbox to load further charts by making it post back to the server (eother through the AutoPostBack property or by having a button that the user clicks to send the request).

Personally I think #1 is a cleaner option.

Mark,

Darlington Web Design[tab]|[tab]Experts, Information, Ideas & Knowledge[tab]|[tab]ASP.NET Tips & Tricks

 

[jmeckley]

how much data are you loading into the gridviews? if you use server side paging (paging at the database, not in code) you can improve your load time when working with larger sets of data.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tqeonline]

How do i do the javascript way? I'm already using some Ajax Script managers and update panels progress updates.

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008

 

[jmeckley]

by using a script to make an ajax call. the jquery framework makes ajax really simple. check out there documentation for more details.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[tqeonline]

This is what i have implemented but it doesn't seem to be running right. Any ideas?

<script language="javascript" type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-12283262-2']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? '[URL unfurl="true"]https://ssl'[/URL] : '[URL unfurl="true"]http://www')[/URL] + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    function pageLoad() {
        ret = WebService.FetchHeader(OnCompleteHeader, OnTimeOut, OnError);
        ret = WebService.FetchchtDefectSummary(OnCompletechtDefectSummary, OnTimeOut, OnError);
        ret = WebService.FetchgvDefects(OnCompletegvDefects, OnTimeOut, OnError);
        ret = WebService.FetchDefectAging(OnCompletechtDefectAging, OnTimeOut, OnError);
        ret = WebService.FetchchtProgress(OnCompletechtProgress, OnTimeOut, OnError);
        ret = WebService.FetchgvCycles(OnCompletegvCycles, OnTimeOut, OnError);
        ret = WebService.FetchchtConvergence(OnCompletechtConvergence, OnTimeOut, OnError);
    }
    function OnCompleteHeader(result) {
        document.getelementbyID('HeaderDIV').innerHTML = result;
    }
    function OnCompletegvCycles(result) {
        document.getelementbyID('gvCyclesDIV').innerHTML = result;
    }
    function OnCompletechtProgress(result) {
        document.getelementbyID('chtProgressDIV').innerHTML = result;
    }
    function OnCompletechtDefectSummary(result) {
        document.getelementbyID('chtDefectSummaryDIV').innerHTML = result;
    }
    function OnCompletechtDefectAging(result) {
        document.getelementbyID('chtDefectAgingDIV').innerHTML = result;
    }
    function OnCompletechtConvergence(result) {
        document.getelementbyID('chtConvergenceDIV').innerHTML = result;
    }
    function OnCompletegvDefects(result) {
        document.getelementbyID('gvDefectsDIV').innerHTML = result;
    }
    function OnTimeOut(result) {
        alert("TIMEOUT");
    }
    function OnError(result) {
        alert("ERROR");
    }
</script>

in the WebService I have this:

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="[URL unfurl="true"]http://tempuri.org/")>[/URL] _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function FetchgvCycles() As String
        Return ""
    End Function
    Public Function FetchchtProgress() As String
        Return ""
    End Function
    Public Function FetchchtDefectSummary() As String
        Return ""
    End Function
    Public Function FetchchtDefectAging() As String
        Return ""
    End Function
    Public Function FetchchtConvergence() As String
        Return ""
    End Function
    Public Function FetchgvDefects() As String
        Return ""
    End Function
    Public Function FetchHeader() As String
        Return ""
    End Function
End Class

the page is throwing an error on line 21 which is the blank space between these lines

    })();

    function pageLoad() {

The error being

"Object doesn't support this property or method."

- Matt

"If I must boast, I will boast of the things that show my weakness"

- Windows 2003 Server, 98 SE, XP
- VB.NET, VSTS 2010, ASP.NET, EXCEL VBA, ACCESS, SQL 2008