Good day...!
In the code behind (upload.aspx) I have an event that returns the number of bytes being streamed; and as I debug it, it works fine. I wanted to reflect the numbers returned from the eventHandler on a progress bar and this is where I got lost. I tried using jQuery's .ajax() function. this is how I implemented it:
In the EventHandler in my code behind I added this code to call the .ajax() function:
Page.ClientScript.RegisterStartupScript(this.GetType(), "UpdateProgress", "<script type='text/javascript'>updateProgress();</script>");
My plan is whenever the eventHandler function changes the values of bytes being streamed it calls the javascript function "updateProgress()"
The .ajax() function "UpdateProgress()" is as:
function updateProgress() {
$.ajax({
type: "POST",
url: "upload.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
$("#progressbar").progressbar("option", "value", msg.d);
}
});
}
I made sure that the function GetData() is [System.Web.Services.WebMethod] and that it is static as well. so the workflow of what I am trying to implement is as:
- Click On Upload button
- The Behind code starts executing and EventHandler triggers
- The EventHandler calls .ajax() function
- The .ajax() function retrieves the bytes being streamed and updates progress bar.
When I ran the code; all runs well except that the .ajax() is only executed when upload is finished (and progress bar also updates only when finished upload); even though I call .ajax() function every time in the eventHandler function as reflected above...
What am I doing wrong? Am I thinking of this right? is there anything else I should add maybe an updatePanel or something?
thank you