CODEWITHSUNDEEP
c#javascriptjqueryasp.netjquery-ui-progressbar
se_brandon
se_brandon

Reputation: 228

jQuery Function "undefined" according to Visual Studio 2010

This may be a pretty simple question about jQuery UI and Javascript, but I am still feeling my way through these syntax's. I am trying to update a jQuery progress bar whenever my C# (ASP.NET) program reaches a certain point in different functions. Am I doing this correctly? I can see the empty progress bar on my page, but I cannot get it to update its progress.

Here are my scripts:

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

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

Here are some more of my script references:

 <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" />

And here is where I try to use the updateProgress() function via a C# function. I am trying to send "10%" to the progress bar but my debugger errors out and says that updateProgress() is not defined.

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

EDIT: I added the following boolean to bypass the page refreshing and refreshing my progress bar.

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

I don't think it is working though. It still clears and sets it back to zero every page load.

Upvotes: 0

Views: 624

Answers (1)

jbabey
jbabey

Reputation: 46647

javascript is case sensitive. either change your function declaration to UpdateProgress or change your injection to updateProgress.

also i believe you should including type="text/javascript" on your script tag - language is a deprecated attribute. related: What is the difference between "lang" and "type" attributes in a script tag?

Edit: to handle the progress getting overwritten:

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

Upvotes: 5

Related Questions