【发布时间】：2015-03-19 14:23:11
【问题描述】：
我正在尝试设置一个 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 的所有帮助！
【问题讨论】：
标签： javascript forms jquery-ui submit jquery-ui-progressbar