Question

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

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

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

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 Progress Bar不会保留值

1 个答案: