AJAX UPDATEPANEL ProgressBar with external TimerControl not working

[JRB-Bldr]

Well I have asked my question(s) in the ASP.Net forum area and in the VB.Net forum area, so I'll try here now....

I have a webpage written with VS2008 in VB.Net that was working fine, but I wanted to add a ProgressBar to it.
Many of the web references that I found indicated that I ought to try implementing AJAX in the page.

So I followed examples and put a single UPDATEPANEL into the form using a TimerControl (placed OUTSIDE of the UpdatePanel) as a Trigger.

It all looked easy to do and the methodology looked like it would do the job
The btnSubmit_Click (not really a SUBMIT Button) is supposed to 'launch' everything.

BUT it is not working. It appears as though the Timer is never 'firing' everything else.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="UpdtTimer" runat="server" OnTick="UpdateTimer_Tick" Interval=2000></asp:Timer>

<asp:UpdatePanel ID="ProgressBarUpdtPanel" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="UpdtTimer" EventName="Tick" />
    </Triggers>
            
    <ContentTemplate>
      <div id="ProgBarBckGrnd" style="background-color:#FFFFFF; height:40px; width:300px">
        <div id="GreenBar" runat="server" style="height:40px; width:0px; background-color:#99FF33">
        </div>
      </div>
    </ContentTemplate>
</asp:UpdatePanel>

Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles UpdtTimer.Tick
    Dim nNewPcntInt = Session("ProgressPcnt")

    If nNewPcntInt = 100 Then
      UpdtTimer.Enabled = False
    End If

    Dim divProgBarBckGrnd As HtmlGenericControl = Me.FindControl("ProgBarBckGrnd")
    Dim divGrnBar As HtmlGenericControl = Me.FindControl("GreenBar")
    Dim TotalWidth As Int16 = 300 'px
    Dim NewGrnWidth As Int16 = TotalWidth * (nNewPcntInt / 100)

    divGrnBar.Style.Item("width") = NewGrnWidth.ToString + "px"
End Sub

Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnSubmit.Click
  Session("ProgressPcnt") = 0   ' <-- This Value gets updated within the UpdateTables threaded process
  If RadioButtonList2.SelectedValue <> "" Then
      If aSelectedDays.Count > 0 Then
        Dim objThread As New Thread(New System.Threading.ThreadStart(AddressOf UpdateTables))

        objThread.IsBackground = True
        objThread.Start()
        Session("Thread") = objThread
        UpdtTimer.Interval = 2000  ' Timer <-- 1 Second Intervals
        UpdtTimer.Enabled = True  ' Enable Timer   ' <-- LAUNCH Timer Events To Update ProgressBar
      End If
  Else
    UpdtTimer.Enabled = False  ' Disable Timer
    jsMessageBox("INCLUDE / EXCLUDE Not Selected!", Me.Page)
  End If
End Sub

Private Sub UpdateTables()
    aLotName = Session.Item("LotNames")
    For Cntr = 0 To (aLotName.Count - 1)  ' Cycle Thru ALL Lots Looking for Selected (Checked)
      ' --- Do a Bunch of Stuff ---

      ' --- Determine New Percent Complete ---
       Session("ProgressPcnt") = nNewPcntInt   ' <-- [u]Hopefully[/u] The Timer TICK will update the ProgressBar in the UpdatePanel

        System.Threading.Thread.Sleep(1500)   ' Pause for 1 1/2 second
      End If
    Next

    ' --- DONE ---
    System.Threading.Thread.Sleep(2000)   ' Pause for 2 seconds
    Session("ProgressPcnt") = 0
    UpdtTimer.Enabled = False  ' Disable Timer

    ' --- Close Threaded Process ---
    Dim objThread As Thread = CType(Session("Thread"), Thread)
    objThread.Abort()
    UpdtTimer.Enabled = False
End Sub

I see the UpdateTables (the threaded process) executing fine, but I never see anything else occurring which in regards to the ProgressBar.

Any advice/suggestions you might have would be greatly appreciated.

Thanks,
JRB-Bldr

 

[jpadie]

I'm not a VB, ASP etc programmer. so forgive me for not giving you a direct answer.

the code you posted looks like server side - un-pre-processed code. given that you are looking for a timed event to occur in the browser (not the server) then it might be helpful for us to see the code as rendered in the browser (i.e. that which is returned from view source when you browse to that page).

If you use firefox with firebug extension installed you should see (in the Net panel) the ajax request being fired every two seconds. that's the starting point for debugging.

if it is firing, and the address and parameters are right, then the timer is working correctly.

so next check for the responses to each ajax callback - are you seeing the right response back from the server? i'd expect to see one of the back-end code routines actually send something to the browser. which I don't (although I do see the dynamic css assignment it is unclear how this gets passed out of the routine back to the browser - the ajax response will inform).

This is _very_ easy to do using traditional javascript and a language like php. so I cannot imagine it is much more difficult in vb. In javascript + jquery + php the code would look like this

<?php 
if(session_id() == "") session_start();
echo json_encode(array('progress'=>$_SESSION['ProgressPcnt']));
die;
?>

<!DOCTYPE HTML>
<head>
<script src="[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>[/URL]
<style>
#progressBarContainer{width:10rem;min-width:10rem;}
#progressBar{background-color:green; width:0rem; float:left;}
</style>
</head>
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
<script>
$(document).ready(function(){  //only run when jquery has loaded and the dom is ready
 var myTimer; //variable to hold the timer
 var startTimer = function(){
  myTimer = setInterval(getProgress, 2000);   //instantiate the timer
 }
 var stopTimer = function(){   //clear the timer
  clearInterval(myTimer);
 }
 var getProgress = function(){  //timer callback
   stopTimer();  //stop timer to prevent race conditions
   $.ajax({url:'myprogressbar.php',dataType:'json',success: updateProgressBar}); //query the server script and direct output to callback
 };
 var updateProgressBar = function(data){  //calback function for the ajax call
   if(data.progress){ //check that the data is well formed.  assumes a percentage
      $('#progressBar').css('width',data.progress + '%');  //set the interior width of the div to the relevant percent of 10rem (the width of the outer container).
   }
   startTimer(); //start the counter.
  };
  startTimer(); //start the counter. you could also do this: updateProgressBar({progress:0});
});

i'm not suggesting you adopt new languages to crack the nut - just showing what the actual anatomy of this construct is without the veneer of asp.

 

[JRB-Bldr]

Thank you for your reply.

I'm not sure that I fully understand what you are saying, but I will ponder it a while and see if "the lightbulb comes on"

Thanks,
JRB-Bldr

 

[jpadie]

Well. To start with can you please post the rendered output (view source in the browser). Be sure to include any js as well as html.

In the alternative can you point to a webpage where we can see the controls in action or is it an intranet?

 

[JRB-Bldr]

Before posting a LONG piece of source code lines I wanted to look things over.
When I fired off the web page, I did a View Source. In that I did not find any js function code for the TimerControl (ID=UpdtTimer).

What I did find was within two CDATA blocks which was auto-generated:

<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
[COLOR=#EF2929]Sys.WebForms.PageRequestManager.getInstance()._updateControls(['fProgressBarUpdtPanel'], ['UpdtTimer'], [], 90);[/color]
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
startUpScript()Sys.Application.initialize();
Sys.Application.add_init(function() {
   [COLOR=#EF2929] $create(Sys.UI._Timer, {"enabled":true,"interval":2000,"uniqueID":"UpdtTimer"}, null, null, $get("UpdtTimer"));[/color]
});
Sys.Application.add_init(function() {
    $create(Sys.UI._UpdateProgress, {"associatedUpdatePanelId":null,"displayAfter":500,"dynamicLayout":true}, null, null, $get("UpdateProgress1"));
});
//]]>
</script>

And when I used FireBug I went to the Net tab page, but I was not seeing any Postbacks unless I manually clicked on the btnSubmit (not really a SUBMIT button).
The btnSubmit_Click method is supposed to ENABLE the TimerControl

UpdtTimer.Enabled = True

The TimerControl itself has its own Tick method (UpdateTimer_Tick() above) which is supposed to update the ProgressBar.

Well the btnSubmit_Click is firing off which runs the UpdateTables() routine just fine.
But the TimerControl and its associate TICK event does not appear to be running.

Thanks,
JRB-Bldr

 

[jpadie]

sorry - i'm going to need to see the source code of the rendered page. the event model employed by asp is ridiculously overbearing - it does seem much simpler to write it natively. but that's probably as much my inexperience in ASP talking as anything else. what may take a while to debug would take five minutes to write ...

 

[JRB-Bldr]

Perhaps I am wrong, but isn't the CDATA code blocks above 'source code of the rendered page' ?
I copied it out of the FireFox - View Source after the page was launched and the btnSubmit button had been clicked.

Thanks,
JRB-Bldr

 

[jpadie]

the cdata excepts may be part of the source code, and probably are. but they are very far from all of it.

 

[JRB-Bldr]

I want to thank you for your support and assistance.

For the time being I am taking a step back.

Instead of trying to make (FORCE???) what I already have work, I will be researching the topic more, and likely to make a fresh start at it - possibly following a slightly different (or at least modified) approach.

Thanks again for your assistance.
JRB-Bldr

 

[jpadie]

If you're interested in a native JavaScript plus asp solution then it would be very easy (minutes) to adapt the phone code above for asp. Post back if you want.