JQuery Progress bar in asp.net

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.
LVL 5
milindsaraswalaAsked:
Who is Participating?
 
rajeeshmcaCommented:
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
 
rajeeshmcaCommented:
Hello milindsaraswala,

Did u try with the one i posted?
0
 
milindsaraswalaAuthor Commented:
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
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.