通过表单提交更新后，JQueryUI 进度条不保持价值

Question

我正在尝试设置一个 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>

仍然没有更新...甚至看不到闪烁的值了。

谢谢！

鲍勃

最终更新：还需要添加一些 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 的所有帮助！

Answer 1

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

一些选择是：

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

通过表单提交更新后，JQueryUI 进度条不保持价值

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

javascript

forms

jquery-ui

submit

jquery-ui-progressbar