0

I'm trying to set up a JQuery Progress Bar to update when the user submits a form (the final code will be more complex and dynamic, but I'm just trying to learn how the progress bar works first).

The simple code that I'm trying to debug is:

<body>
<form id="form1" method="GET" runat="server">
<div>
    <h1>Test</h1>

    <input type="submit" value="Start Test"/>
</div>
</form>

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

<script type="text/javascript">
    $("#progressbar").progressbar({
        value: 25
    });
    $("#progressbar > div").css({ 'background': 'Green' });

    $(document).ready(function () {
        $("#form1").submit(function () {
            $("#progressbar").progressbar({ value: 75 });
        });
    });
</script>
</body>

It's just a simple form that initializes a progress bar to 25%, and runs a .submit function that sets the value to 75%. I know that the submit code is getting called because if I click the Submit button repeatedly, I see the 75% value flash on and off in the progress bar.

My question is: How do I get the value to stay selected once it's changed by the .submit function?

Thanks In Advance!

UPDATE: Thanks for the advice @charlietfl :-) New to the whole posting thing :-)

Here is the ajax-based code I have...

<body>
<form id="form1" method="GET" runat="server">
<div>
    <h1>Test</h1>

    <input type="submit" value="Start Test"/>
</div>
</form>

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

<script type="text/javascript">
    $("#progressbar").progressbar({
        value: 25
    });

    $(document).ready(function () {
        $("#form1").submit(function () {
            $.ajax({
                url: "JQueryProgressTest.aspx/GetProgress",
                type: "GET",
                success: function (data) {
                    $(".selector").progressbar({value: data});
                }
            });
        });
    });
</script>
</body>

Still not updating...don't even see the value flash anymore.

Thanks!

Bob

FINAL UPDATE: Needed to also add some JSON stuff to get the callback from the aspx page to work. Below is the fully working code for anyone else who needs it:

ASPX Code-Behind:

    public partial class JQueryProgressTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static int GetProgress()
        {
            // Put any code to update the progress bar here
            return 50;
        }
    }

And the body of the aspx page itself:

<body>
    <form id="form1" method="GET" runat="server">
    <div>
        <h1>Test</h1>

        <input type="submit" value="Start Test"/>
    </div>
    </form>

    <div id="progressbar" style="border-color: lightgreen;"></div>

    <script type="text/javascript">
        $("#progressbar").progressbar({
            value: 25
        });
        $("#progressbar > div").css({ 'background': 'Green' });
        $(document).ready(function () {
            $("#form1").submit(function (event) {
                event.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "JQueryProgressTest.aspx/GetProgress",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#progressbar").progressbar({ value: response.d });
                    },
                    failure: function(response) {
                        alert("Error in calling Ajax:" + response.d);
                    }
                });
            });
        });
    </script>
</body>

Thanks again to @charlietfl for all the help!

4

1 回答 1

1

页面加载之间没有状态保存。当您提交表单时，它将根据表单操作重新加载页面。

一些选择是：

  1. 使用 ajax 提交表单，这样用户就不会离开页面
  2. 使用在您的服务器代码中定义并传递给脚本标签的 javascript 变量来设置进度，根据提交与否调整变量
  3. 将状态存储在 cookie 或 localStorage 中，并根据存储的值设置值
于 2015-03-19T14:29:38.777 回答