gpt4 book ai didi

javascript - JQueryUI 进度栏在通过表单提交更新后不保持值

转载 作者:行者123 更新时间:2023-12-03 10:32:26 25 4
gpt4 key购买 nike

我正在尝试设置一个 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 的所有帮助!

最佳答案

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

一些选择是:

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

关于javascript - JQueryUI 进度栏在通过表单提交更新后不保持值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29147103/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com