通过表单提交更新后，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％，然后运行.submit函数将其值设置为75％。 我知道提交代码将被调用，因为如果我反复单击“提交”按钮，我会看到进度栏中的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变量并将其传递给script标签以设置进度，根据是否提交来调整变量
将状态存储在Cookie或localStorage中，并根据存储的值设置值

通过表单提交更新后，JQueryUI进度栏无法保持价值

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-03-19 14:29:38

通过表单提交更新后，JQueryUI进度栏无法保持价值

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-03-19 14:29:38

解决方案1
1 已采纳 2015-03-19 14:29:38