Display update progress with help of j Query

Question

0.00/5 (No votes)

See more:

HI Friends

I just want to display the update progress with the help of jquery..

i am having the textbox and button and on button click i want to show update progress to display the grid view..

Kindly help for the issue ..

Thanks in advance..
Code Given below

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!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 id="Head1"  runat="server"> 
    <link href="CSS/CSS.CSS" rel="stylesheet" type="text/css" /> 
    <link href="CSS/calendar.css" rel="stylesheet" type="text/css" />       

     <title>Report</title> 
     <script type="text/javascript" language="javascript"> 
      function onCalendarShown(sender,args) 
      {
         $find('CalendarExtender4')._popupDiv.style.zIndex=10001; 
      }
      function onCalendarHidden(sender,args) 
      { 
         $find('CalendarExtender4')._popupDiv.style.zIndex=0; 
      }
      function onCalendarShown1(sender,args) 
      { 
         $find('CalendarExtender3')._popupDiv.style.zIndex=10001; 
      }
      function onCalendarHidden1(sender,args) 
      {
          $find('CalendarExtender3')._popupDiv.style.zIndex=0; 
      }
     </script>
     <link href="CSS/calendar.css" rel="stylesheet" type="text/css" />
     <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />
     <style type="text/css"> 
       .tabs { position:relative; top:1px; left:10px; } 
       .tab { border:solid 1px black; background-color:#eeeeee; padding:2px 10px; } 
       .selectedTab { background-color:white; border-bottom:solid 1px white; }
     </style>
     </head>
     <body>
         <form id="form1"  runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Scripts>
                   <asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
                   <asp:ScriptReference Path="~/jquery.blockUI.js" />
                   <asp:ScriptReference Path="~/Default.js" />
               </Scripts>
               <div>
                  <table cellpadding="4" cellspacing="4" width="100%">
                       <!-- blank Row -->
                       <tr></tr>
                       <!-- Add Button -->
                       <tr></tr>
                 </table>
              </div>
              <div class="window_blue">
                 <div style="padding-removed 1px; padding-removed 1px; padding-removed 1px; padding-removed 2px"> 
                 </div>
                 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <table backcolor="#DEBA84" style="width: 31%; height: 29px;" cellpadding="2" cellspacing="2"   align="center" border="1" >
                       <tr align ="center">
                       <th backcolor="#DEBA84" font-style="normal" color="White" font-weight="bold" text-transform="Uppercase" height="2px" align="center" colspan="2" rowspan="2" >
                          <asp:Label ID="Label2" runat="server" Text="Mobile No:-" CssClass="label3">     
                          <asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" OnTextChanged="TextBox1_TextChanged"><br />     
            <br /><asp:RequiredFieldValidator ID>

Regards
Pratham

Posted 10-Jul-12 21:31pm

pratham2587

Updated 10-Jul-12 22:14pm

Vani Kulkarni

v3

Add a Solution

Comments

Vani Kulkarni 11-Jul-12 3:57am

Hi Pratham, Please let us know what have you tried till now? Are you facing any issues in implementing your requirement? If yes post that issue.

pratham2587 11-Jul-12 4:01am

i was trying with ajax but not gettig the result ..
I am geting the out put properly but without update progress bar...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<link href="CSS/CSS.CSS" rel="stylesheet" type="text/css" />
<link href="CSS/calendar.css" rel="stylesheet" type="text/css" />
<title>Report</title>

<script type="text/javascript" language="javascript">
function onCalendarShown(sender,args)
{
$find('CalendarExtender4')._popupDiv.style.zIndex=10001;
}
function onCalendarHidden(sender,args)
{
$find('CalendarExtender4')._popupDiv.style.zIndex=0;
}
function onCalendarShown1(sender,args)
{
$find('CalendarExtender3')._popupDiv.style.zIndex=10001;
}
function onCalendarHidden1(sender,args)
{
$find('CalendarExtender3')._popupDiv.style.zIndex=0;
}
</script>

<link href="CSS/calendar.css" rel="stylesheet" type="text/css" />
<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.tabs
{
position:relative;
top:1px;
left:10px;
}
.tab
{
border:solid 1px black;
background-color:#eeeeee;
padding:2px 10px;
}
.selectedTab
{
background-color:white;
border-bottom:solid 1px white;
}

</style>
</head>
<body>
<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
<asp:ScriptReference Path="~/jquery.blockUI.js" />
<asp:ScriptReference Path="~/Default.js" />
</Scripts>

<div>
<table cellpadding="4" cellspacing="4" width="100%">

<tr>

</tr>

<tr>

</tr>
</table>

</div>

<div class="window_blue">

<div style="padding-right: 1px; padding-left: 1px; padding-bottom: 1px; padding-top: 2px">
</div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<contenttemplate>
<table backcolor="#DEBA84" style="width: 31%; height: 29px;" cellpadding="2" cellspacing="2" align="center" border="1" >

<tr align ="center">

<th backcolor="#DEBA84" font-style="normal" color="White" font-weight="bold" text-transform="Uppercase" height="2px" align="center" colspan="2" rowspan="2" >
<asp:Label ID="Label2" runat="server" Text="Mobile No:-" CssClass="label3">
<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" OnTextChanged="TextBox1_TextChanged"><br />
<br />
<asp:RequiredFieldValidator ID

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 11-Jul-12 4:18am

Where is your code for UpdateProgress control ?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pratham2587 · Answer 1 · 2012-07-10T22:20:00

Find the code.......

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<link href="CSS/CSS.CSS" rel="stylesheet" type="text/css" />
    <link href="CSS/calendar.css" rel="stylesheet" type="text/css" />
    <title>Report</title>

    <script type="text/javascript" language="javascript">
    function onCalendarShown(sender,args)
    {
        $find('CalendarExtender4')._popupDiv.style.zIndex=10001;
    }
    function onCalendarHidden(sender,args)
    {
        $find('CalendarExtender4')._popupDiv.style.zIndex=0;
    }
    function onCalendarShown1(sender,args)
    {
        $find('CalendarExtender3')._popupDiv.style.zIndex=10001;
    }
    function onCalendarHidden1(sender,args)
    {
        $find('CalendarExtender3')._popupDiv.style.zIndex=0;
    }
</script>

    <link href="CSS/calendar.css" rel="stylesheet" type="text/css" />
    <link href="CSS/CSS.css" rel="stylesheet" type="text/css" />

     <style type="text/css">

        .tabs
        {
            position:relative;
            top:1px;
            left:10px;
        }
        .tab
        {
            border:solid 1px black;
            background-color:#eeeeee;
            padding:2px 10px;
        }
        .selectedTab
        {
            background-color:white;
            border-bottom:solid 1px white;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
      <asp:ScriptReference Path="~/jquery-1.2.6.min.js" />
      <asp:ScriptReference Path="~/jquery.blockUI.js" />
      <asp:ScriptReference Path="~/Default.js" />
    </Scripts>

        </asp:ScriptManager>
        &nbsp;

    <div>
    <table cellpadding="4" cellspacing="4" width="100%">
        <!-- blank Row -->
        <tr>

        </tr>
        <!-- Add Button -->
        <tr>


        </tr>
 </table>


     </div>



                            <div class="window_blue">


                                <div style="padding-right: 1px; padding-left: 1px; padding-bottom: 1px; padding-top: 2px">
                                    &nbsp;</div>
                                   <center>
                                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                <ContentTemplate>      </center>
                                <table backcolor="#DEBA84" style="width: 31%; height: 29px;" cellpadding="2" cellspacing="2" align="center" border="1" >

                                <tr align ="center">

                                <th  backcolor="#DEBA84" font-style="normal" color="White" font-weight="bold"  text-transform="Uppercase"  height="2px" align="center" colspan="2" rowspan="2" >
                                <asp:Label ID="Label2" runat="server" Text="Mobile No:-" CssClass="label3"></asp:Label>
                                &nbsp; &nbsp; &nbsp;<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox" OnTextChanged="TextBox1_TextChanged"></asp:TextBox><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                                ErrorMessage="Mobile No. Is Compulsory" CssClass="label3"></asp:RequiredFieldValidator><br />
                                &nbsp;<asp:Button ID="btnsubmit" runat="server" CssClass="button"
                                Text="SUBMIT" OnClick="btnsubmit_Click"   />&nbsp;
                                <asp:Button ID="Button1" runat="server" CssClass="button" OnClick="Button1_Click"
                                Text="Clear" Width="84px" /><br />
                                <asp:Label ID="Label1" runat="server" Text="Label" CssClass="label3"></asp:Label>&nbsp;</th>

                                <asp:Label ID="lblmsg" runat="server"></asp:Label></table>




        </center>
        <center>
        <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server">
        <ProgressTemplate>
            &nbsp;
        <img alt ="" src="Images/preLoader_24.gif" style="width: 41px; height: 44px" />
        </ProgressTemplate></asp:UpdateProgress></center>
                        <br />

                            <asp:GridView ID="GridView1"
                            runat="server" align="center"
                            AutoGenerateColumns="False"
                            ShowFooter="True" CellSpacing="2" Height="247px" Width="168px" BorderWidth="2px" CssClass="Grid">
                            <Columns>

                            <asp:TemplateField HeaderText="cl_code">
                            <ItemTemplate>
                            <asp:Label ID="lblEXPart" CommandArgument='<%# Eval("cl_code")%>' CommandName="View"
                            Text='<%# Eval("cl_code")%>' runat="server"></asp:Label>

                            </ItemTemplate></asp:TemplateField>
                            <asp:TemplateField HeaderText="long_name">
                            <ItemTemplate>
                            <asp:Label ID="lblEXPart" CommandArgument='<%# Eval("long_name")%>' CommandName="View"
                            Text='<%# Eval("long_name")%>' runat="server"></asp:Label>
                            </ItemTemplate></asp:TemplateField>

                            </Columns>

                        <HeaderStyle CssClass="rth" />
                        <RowStyle CssClass="tbody" />
                        <FooterStyle CssClass="rth" />
                        <PagerStyle CssClass="rth" />
                        <AlternatingRowStyle CssClass="tbody" />
                        </asp:GridView>
            </div>
          <%--           <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnsubmit" EventName="Click"/>
        </Triggers>--%>
     </center>
     </td>
     </ContentTemplate>
     </asp:UpdatePanel>
    </div>



 </form>
 </body>
</html>