Delaying Content Load using Timer and UpdatePanel

Last post 11-14-2007 10:36 PM by chetan.sarode. 15 replies.

Sort Posts:

  • Delaying Content Load using Timer and UpdatePanel

    06-27-2007, 3:09 PM
    • Participant
      1,135 point Participant
    • delorenzodesign
    • Member since 08-24-2005, 7:29 PM
    • Nutley, NJ USA
    • Posts 240

    I've created a custom template control that I'm trying to use to delay content loading on a page for long running controls.

    Here:

    1        public sealed class DelayedContentLoader : WebControl, INamingContainer
    2 {
    3 private MultiView mvContent = new MultiView();
    4 5 private int interval = 10000;
    6 public int Interval
    7 {
    8 get { return interval; }
    9 set { interval = value; }
    10 }
    11 12 public delegate bool LoadContentHandler();
    13 public LoadContentHandler OnLoadContent;
    14 15 private ITemplate loadingTemplate;
    16 [TemplateContainer(typeof(LoadingView))]
    17 public ITemplate LoadingTemplate
    18 {
    19 get { return loadingTemplate; }
    20 set { loadingTemplate = value; }
    21 }
    22 23 private ITemplate loadFailedTemplate;
    24 [TemplateContainer(typeof(LoadFailedView))]
    25 public ITemplate LoadFailedTemplate
    26 {
    27 get { return loadFailedTemplate; }
    28 set { loadFailedTemplate = value; }
    29 }
    30 31 private ITemplate contentTemplate;
    32 [TemplateContainer(typeof(ContentView))]
    33 public ITemplate ContentTemplate
    34 {
    35 get { return contentTemplate; }
    36 set { contentTemplate = value; }
    37 }
    38 39 protected override void OnInit(EventArgs e)
    40 {
    41 if (loadingTemplate != null)
    42 {
    43 LoadingView loadingViewContainer = new LoadingView();
    44 loadingTemplate.InstantiateIn(loadingViewContainer);
    45 mvContent.Views.Add(loadingViewContainer);
    46 }
    47 48 if (contentTemplate != null)
    49 {
    50 ContentView contentViewContainer = new ContentView();
    51 contentTemplate.InstantiateIn(contentViewContainer);
    52 mvContent.Views.Add(contentViewContainer);
    53 }
    54 else
    55 throw new
    Exception("A Content Template must be specified.");
    56 57 if (loadFailedTemplate != null)
    58 {
    59 LoadFailedView loadFailedViewContainer = new LoadFailedView();
    60 loadFailedTemplate.InstantiateIn(loadFailedViewContainer);
    61 mvContent.Views.Add(loadFailedViewContainer);
    62 }
    63 }
    64 65 protected override void OnLoad(EventArgs e)
    66 {
    67 UpdatePanel updatePanel = new UpdatePanel();
    68 updatePanel.UpdateMode = UpdatePanelUpdateMode.Always;
    69 70 mvContent.ActiveViewIndex = 0;
    71 72 updatePanel.ContentTemplateContainer.Controls.Add(mvContent);
    73 74 Timer timer = new Timer();
    75 timer.ID = "timerDelayedContentLoader";
    76 timer.Interval = interval;
    77 timer.Tick += new EventHandler(timer_Tick);
    78 79 updatePanel.ContentTemplateContainer.Controls.Add(timer);
    80 81 Controls.Add(updatePanel);
    82 }
    83 84 public override Control FindControl(string id)
    85 {
    86 Control ctrl = mvContent.Views[1].FindControl(id);
    87 if (ctrl != null)
    88 return ctrl;
    89 90 ctrl = mvContent.Views[2].FindControl(id);
    91 if (ctrl != null)
    92 return ctrl;
    93 94 ctrl = mvContent.Views[0].FindControl(id);
    95 96 return ctrl;
    97 }
    98 99 private void timer_Tick(object sender, EventArgs e)
    100 {
    101 bool loadedContentSuccessfully = false;
    102 if (OnLoadContent != null)
    103 loadedContentSuccessfully = OnLoadContent();
    104 105 // Stop the timer. 106 Timer timer = FindControl("timerDelayedContentLoader") as Timer;
    107 if (timer != null)
    108 timer.Enabled = false;
    109 110 int visiblePlh = loadedContentSuccessfully ? 1 : 2;
    111 mvContent.ActiveViewIndex = visiblePlh;
    112 }
    113 }

      

    The control does work, but once the first 'panel' loads I'm getting this error:

     

    Error: Sys.ScriptLoadFailedException: The script 'http://localhost:2059/WebResource.axd?d=2969z1Qx3dbsV5nCF1BRcXhpF5ub86-cDZ-FaGYdZEBQbKzZVJb7tl6DB7CRlXIMyp8MDajf0oi_5PQ_Zb35Pg2&t=633181289164114804' failed to load. Check for:
    Inaccessible path.
    Script errors. (IE) Enable 'Display a notification about every script error' under advanced settings.
    Missing call to Sys.Application.notifyScriptLoaded().
    Source File: http://localhost:2059/ScriptResource.axd?d=w7roB_KjU8DhSirRDxfFxPRhP-DUqImf_4Nd1a5Co3kx1o511QAFqGXxMtkfZR8UkArHbaLDYRdK8lHjJK-ARWQArhEXy5Ydco_GHuMUgH41&t=633120912402558276
    Line: 3311

    The error kills all of the JavaScript on the page - others delayed content loaders stop loading and all other AJAX stuff ceases to work. The line that is referenced is this line #10 below:

    // MicrosoftAjax.js
    // Microsoft AJAX Framework. 
    1    function Sys$_ScriptLoader$_raiseError(multipleCallbacks) {
    2 var callback = this._scriptLoadFailedCallback;
    3 var scriptElement = this._currentTask.get_scriptElement();
    4 this._stopLoading();
    5
    6 if(callback) {
    7 callback(this, scriptElement, multipleCallbacks);
    8 }
    9 else {
    10 throw Sys._ScriptLoader._errorScriptLoadFailed(scriptElement.src, multipleCallbacks);
    11 }
    12 }

    Is there anything that can be done here?  By the way, this control is inside of a Web Part.  If I remove all the Web Part stuff, I don't get the error but only one of my delayed content loading controls finishes loading.

    Any help would be much appreciated.

    Thanks!
     

    Michael De Lorenzo
    -------------------------------
    www.delorenzodesign.com
  • Re: Delaying Content Load using Timer and UpdatePanel

    06-30-2007, 9:31 AM
    • Participant
      1,135 point Participant
    • delorenzodesign
    • Member since 08-24-2005, 7:29 PM
    • Nutley, NJ USA
    • Posts 240

    Has anyone tried to do this? 

    Michael De Lorenzo
    -------------------------------
    www.delorenzodesign.com
  • Re: Delaying Content Load using Timer and UpdatePanel

    07-02-2007, 8:44 AM

    Hi

    Ok,Just do it like this:

    <%@ Page Language="C#" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
        }
    </script>

    <script type="text/javascript">
    function delayLoad()
    {
    document.getElementById("<%= Button1.ClientID %>").click();
    document.getElementById("<%= UpdateProgress1.ClientID %>").style.display = "block";
    }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body onload="setTimeout('delayLoad()',3000)">
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <div visible="true"><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    Waiting..............
                </ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        </form>
    </body>
    </html>

     

    Thanks:)

    Sincerely,
    Jin-Yu Yin
    Microsoft Online Community Support
  • Re: Delaying Content Load using Timer and UpdatePanel

    07-02-2007, 9:00 AM
    • Participant
      1,135 point Participant
    • delorenzodesign
    • Member since 08-24-2005, 7:29 PM
    • Nutley, NJ USA
    • Posts 240

    How is that the same as what I was trying to do?  Unless you're saying I need to have my update panel's UpdateMode set to conditional.  Are you? 

    Michael De Lorenzo
    -------------------------------
    www.delorenzodesign.com
  • Re: Delaying Content Load using Timer and UpdatePanel

    07-03-2007, 4:35 AM

    Hi,

    In my code,I delay by 3 second to load the content.

    It's the same as following code:

    <%@ Page Language="C#" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            Timer1.Enabled = false;
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <div visible="true">
                            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
                        <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
                        </asp:Timer>
                    </ContentTemplate>
                </asp:UpdatePanel>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Waiting..............
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
        </form>
    </body>
    </html>

    A timer for an updatepanel.we can do it.

    I know you just want to creat a contorl to include a updatepanel and a timer,I'll do it for you later.

    Sincerely,
    Jin-Yu Yin
    Microsoft Online Community Support
  • Re: Delaying Content Load using Timer and UpdatePanel

    07-03-2007, 5:53 AM
    Answer

    OK

    I have done it for you now.

    bur I 'm using webcontrol rather than server control,I think it is more simple:)

    The code :

    The page:

    <%@ Page Language="C#" %>

    <%@ Register Src="WebUserControl5.ascx" TagName="WebUserControl5" TagPrefix="uc1" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">
        protected bool WebUserControl5_1_LoadContent(object sender, EventArgs e)
        {
            try
            {
                ((WebUserControl5)sender).myContent = "OK.............";
            }
            catch
            {
                return false;
            }
            return true;
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div>
                <uc1:WebUserControl5 ID="WebUserControl5_1" runat="server" OnLoadContent="WebUserControl5_1_LoadContent" />
            </div>
            <div>
                <uc1:WebUserControl5 ID="WebUserControl5_2" runat="server" OnLoadContent="WebUserControl5_1_LoadContent" />
            </div>
            <div>
                <uc1:WebUserControl5 ID="WebUserControl5_3" runat="server" OnLoadContent="WebUserControl5_1_LoadContent" />
            </div>
            <div>
                <uc1:WebUserControl5 ID="WebUserControl5_4" runat="server" OnLoadContent="WebUserControl5_1_LoadContent" />
            </div>
        </form>
    </body>
    </html>

    The control:

    <%@ Control Language="C#" ClassName="WebUserControl5" %>

    <script runat="server">
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            bool loadedContentSuccessfully = false;
            if (LoadContent != null)
                loadedContentSuccessfully = LoadContent(this,e);

            //  Stop the timer.
            Timer1.Enabled = false;

            int visiblePlh = loadedContentSuccessfully ? 1 : 2;
            MultiView1.ActiveViewIndex = visiblePlh;
        }

        public delegate bool LoadContentHandler(object sender, EventArgs e);
        public event LoadContentHandler LoadContent;
        public string myContent
        {
            set
            {
                TextBox2.Text = value;
            }
        }
    </script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick">
            </asp:Timer>
            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="LoadingView" runat="server">
                    Loading..............</asp:View>
                <asp:View ID="ContentView" runat="server">
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></asp:View>
                <asp:View ID="LoadFailedView" runat="server">
                    Failed..............</asp:View>
            </asp:MultiView>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            Waiting..............
        </ProgressTemplate>
    </asp:UpdateProgress>

     Works cool......:)

    Thanks

    Sincerely,
    Jin-Yu Yin
    Microsoft Online Community Support
  • Re: Delaying Content Load using Timer and UpdatePanel

    07-10-2007, 10:47 PM
    • Participant
      1,135 point Participant
    • delorenzodesign
    • Member since 08-24-2005, 7:29 PM
    • Nutley, NJ USA
    • Posts 240

    Not exactly what I was looking for since I want to build something that's a bit more re-usable than a simple ASCX.  Another issue I found was that if I had two instances of the same templated control, say one names 'ctrl1' and the other named 'ctrl2' the timer would just keep updating one or the other like this...

     page loads

    -----ctrl 1 loaded after delayed

    -----ctrl2 loaded after delayed (ctrl1's content hidden)

    -----ctrl1 loaded after delayed (ctrl2's content hidden)

    ------and so on

     

    Very strange.
     

    Michael De Lorenzo
    -------------------------------
    www.delorenzodesign.com
  • Re: Delaying Content Load using Timer and UpdatePanel

    10-18-2007, 7:35 PM
    • Member
      10 point Member
    • Codey
    • Member since 10-18-2007, 11:29 PM
    • Posts 5

    Delayed content loading is BRILLIANT!.....IF you arent delaying an async callback such as a databind. What if you would like to load the graphical content FIRST and then populate a combobox with its records as the delayed content - The browser freezes until the databind is complete! Thats fine if your only VIEWING the page but what if the user would like to start entering input whilst waiting for a Suburb Dropdown to populate.....

    Codey Weller
    Software Professional
    Biztech (Aust) Pty Ltd
  • Re: Delaying Content Load using Timer and UpdatePanel

    11-04-2007, 1:15 AM
    • Member
      150 point Member
    • rajak
    • Member since 07-17-2007, 7:49 AM
    • Posts 93

    Hi Delorenzo,

          Im also trying for the same. Im trying to delay content loading using ajax controls in Custom control. I have no Idea how to do it, if u got the solution for this problem then plz let me knw.

    Thanks in Advance,

    Rajak Shaik.

  • Re: Delaying Content Load using Timer and UpdatePanel

    11-04-2007, 12:37 PM
    • Participant
      1,135 point Participant
    • delorenzodesign
    • Member since 08-24-2005, 7:29 PM
    • Nutley, NJ USA
    • Posts 240

     I couldn't get this to work exactly as I wanted it to, so I scrapped it and switched to a solution using JavaScript and Web Services with Prototype and Scriptaculous (for my animation).  The solution works great!


     

    Michael De Lorenzo
    -------------------------------
    www.delorenzodesign.com
  • Re: Delaying Content Load using Timer and UpdatePanel

    11-04-2007, 11:39 PM
    • Member
      150 point Member
    • rajak
    • Member since 07-17-2007, 7:49 AM
    • Posts 93

    Hi Delorenzo,

         Thanks for replying. Can u plz tell me how it can be done using Javascript and Webservices, if possible with code.

    Thanks in Advance,

    Thanks & Regards,

    Rajak Shaik.

  • Re: Delaying Content Load using Timer and UpdatePanel

    11-14-2007, 4:56 PM
    • Member
      22 point Member
    • garyjones
    • Member since 05-14-2007, 4:39 PM
    • Posts 11

    Another question:

     Can I do something like this below?  I'd like to update the time as a process is running.  However, the time on the edit box only changes (or updates) on the last one.  I've tried UpdatePanel1.Update() as well and this doesn't seem to get the refresh to happen either.

       protected void Timer1_Tick(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            System.Threading.Thread.Sleep(3000);
            TextBox1.Text = DateTime.Now.ToString();
            Timer1.Enabled = false;
        }

    Thanks,

     Gary

  • Re: Delaying Content Load using Timer and UpdatePanel

    11-14-2007, 5:41 PM
    • Member
      10 point Member
    • Codey
    • Member since 10-18-2007, 11:29 PM
    • Posts 5

    Hi Gary...

     I am a little unclear on what you are trying to achieve. Did you want to show the amount of time that a process takes to complete? or would you just like to show the current time and refresh it every 3 seconds?

     Perhaps set the timer to 3000 and then:

       protected void Timer1_Tick(object sender, EventArgs e)
        {
            TextBox1.Text = DateTime.Now.ToString();

            Updatepanel.update

        }

    ------------------
    Codey

    Codey Weller
    Software Professional
    Biztech (Aust) Pty Ltd
  • Re: Delaying Content Load using Timer and UpdatePanel

    11-14-2007, 8:00 PM
    • Member
      22 point Member
    • garyjones
    • Member since 05-14-2007, 4:39 PM
    • Posts 11

    Well- not exactly so let me ask my real question.  Smile   I hate to get a little off the posting subject, but hopefully it's helpful.

    Inside the timer I'd like to run a loop and when each loop is done then I'd like to update the date in the text box.  Actually I don't really want to use a timer either, but if I can make it work that way that would be ok too.  It only seems to update the text box at the end and doesn't want to update it after each loop.

    protected void Timer1_Tick(object sender, EventArgs e)
    {

      for (int i = 0; i < 10; i++)

      {

        CallProcess(i);

        TextBox1.Text = DateTime.Now.ToString();   

     

        UpdatePanel1.Update();

    }

    Thanks!!

     Gary 

     

     

  • Re: Delaying Content Load using Timer and UpdatePanel

    11-14-2007, 9:03 PM
    • Member
      10 point Member
    • Codey
    • Member since 10-18-2007, 11:29 PM
    • Posts 5

    The Update wont occur until the postback is complete, therefore the final value that you assign the textbox will be the value that is displayed.

     Even though you are forcing an update on the updatepanel, that update wont display until the page completes its postback.

    I see that you are trying to place a time stamp in a textbox evertime the CallProcess routine completes.

    You probably need to consider multiple textboxes and a Select Case statement:

    For i = 1 To 10

    CallProcedureHere(i)

     Select Case i

     
    Case 1
        Textbox1.text = Now
      Case 2
       textbox2.text = Now

     End Select

    Next

    Codey Weller
    Software Professional
    Biztech (Aust) Pty Ltd
Page 1 of 2 (16 items) 1 2 Next >