Solved

JQuery Progress bar in asp.net

Posted on 2010-08-24
4
994 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery element reference issue 2 41
Time Picker 3 22
bulk load multiple users for aspnetusers table 2 16
SQL query joining 6 tables in asp.net 4 33
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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…

710 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