CODEWITHSUNDEEP
c#asp.netasp.net-ajax
Vivekh
Vivekh

Reputation: 4259

Can some one help me regarding progress bar

I used this example from here

http://www.asp.net/ajaxlibrary/jqueryui_progressbar.ashx

Every thing works fine except the progress

enter image description here

This is my design

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

<!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></title>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
        rel="Stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $("#progress").progressbar({
            value: document.getElementById('<%=litprogress.ClientID%>').value
        });  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            Wizard progress</h1>
        <div id="progress">
            <asp:Literal ID="litprogress" runat="server"></asp:Literal>
        </div>
        <asp:Panel ID="step1" runat="server">
            <h1>
                Step 1</h1>
            <asp:Button ID="GoToStep2" Text="Next" runat="server" OnClick="GoToStep2_Click" />
        </asp:Panel>
        <asp:Panel ID="step2" runat="server">
            <h1>
                Step 2</h1>
            <asp:Button ID="GoToStep3" Text="Next" runat="server" OnClick="GoToStep3_Click" />
        </asp:Panel>
        <asp:Panel ID="step3" runat="server">
            <h1>
                Step 3</h1>
            <asp:Button ID="GoToStep4" Text="Next" runat="server" OnClick="GoToStep4_Click" />
        </asp:Panel>
        <asp:Panel ID="step4" runat="server">
            <h1>
                Completed</h1>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

Instead of required I am getting this

enter image description here

So can any one tell where I went wrong

Getting some warnings regarding CSS and the error is as follows

Error: document.getElementById("litprogress") is null

Upvotes: 0

Views: 226

Answers (1)

Kevin Main
Kevin Main

Reputation: 2344

I think that the progress bar init is happening before the DOM is fully loaded, put the code inside $(document).ready.

Upvotes: 1

Related Questions