Smalltalk › Frameworks & Tools › Seaside › Seaside General

Showing and hiding an overlay during an ajax call

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

3 messages Options

Dave

Showing and hiding an overlay during an ajax call

Hi guys,

I want to show and dismiss an overlay (https://gasparesganga.com/labs/jquery-loading-overlay/) during an quite long processing that starts from an ajax call.
Showing the overlay is not an issue, but I can't dismiss it.

My code is:

html document addLoadScript: (JSStream on: '$.LoadingOverlay("show");').

html jQuery ajax
callback: [ ... ] value: (JSStream on: '...');
onSuccess:
((html jQuery id: 'myId') load
html: [ :h | self veryLongOperationOn: h ]).

Now I don't know where to put the code to hide the overlay. If I write:

html jQuery ajax
callback: [ ... ] value: (JSStream on: '...');
onSuccess:
((html jQuery id: 'myId') load
html: [ :h | self veryLongOperationOn: h ]);
onComplete: (html document addLoadScript: (JSStream on: '$.LoadingOverlay("hide");'))

The overlay immediately disappears because the onComplete does not wait for the veryLongOperation. So I think I should put the code in the block like:

html jQuery ajax
callback: [ ... ] value: (JSStream on: '...');
onSuccess:
((html jQuery id: 'myId') load
html: [ :h | self veryLongOperationOn: h.
h document addLoadScript: (JSStream on: '$.LoadingOverlay("hide");') ])

but of course it does not work.

Can you help me please?
TIA
Dave

Esteban A. Maringolo

Re: Showing and hiding an overlay during an ajax call

Hi Dave,

You shouldn't do a "addLoadScript:" but rather a simple script.

ej:

html anchor
url: 'javascript:void()';
onClick: (html jQuery script: [:s |
s << (JSStream on: '$.LoadingOverlay("show");').
s << html jQuery ajax
callback: [ "long server operation" ];
onSuccess: (JSStream on:
'$.LoadingOverlay("hide")')
] );
with: 'Click me to run lenghty server operation'

addLoadScript: is used document-wide, and mostly at the initial page
load, so it isn't suitable to be used as a script (it is, a javascript
anonymous function) you pass to be used as a handler or callback.

Hope it helps.

Esteban A. Maringolo

2017-07-10 13:45 GMT-03:00 Dave <[hidden email]>:

> Hi guys,
>
> I want to show and dismiss an overlay
> (https://gasparesganga.com/labs/jquery-loading-overlay/) during an quite
> long processing that starts from an ajax call.
> Showing the overlay is not an issue, but I can't dismiss it.
>
>
> My code is:
>
>
> html document addLoadScript: (JSStream on: '$.LoadingOverlay("show");').
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h ]).
>
>
> Now I don't know where to put the code to hide the overlay. If I write:
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h ]);
> *onComplete: (html document addLoadScript: (JSStream on:
> '$.LoadingOverlay("hide");'))*
>
> The overlay immediately disappears because the onComplete does not wait for
> the veryLongOperation. So I think I should put the code in the block like:
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h.
> *h document addLoadScript: (JSStream on: '$.LoadingOverlay("hide");')*
> ])
>
> but of course it does not work.
>
> Can you help me please?
> TIA
> Dave
>
>
>
> --
> View this message in context: http://forum.world.st/Showing-and-hiding-an-overlay-during-an-ajax-call-tp4954136.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Dave

Re: Showing and hiding an overlay during an ajax call

Hi Esteban, thanks for your reply.

My idea to use the addLoadScript is because I have to perform the longServerOperation also on the initial page load.
BTW there is something I don't understand, probably due to my lack of ajax knowledge.

I have to perform the longServerOperation on the onSuccess: because the callback has to set some parameters needed to be retrieved by the longServerOperation. So after the callback I use the onSuccess: to perform the longOperation and then to hide the overlay, but I don't know how to call the two instructions in sequence.

Dave

Esteban A. Maringolo wrote

Hi Dave,

You shouldn't do a "addLoadScript:" but rather a simple script.

ej:

html anchor
url: 'javascript:void()';
onClick: (html jQuery script: [:s |
s << (JSStream on: '$.LoadingOverlay("show");').
s << html jQuery ajax
callback: [ "long server operation" ];
onSuccess: (JSStream on:
'$.LoadingOverlay("hide")')
] );
with: 'Click me to run lenghty server operation'

addLoadScript: is used document-wide, and mostly at the initial page
load, so it isn't suitable to be used as a script (it is, a javascript
anonymous function) you pass to be used as a handler or callback.

Hope it helps.

Esteban A. Maringolo

2017-07-10 13:45 GMT-03:00 Dave <[hidden email]>:
> Hi guys,
>
> I want to show and dismiss an overlay
> (https://gasparesganga.com/labs/jquery-loading-overlay/) during an quite
> long processing that starts from an ajax call.
> Showing the overlay is not an issue, but I can't dismiss it.
>
>
> My code is:
>
>
> html document addLoadScript: (JSStream on: '$.LoadingOverlay("show");').
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h ]).
>
>
> Now I don't know where to put the code to hide the overlay. If I write:
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h ]);
> *onComplete: (html document addLoadScript: (JSStream on:
> '$.LoadingOverlay("hide");'))*
>
> The overlay immediately disappears because the onComplete does not wait for
> the veryLongOperation. So I think I should put the code in the block like:
>
> html jQuery ajax
> callback: [ ... ] value: (JSStream on: '...');
> onSuccess:
> ((html jQuery id: 'myId') load
> html: [ :h | self veryLongOperationOn: h.
> *h document addLoadScript: (JSStream on: '$.LoadingOverlay("hide");')*
> ])
>
> but of course it does not work.
>
> Can you help me please?
> TIA
> Dave
>
>
>
> --
> View this message in context: http://forum.world.st/Showing-and-hiding-an-overlay-during-an-ajax-call-tp4954136.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside