Call JS function from code behind

**snufse** · Sep 21st, 2010, 12:02 PM

Using "Page.ClientScript" how would I call the function from code behind?

Code:

<script type="JavaScript">
     function OnBeginRequest(sender, args)
    {        
     $get("IMGDIV").style.display="";
    } 
</script>

**gep13** · Sep 21st, 2010, 02:24 PM

snufse,

Why is it you are finding the need to do this? Can you provide a use case?

You could do this using Page.RegisterStartupScript, and in there, define the JavaScript that would call the JavaScript function on your page.

Gary

**snufse** · Sep 21st, 2010, 02:37 PM

gary,

It was actually looking at alternatives to using UpdatePanel with async trigger that apparently is not working for me. So I thought calling a JS function (from code behind) that would show a progress control and likewise stop showing the progess control (when data is bound). Jus an idea.

**avrail** · Sep 21st, 2010, 04:02 PM

snufse,
async trigger is working

but may be you still facing a problems about it, and we can provide a help.

**snufse** · Sep 21st, 2010, 06:40 PM

avrail,

Thank you for the offer...

I will first work on the UpdatePanel issues etc (from my other, now a big post).

What I am really after is a progress control (like a spinning wheel) that stays on the page till my gridview is bound. Sometimes response time could be 1 second or somettimes 6-7 seconds (depending on the slection made in the dropdown list). I like the progress control to automatically be disabled at that point (or disbaled by code).

**gep13** · Sep 22nd, 2010, 02:07 AM

snufse,

I see where you are coming from, but rather than trying to force something to do something it isn't meant to, I would suggest that you stick with the controls that are designed specifically for that purpose. I haven't had a chance to look at your other thread yet, time constraints, but when I do, I will see if I can offer something to help.

Gary

**snufse** · Sep 22nd, 2010, 01:07 PM

Guys,

Just came accross this link:

http://www.codedigest.com/CodeDigest...-Net-AJAX.aspx

So I tried getting something to work, but without luck:

Code:

<script type="JavaScript">
     var Page;
     var postBackElement;
     function pageLoad()
     { 
      Page = Sys.WebForms.PageRequestManager.getInstance(); 
      Page.add_beginRequest(OnBeginRequest);
      Page.add_endRequest(endRequest);
     }
    function OnBeginRequest(sender, args)
    {        
     $get("IMGDIV").style.display="";
    } 
     function OnEndRequest(sender, args)
    {
     $get("IMGDIV").style.display="none";
    } 
  </script>

</head>
<body onload="pageLoad();">

    <form id="form1" runat="server">
        
      <div id="IMGDIV" style="display:none;position:absolute;left: 35%;top: 25%;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:103;">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif"/>
        <asp:Label ID="Label1" runat="server" Text="Loading...."/>                 
     </div>

   <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="OnBeginRequest();" style="z-index: 100; left: 20px; position: absolute; top: 235px" />

   <asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="OnEndRequest();" Style="z-index: 104; left: 163px; position: absolute; top: 234px" />

**gep13** · Sep 22nd, 2010, 03:04 PM

I will give this a try in the morning, but to help us, can you give a description of what exactly didn't work in the above?

Gary

**snufse** · Sep 22nd, 2010, 04:10 PM

Hi gary,

Sorry, but when I click the Button1, I expect to see the controls within the <DIV> showing a label and an image (Loading text with a spinning wheel) , this does not happen. Thank you.

**gep13** · Sep 23rd, 2010, 01:30 AM

Try this one:

http://msdn.microsoft.com/en-us/library/bb397432.aspx

Gary

**snufse** · Sep 23rd, 2010, 08:50 AM

I am still struggling calling java script functions. Below code works for Button3 but not for Button1 and Button2 (the IMGDIV is not being shown). Can somebody tell me what I am doing wrong? Thank you.

Code:

<&#37;@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Test_Progress_Control._Default" %>

<!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>Untitled Page</title>
    
    
 <script type="text/javascript">
     var Page;
     var postBackElement;
     function pageLoad()
     { 
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
     }
    function OnBeginRequest(sender, args)
    {        
     $get("IMGDIV").style.display="";
    } 
     function OnEndRequest(sender, args)
    {
     $get("IMGDIV").style.display="none";
    } 
    function Test()
    {
    return alert('Hello!');
    }
 </script>

</head>
<body onload="pageLoad();">

    <form id="form1" runat="server">
                  
      <div id="IMGDIV" style="display:none;position:absolute;left: 35%;top: 25%;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:103;">
        <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif"/>
        <asp:Label ID="Label1" runat="server" Text="Loading...."/>                 
     </div>

   <asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="OnBeginRequest()" style="z-index: 100; left: 20px; position: absolute; top: 235px" />
   <asp:Button ID="Button2" runat="server" Text="Button2" OnClientClick="OnEndRequest();" Style="z-index: 104; left: 163px; position: absolute; top: 235px" />
   <asp:Button ID="Button3" runat="Server" Text="Button3" OnClientClick="Test()" Style="z-index: 104; left: 235px; position: absolute; top: 235px" />
                
    </form>
</body>
</html>

**gep13** · Sep 23rd, 2010, 09:05 AM

Now you seem to be going off on a tangent...

You seem to be trying to call OnBeginRequest and OnEndRequest directly, which is not the intention, of this pattern, but rather you hook up event handlers for those actions.

Did you try the sample that I linked to? It seemed to do exactly what you wanted.

Gary

Thread: Call JS function from code behind

Thread Tools

Display

Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Re: Call JS function from code behind

Posting Permissions