loading image stops on postback in ie

when i call a javascript from codebehind after several processing , the gif stops rotating ?

Tried Like below but neither worked,
1.Setting image url again,
2.Using settimeout to load image again n again.

Kindly work on this eg and provide me the solution related to this .
this demo explain my issue .
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function longLoop() {
            var dummyKey = "";
            for (i = 0; i <= 1000000; i++) {
                dummyKey = "Long running process just to cause delay " + i;
            }
            alert("Process Over");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10">
        <ProgressTemplate>
            <img alt="loading" src="../loader.gif" />
        </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>
protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tempKey", "<script>longLoop()</script>", false);
    }

Open in new window

loader.gif
LVL 18
Rajar AhmedConsultantAsked:
Who is Participating?
 
Alan WarrenApplications DeveloperCommented:
Hi meeran03,

Yeah, I encountered a few issues getting your sample page to run/compile, had to make a few modifications, these are some of the issues I encountered.

This line:
 
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tempKey", "<script>longLoop()</script>", false);

Open in new window

Returns:
Error      3      Overload resolution failed because no accessible 'RegisterStartupScript' accepts this number of arguments.
   
Even when remmed out the end script tag "</script>" generates
Error      1      Statement cannot appear within a method body. End of method assumed.

In the @Register directive your ajax TagPrefix is "cc1", but your code uses "asp" as the prefix, suggests a conflict, how is ajax registered in your web.config.
Current versions of Ajax use ToolScriptManager  instead of ScriptManager.


The LongLoop clientside function takes 0 seconds to run.
      function longLoop() {
        var my_start_time = new Date();
        document.write(my_start_time);
        document.write("<br />");
      
      var dummyKey = "";
      for (i = 0; i <= 1000000; i++) {
      dummyKey = "Long running process just to cause delay " + i;
      }

    var my_end_time = new Date();
    document.write(my_end_time);
    document.write("<br />");

Open in new window

Output:
Thu Aug 30 2012 05:27:09 GMT+0800 (W. Australia Standard Time)
Thu Aug 30 2012 05:27:09 GMT+0800 (W. Australia Standard Time)

Alan
0
 
HainKurtSr. System AnalystCommented:
that script kills browser... do something more meaningful so browser can handle all updates properly... when browser is in that loop, it does not refresh anything or repaints or responds your mouse events etc...
0
 
Rajar AhmedConsultantAuthor Commented:
hi  HainKurt,

  kills browser... do something more meaningful

     Am , just reproducing the issue on IE, this is not the original script . When i call a js from codebehind while using updateprogress functionality i get this issue on IE, the time taken to execute the Js which has been invoked from codebehind at that particular time the gif stops rotating . So , i made a simple demo such a way to execute  a long loop .  

Meeran03
0
 
Alan WarrenApplications DeveloperCommented:
Hi meeran03,

Don't think you can stop serverscript from clientside, but you can invoke a threading.sleep from either/and/or both.

<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

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

<script runat="server">
    
  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' raise a javascript alert displaying the ID we were looking for
    ' Define the name and type of the client scripts on the page. 
    Dim csname1 As [String] = "PopupScript"
    Dim cstype As Type = Me.[GetType]()

    ' Get a ClientScriptManager reference from the Page class. 
    Dim cs As ClientScriptManager = Page.ClientScript

    ' Check to see if the startup script is already registered. 
    If Not cs.IsStartupScriptRegistered(cstype, csname1) Then
      Dim cstext1 As New StringBuilder()
      cstext1.Append("<script type='text/javascript'>longLoop()</")
      cstext1.Append("script>")

      cs.RegisterStartupScript(cstype, csname1, cstext1.ToString())
      
      System.Threading.Thread.Sleep(5000)
      
    End If
  End Sub
		
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    
      function longLoop() {
        alert("clientside is running");
        setTimeout(function () { alert("Process Over"); System.Threading.Thread.Sleep(2000); }, 3000);

      }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" OnClientClick="longLoop()" />
        </ContentTemplate>
      </asp:UpdatePanel>
      <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10">
        <ProgressTemplate>
            <img alt="loading" src="../loader.gif" />Loading...
        </ProgressTemplate>
      </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
Rajar AhmedConsultantAuthor Commented:
hi alan,
 
     if you execute my code the attached gif will not animate . The gif lost its animation what it indeeds to do while executing js which is invoked from codebehind .  

  I get System is undefined error when i tried your code .
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.