Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

JQuery Progress bar in asp.net

Posted on 2010-08-24
4
Medium Priority
?
1,061 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
3 Comments
 
LVL 15

Accepted Solution

by:
rajeeshmca earned 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

772 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