[Seaside] Showing progress
Maarten Mostert
maarten.mostert at wanadoo.fr
Fri Mar 3 09:28:00 UTC 2017
Hi,
I do this within a modal
handleCreditCardForm(options) {
var aProgress = $t.application.makeProgressBar("20","20% Processing");
$('#processProgressIDl').replaceWith(aProgress);
$t.application.updateprogressBarInTime(2000,"30","40% Processing ...") ;
$t.application.updateprogressBarInTime(3000,"40","40% Processing Credit card") ;
$t.application.updateprogressBarInTime(4000,"50","50% Processing Credit card") ;
$t.application.updateprogressBarInTime(5000,"60","60% Processing Credit card") ;
$t.application.updateprogressBarInTime(6000,"70","70% Processing Credit card") ;
$t.application.updateprogressBarInTime(7000,"80","80% Processing Credit card") ;
$t.application.updateprogressBarInTime(8000,"90","90% Processing Credit card") ;
$t.application.updateprogressBarInTime(9000,"98","98% Processing Credit card") ;
return this.handleCreditCardToServer("register-creditcard", options);
Where:
makeProgressBar(aValue,aText){
var aProgress = this.elementNameClass("div", "progress-bar progress-bar-success progress-bar-striped active");
aProgress.setAttribute("role", "progressbar");
var str1 ="width: ";
var str2 = aValue.toString();
var mywidth = str1.concat(str2).concat("%");
aProgress.setAttribute("id", "processProgressIDl");
aProgress.setAttribute("aria-valuenow", Number(aValue));
aProgress.setAttribute("aria-valuemin", "0");
aProgress.setAttribute("aria-valuemax", "100");
aProgress.setAttribute("style", mywidth);
//var newSpan = $t.application.spanWithClassText("sr-only","60% Cretating Licences");
var newSpan = this.spanWithClassText("sr-only",aText);
aProgress.appendChild(newSpan);
return aProgress;
}
And:
updateprogressBarInTime(mymiliseconds,myPercentage,myText) {
//for creating a new server as opposed to adding a preconfigured server.
//return a ServerResponse
//alert("Hi this is me handleCreditCardForm");
setTimeout(function(){
if ($t.application.session["showwaitdialog"] ) {
//
var aProgress = $t.application.makeProgressBar(myPercentage,myText);
$('#processProgressIDl').replaceWith(aProgress);
}
else {$('#processingModalID').modal('hide'); }
}, mymiliseconds);
You can call $('#processingModalID').modal('hide'); if you are finished before
Hope this gives indications
Regards,
Maarten MOSTERT
> Le 3 mars 2017 à 10:07, Maarten Mostert <maarten.mostert at stakepoint.com> a écrit :
>
> Hi,
>
> I do this within a modal
>
> handleCreditCardForm(options) {
>
> var aProgress = $t.application.makeProgressBar("20","20% Processing");
> $('#processProgressIDl').replaceWith(aProgress);
>
> $t.application.updateprogressBarInTime(2000,"30","40% Processing ...") ;
> $t.application.updateprogressBarInTime(3000,"40","40% Processing Credit card") ;
> $t.application.updateprogressBarInTime(4000,"50","50% Processing Credit card") ;
> $t.application.updateprogressBarInTime(5000,"60","60% Processing Credit card") ;
> $t.application.updateprogressBarInTime(6000,"70","70% Processing Credit card") ;
> $t.application.updateprogressBarInTime(7000,"80","80% Processing Credit card") ;
> $t.application.updateprogressBarInTime(8000,"90","90% Processing Credit card") ;
> $t.application.updateprogressBarInTime(9000,"98","98% Processing Credit card") ;
>
> return this.handleCreditCardToServer("register-creditcard", options);
>
> Where:
>
> makeProgressBar(aValue,aText){
>
> var aProgress = this.elementNameClass("div", "progress-bar progress-bar-success progress-bar-striped active");
> aProgress.setAttribute("role", "progressbar");
>
> var str1 ="width: ";
> var str2 = aValue.toString();
> var mywidth = str1.concat(str2).concat("%");
>
> aProgress.setAttribute("id", "processProgressIDl");
> aProgress.setAttribute("aria-valuenow", Number(aValue));
> aProgress.setAttribute("aria-valuemin", "0");
> aProgress.setAttribute("aria-valuemax", "100");
> aProgress.setAttribute("style", mywidth);
> //var newSpan = $t.application.spanWithClassText("sr-only","60% Cretating Licences");
> var newSpan = this.spanWithClassText("sr-only",aText);
> aProgress.appendChild(newSpan);
>
> return aProgress;
>
>
> }
>
> And:
>
> updateprogressBarInTime(mymiliseconds,myPercentage,myText) {
> //for creating a new server as opposed to adding a preconfigured server.
> //return a ServerResponse
> //alert("Hi this is me handleCreditCardForm");
>
> setTimeout(function(){
> if ($t.application.session["showwaitdialog"] ) {
> //
> var aProgress = $t.application.makeProgressBar(myPercentage,myText);
> $('#processProgressIDl').replaceWith(aProgress);
> }
> else {$('#processingModalID').modal('hide'); }
>
>
> }, mymiliseconds);
>
>
> You can call $('#processingModalID').modal('hide'); if you are finished before
>
> Hope this gives indications
>
> Regards,
> Maarten MOSTERT
>
>
>
> 28 Av Alphonse Denis
> 83400 Hyères, France
> +33 676411296
> http://stakepoint.com/ <http://stakepoint.com/>
>
> Now the most popular Project Management Tool on MacOS
>
>> Le 3 mars 2017 à 05:33, jtuchel at objektfabrik.de <mailto:jtuchel at objektfabrik.de> a écrit :
>>
>> Jupiter.
>>
>> not a perfect answer, but what I'd try is forking the actual processing as a background process on the server and add two inst vars to the component:
>>
>> * processingDone
>> * currentProgressMessage
>>
>> which would be updated by the background process as it progresses through its job.
>>
>> The first ajax call would be finished right after forking the background process, so teh browser would get an instant answer. All you need to do then is set up a timeOut() and have the browser ask for the current progress by issueing ajax calls every, say, 750-1000msec, until the server responds with "processingDone=true".
>>
>> The problem is, I have written something like this in Javascript, where I registered a callback for the progress message in renderContentOn: , but have no idea how to do it in Seaside's javascript rendering methods.
>>
>> I hope this idea helps you get a step further.
>>
>> Joachim
>>
>>
>>
>>
>> Am 03.03.17 um 03:54 schrieb Jupiter Jones:
>>> Hi all,
>>>
>>> I have a relatively short process (about 5 to 10 seconds) that I would like to show the progress of.
>>>
>>> It’s triggered by ajax:
>>>
>>> html button
>>> bePush;
>>> onClick:
>>> (html jQuery ajax script: [ :s | self fetchShowingProgressOnScript: s ]);
>>>
>>> fetchShowingProgressOnScript: s
>>>
>>> s << (s jQuery id: ‘progress')
>>> html: [ :r | r paragraph: 'Connecting to Downer...' ].
>>> integration connect.
>>> s << (s jQuery id: ‘progress')
>>> html: [ :r | r paragraph: 'Logging In...' ].
>>> integration login.
>>> s << (s jQuery id: ‘progress')
>>> html: [ :r | r paragraph: 'Looking up ' , self idToFetch ].
>>> integration find: self idToFetch..
>>> s << (s jQuery id: ‘progress') html: [ :r | r paragraph: 'Done.' ].
>>> integration quit
>>>
>>> However this won’t work because the script will not be returned to the browser until the method completes.
>>>
>>> What’s the recommended way of going about this? Can you push a partial result without a streaming server?
>>>
>>> Is there a way of doing this without some kind of polling loop and running the long operation in a separate thread?
>>>
>>> Cheers,
>>>
>>> Jupiter
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org <mailto:seaside at lists.squeakfoundation.org>
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>>
>> --
>> -----------------------------------------------------------------------
>> Objektfabrik Joachim Tuchel mailto:jtuchel at objektfabrik.de <mailto:jtuchel at objektfabrik.de>
>> Fliederweg 1 http://www.objektfabrik.de <http://www.objektfabrik.de/>
>> D-71640 Ludwigsburg http://joachimtuchel.wordpress.com <http://joachimtuchel.wordpress.com/>
>> Telefon: +49 7141 56 10 86 0 Fax: +49 7141 56 10 86 1
>>
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org <mailto:seaside at lists.squeakfoundation.org>
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20170303/5e873187/attachment-0001.html>
More information about the seaside
mailing list