根据 Visual Studio 2010 的 jQuery 函数“未定义”

Question

这可能是一个关于 jQuery UI 和 Javascript 的非常简单的问题，但我仍然在摸索这些语法。每当我的 C# (ASP.NET) 程序在不同功能中达到某个点时，我都会尝试更新 jQuery 进度条。我这样做正确吗？我可以在我的页面上看到空白的进度条，但我无法让它更新进度。

这是我的脚本：

  <script type="text/javascript">
  $(document).ready(function() {
    $("#progressbar").progressbar({ value: 0 });
  });

function updateProgress(number) {
        if (number < 100) {
            $("#progressbar").progressbar("value", number);
        }
    }
</script>

以下是我的更多脚本参考：

 <link href="Styles/tomcat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="colorbox.css" />
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.colorbox.js"></script>
<link href="Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.ui.progressbar.js" type="text/javascript"></script>
<link href="Scripts/ui.all.css" rel="stylesheet" type="text/css" />

这里是我尝试通过 C# 函数使用 updateProgress() 函数的地方。我正在尝试将“10%”发送到进度条，但我的调试器出错并说 updateProgress() 未定义。

 ScriptManager.RegisterStartupScript(this, this.GetType(), "temp", "<script language='javascript'>UpdateProgress(10);</script>", false);

编辑：我添加了以下布尔值来绕过页面刷新并刷新我的进度条。

 var runOnce = new Boolean;
runOnce = false;
$(document).ready(function() {
    if(!runOnce)
    {
        $("#progressbar").progressbar({ value: 0 });
        runOnce = true;
    }
});

我认为它不起作用。它仍然会在每次页面加载时清除并将其设置回零。

Answer 1

javascript 区分大小写。要么将你的函数声明更改为UpdateProgress，要么将你的注入更改为updateProgress。

我也相信你应该在你的脚本标签上包含type="text/javascript" - 语言是一个不推荐使用的属性。相关：What is the difference between "lang" and "type" attributes in a script tag?

编辑：处理被覆盖的进度：

var progressAlreadySet;

$(document).ready(function() {
    $("#progressbar").progressbar(); // initialize

    if (!progressAlreadySet) {
        $("#progressbar").progressbar("value", 0);
    }
});

var updateProgress = function (number) {
    if (number < 100) {
        progressAlreadySet = true;
        $("#progressbar").progressbar("value", number);
    }
};