Solved

JQuery Progress bar in asp.net

Posted on 2010-08-24
4
955 Views
Last Modified: 2013-11-07
I am using making application asp.net 2.0. In my page there is Data List which is having two buttons. When user click on the button it is doing some process and taking some time. Due to that user some time click twice and it will make problem in application. So to stop that I wanted to show progress bar until button click process done.



I am using following code



ASPX Page Code





<script language="javascript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script language="javascript" src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel="stylesheet" type="text/css"/>

 

<script type="text/javascript">

      $(document).ready(function() {

            $("#progressbar").progressbar({ value: 0 });

            $("#addtocart").click(function() {

                var intervalID = setInterval(updateProgress, 250);

                $.ajax({

                    type: "POST",

                    url: "AutoComplete.asmx/GetText",

                    data: "{}",

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    async: true,

                    success: function(msg) {

                        $("#progressbar").progressbar("value", 100);

                        $("#result").text(msg.d);                        

                        clearInterval(intervalID);

                    }

                });

                return false;

            });

        });



        function updateProgress() {            

            var value = $("#progressbar").progressbar("option", "value");

            if (value < 100) {

                $("#progressbar").progressbar("value", value + 1);                

            }

        }        

 </script>



<div id="progressbar"></div> 

<div id="result"></div>

Open in new window





Above code is not working and no showing progress bar may be as datalist is making different name to the control at runtime. Next thing may be I am missing something. Here Div is also making white space as my page background is black, so is it possible to hide div and show when it is require.



I also want to change the look of the progress bar. Also want to write some text on it like adding ...



How can I do that.
0
Comment
Question by:milindsaraswala
  • 2
4 Comments
 
LVL 15

Accepted Solution

by:
rajeeshmca earned 500 total points
ID: 33519311
Hi,

Try the following sample
. This is not using jquery, but a normal javascript

<%@ 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>Untitled Page</title>
    <style type="text/css">
        .modalBackground
        {
            background-color:      #4863A0;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
    </style>

    <script type="text/javascript" language="javascript">
   
        function show()
        {
            $find('LoadingPopUpExt').show();
        }
       
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="Scr1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:Button ID="ClickmeButton" runat="server" Text="ClickMe" OnClick="ClickmeButton_Click"
                Enabled="true" OnClientClick="show()" />
            <asp:Panel ID="LoadingPanel" runat="server" Style="display: none;">
                <div>
                    <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/iamages/ajax-loader.gif" />
                </div>
                <div style="text-align: center;">
                    Loading
                </div>
            </asp:Panel>
            <cc1:ModalPopupExtender ID="LoadingPopUpExt" TargetControlID="DummyButton" PopupControlID="LoadingPanel"
                BackgroundCssClass="modalBackground" runat="server">
            </cc1:ModalPopupExtender>
            <input type="button" id="DummyButton" runat="server" style="display: none;" />
        </div>
    </form>
</body>
</html>

cs code
---------

protected void Page_Load(object sender, EventArgs e)
    {
       
    }

    protected void ClickmeButton_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < 1000; i++)
        {
            for (int j = 0; j < 500; j++)
            {
                for (int k = 0; k < 1000; k++)
                {

                }
            }
        }
    }
0
 
LVL 15

Expert Comment

by:rajeeshmca
ID: 33573913
Hello milindsaraswala,

Did u try with the one i posted?
0
 
LVL 5

Author Comment

by:milindsaraswala
ID: 33574276
Actually I don't like Ajax it is making page very slow and again if I use that one will make page more slow. So i wanted to use JQuery progress bar only
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now