JQueryUI进度条没有't通过表单提交更新后保持价值

JQueryUI Progress Bar doesn't maintain value after update via form submit

本文关键字：更新 表单提交 JQueryUI      更新时间：2023-09-26

我正在尝试设置一个JQuery进度条，以便在用户提交表单时进行更新（最终的代码将更加复杂和动态，但我只是想先了解进度条是如何工作的）。

我尝试调试的简单代码是：

<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>

这只是一个简单的表单，它将进度条初始化为25%，并运行一个将值设置为75%的.submit函数。我知道提交代码被调用了，因为如果我重复单击提交按钮，我会在进度条中看到75%的值闪烁。

我的问题是：一旦值被.submit函数更改，我如何使其保持选中状态？

提前感谢！

更新：谢谢你的建议@charlietfl:-）整个帖子的新手：-）

以下是我的基于ajax的代码。。。

<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>

仍未更新。。。再也看不到价值的闪光了。

谢谢！

Bob

最后更新：还需要添加一些JSON内容，以便从aspx页面进行回调。以下是其他需要它的人的完整工作代码：

ASPX代码背后：

    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;
        }
    }

以及aspx页面本身的正文：

<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>

再次感谢@charlietfl的帮助！

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

一些选择是：

  1. 使用ajax提交表单，这样用户就不会离开页面
  2. 使用服务器代码中定义并传递给script标记的javascript变量来设置进度，根据提交与否调整变量
  3. 将状态存储在cookie或localStorage中，并根据存储的值设置值
相关文章：