Hey Luca,What I'm curious about is where your Ajax Callback functions are located; the StartProcess_Callback and the UpdateProgress_Callback functions. They should be in your Codebehind PRG file for the WCSX page.
Marty
Hi Marty,
I did not understand what and where I have to look for.
I find this occurrence about Ajax in Process.prg:
FUNCTION WebResource()
LOCAL lcKey, lnIndex, loContent, lcContent, lc
lcKey = LOWER(Request.QueryString("Resource"))
DO CASE
#IF WWC_LOAD_WEBCONTROLSAJAX
CASE lcKey == "wwscriptlibrary"
lcContentType = "application/x-javascript"
Response.GzipCompression = .T.
DO CASE
CASE lcKey = "wwscriptlibrary"
lcContent = GetwwScriptLibrary_JavaScript(Response.GZipCompression)
ENDCASE
IF Response.GZipCompression
Response.AppendHeader("Content-Encoding","gzip")
ENDIF
Response.GzipCompression = .F.
#ENDIF
OTHERWISE
loContent = Server.oResources.Item(lcKey)
IF ISNULL(loContent)
Response.Status="404 Not Found"
return
ENDIF
lcContentType = loContent.ContentType
lcContent = loContent.Content
ENDCASE
Response.ContentType=lcContentType
Response.AddCacheHeader(1200)
Response.Write(lcContent)
ENDFUNC
Thanks
No worries!Where does your Ajax code live? Is it in the Code-behind for the WCSX file, or is it in your Process method?
Marty
Thank you very much for patience :)
<%@ Page Language="C#"
ID="test_Page"
GeneratedSourceFile="Backoffice\test_Page.prg" %>
<%@ Register Assembly="WebConnectionWebControls" Namespace="Westwind.WebConnection.WebControls" TagPrefix="ww" %>
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar and AJAX Demo</title>
<link href="westwind.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<h1>Progress Bar</h1>
<div class="toolbarcontainer">
<a href="default.htm" class="hoverbutton"><img src="../images/home.gif" /> Sample Home</a> |
<a href="progressBar.wcsx" class="hoverbutton"><img src="../images/refresh.gif" /> Reset Form</a> |
<small>Rendered at: <%= DateTime() %></small>
</div>
<div class="descriptionheader" >
This sample demonstrates how to asynchronously run a task on the server while displaying
progress in the current page by utilizing AJAX. Using this mechanism it's possible to run long running
tasks in the background and continue working on the client side while displaying context
specific progress.
</div>
<div class="containercontent" style="margin: 0 auto;text-align: left;">
<input id="btnStartProcessing" type="button" value="Start Processing" onclick="StartProcessing()" />
<input id="btnStopProcessing" type="button" value="Cancel Processing" onclick="Cancelled = true;" />
<div style="margin: 20px;">
<ww:wwWebProgressBar runat="server" id="Progress" Text="Waiting to get started" Width="500px" >
</ww:wwWebProgressBar>
</div>
<!-- Demonstrate manually updating the progress bar -->
<input type="text" id="txtPercent" value="58" size="4"/>
<input id=btnSetPercent" type="button" value="Set Percentage"
onclick="UpdateProgressBar('Progress',$('#txtPercent').val(),'Updated...')" />
<hr />
<div id="lblResult"></div>
<blockquote>
This example demonstrates using the wwWebProgressBar control to show progress of an operation running on the server.
The server form has three client functions: StartProcessing, UpdateProgress and ProcessComplete, which are fired from script
code using the wwMethodCallbackControl that handles the remote processing.
<br />
<br />
The code pings this server once a second and requests updated status information - an object returned from the server
that contains a message a percentage and completion and cancellation status in this case. If complete the client calls
the server again to ProcessComplete which returns a final result in the form of a DataGrid generated string to the
client.
<br />
<br />
All of this happens in the context of a single page, without post backs. Notice that during the update process the
page remains live so you can for example set the percentage manually with the percentage button. The value will be
set briefly until the next server update brings back more information and updates the progress bar again.
</blockquote>
<hr />
<ww:wwWebShowCode ID="ShowCode0" runat="server" DisplayMode="WCSX" Text="Show WCSX" />
<ww:wwWebShowCode ID="ShowCode1" runat="server" DisplayMode="VFP" Text="Show PRG" />
</div>
<script type="text/javascript">
var Cancelled = false;
var TimerInterval = 500;
function StartProcessing()
{
Cancelled = false;
$('#btnStartProcessing').attr("disabled",true);
$('#btnStopProcessing').attr("disabled",false);
$('#lblResult').html("");
// *** Progress_Ajax is the name of the Progress Control _Ajax for the wwWebAjax instance
Progress_Ajax.callMethod("StartProcessing_Callback",[],
function(result) {
// *** Start the chain - request progress information in timeout seconds
window.setTimeout(GetProgress,TimerInterval);
});
}
function GetProgress()
{
// *** Iniate a callback to the server to get the progress
// *** Pass cancelled flag as parameter so server can now if to cancel
Progress_Ajax.callMethod("UpdateProgress_Callback", [Cancelled],
// this returns the server's response as an object
// result is ProgressEventArgs returned from server
function(result) {
// Update the progress bar settings
UpdateProgressBar("Progress",result.percent,result.message);
if (result.cancelled)
{
alert('Operation cancelled on the server.');
$('#btnStartProcessing').attr("disabled",false);
$('#btnStopProcessing').attr("disabled",true);
}
else if (result.completed || result.percent >= 100)
ProcessComplete();
else
window.setTimeout( GetProgress, TimerInterval );
});
}
function ProcessComplete()
{
// *** pick up the final result
Progress_Ajax.callMethod("ProcessComplete_Callback",[],
function(Result)
{
$('#btnStartProcessing').attr("disabled",false);
$('#btnStopProcessing').attr("disabled",true);
$("#lblResult").html("<center>" + Result + "</center>");
UpdateProgressBar('Progress',100,"Customer List Download complete");
});
}
</script>
</form>
</body>
</html>
Luca,Can you post the code for your WCSX Page too?
Marty
Dear Marty,
I thank you very much for attention.
I am demoralized because after having spent much time to study Progressbar examples still I am not able to get it working.
I made this example using Rick's WCSX and PRG, I tested to copy a big 50 Mb file for 10 times, but the Progressbar does not progress during copy process, instead the Progressbar shows 10% at the end of copy process. I do not understand what is wrong.
FUNCTION test_click
FOR m.counter=1 TO 10
Session.SetSessionVar("simulate_Counter",TRANSFORM(m.Counter))
ERASE d:\bo.dbf
COPY FILE c:\temp\bo.dbf to d:\bo.dbf
endfor
ENDFUNC
* progressbar_Page :: StartProcessing
****************************************
FUNCTION StartProcessing_Callback()
Session.SetSessionVar("Simulate_Counter","0")
*** generate an ID to pass back to the client so
*** the client and server have context
lcId = SYS(2015)
Session.SetSessionVar("progress_Id",lcId)
Session.SetSessionVar("progress_StartTime",TRANSFORM(SECONDS()))
this.test_click
RETURN lcId
ENDFUNC
* progressbar_Page :: UpdateProgress
****************************************
FUNCTION UpdateProgress_Callback(llCancel)
lnCounter = VAL( Session.GetSessionVar("simulate_Counter") )
LOCAL loArgs as ProgressEventArgs
loArgs = CREATEOBJECT("ProgressEventArgs")
*** so we have to parse 'true'
IF llCancel
loArgs.Cancelled = .t.
loArgs.Percent = lnCounter
RETURN loArgs
ENDIF
IF lnCounter >= 100
loArgs.Completed = .T.
loArgs.Percent = 100
RETURN loArgs
ENDIF
*** OPERATIONS. FOR EXAMPLE, YOU COULD USE wwWebAsyncRequest
*** TO OFFLOAD PROCESSING TO ANOTHER PROCESS AND CHECK FOR
*** COMPLETION ON THE EXTERNAL PROCESS
loArgs.Percent = lnCounter
RETURN loArgs
Hello Luca,Take a look at the sample on the Web site here: http://www.west-wind.com/wconnect/webcontrols/progressBar.wcsx
This sample uses Ajax callbacks to provide what it seems you are wanting. Go to the bottom of the page and use the Show WCSX button and the Show PRG button to see the code in both the Web Page and the Code Behind page.
Perhaps this will help some...
Marty
![]()
