New subject: Custom error handler for Seaside expiration and AJAX errors [ WAS ] Re: [AJAX] #script: & #html: vs #onSuccess: & #load & #html:

24 Sep 2016


      Hi Cyril,
For seaside expiration I do not hook on EACH ajax call but with a global
handler:
html document addLoadScript: (html jQuery document
                                onAjaxError: (self ajaxErrorHandler
asFunction: #('event' 'jqxhr' 'settings' 'exception'))).
Note that this handler will take care of seaside expiration as well as
errors in either rendering phase or callback phase from ajax calls.
ajaxErrorHandler
  " If the ajax callback error was timeout...then we alert the user and
forward to login again. If it was an ajax error callback, then we display a
modal showing all the available error information. See
#renderSupportForAjaxErrorHandlerOn: for more details.
Also... note that in DpQuuveProductionWalkbackErrorHandler >> open: (our
custom Seaside error handler for GemStone), when there is an AJAX error, in
the response object we write a JSON serialized dictionary with all the
error information (see #respondFromAjaxRequestWith:continuation:).
Therefore, what we must do here is to read the response (will be JSON),
parse that, and get the useful information. Finally, refresh the
'ajaxErrorDialog' with the error info we got and finally show the dialog.
"
^ ' if (jqxhr.status == 403) {
            alert("For security reasons we sign people out during periods
of inactivity. Please sign in again.");
            window.location.href =
settings.url.split("?")[0].replace("help","");
        } else {
// This is on purpose because sometimes with TinyMCE we would get status 0
and empty error...when there was no error
// The reason is explained in:
http://bartwullems.blogspot.com.ar/2012/02/ajax-request-returns-status-0.htm...
if (jqxhr.readyState == 0 || jqxhr.status == 0) {
    return; //Skip this error
 };
// Lets write to console all error info possbile
  var requestResponse = {
    url: settings.url,
    method: settings.type,
    data: settings.data,
    httpStatus: jqxhr.status,
    error: exception || jqxhr.statusText,
    data: settings.data
  };
responseText = jqxhr.responseText;
responseText.replace(/[\"'']/g, ''\$&'').replace(/\u0000/g, ''\0'');
jsonValue = jQuery.parseJSON(responseText);
console.error(jsonValue);
$(''#ajaxErrorDialog'').find(''.errorTitle'').html(''<span
style="color:#4F2817;">''+jsonValue.errorTitle+''</span>'');
$(''#ajaxErrorDialog'').find(''.exceptionDescription'').html(''<span
style="color:#4F2817;">''+jsonValue.exceptionDescription+''</span>'');
$(''#ajaxErrorDialog'').find(''.dateAndTime'').html(''<span
style="color:#4F2817;">''+jsonValue.dateAndTime+''</span>'');
$(''#ajaxErrorDialog'').find(''.continuationOop'').html(''<span
style="color:#4F2817;">''+jsonValue.continuationOop+''</span>'');
$(''#ajaxErrorDialog'').find(''.packagesVersions'').html(''<span
style="color:#4F2817;">''+jsonValue.packagesVersions+''</span>'');
$(''#ajaxErrorDialog'').find(''.sitePrefix'').html(''<span
style="color:#4F2817;">''+jsonValue.sitePrefix+''</span>'');
$(''#ajaxErrorDialog'').find(''.user'').html(''<span
style="color:#4F2817;">''+jsonValue.user+''</span>'');
$(''#ajaxErrorDialog'').find(''.gemPid'').html(''<span
style="color:#4F2817;">''+jsonValue.gemPid+''</span>'');
$(''#ajaxErrorDialog'').find(''.gemSessionID'').html(''<span
style="color:#4F2817;">''+jsonValue.gemSessionID+''</span>'');
$(''#ajaxErrorDialog'').modal(''show'');
}'
And then, I also render my "ajaxErrorDialog" which is the component/dialog
rendered when there is an ajax error:
renderSupportForAjaxErrorHandlerOn: html
  html tbsModal
    id: 'ajaxErrorDialog';
    with: [
          html
            tbsModalDialog: [
              html
                tbsModalContent: [
                  html
                    tbsModalHeader: [
                      html tbsModalTitle
                        level: 4;
                        with: [
                              html tbsAlert beDanger
                                with: [
                                  html tbsGlyphIcon iconTime.
                                  html space.
                                  html text: 'Unexpected Error!'.
                                  html span
                                    style: 'text-color: white';
                                    with: [ html tbsModalCloseIcon ] ] ] ].
                  html
                    tbsModalBody: [
                      "This is a template div that is filled/replaced with
the real text from DpQuuve >> ajaxErrorHandler"
                      html
                        text:
                          'The operation you tried failed because of an
unexpected error. You may want to either try again, sign out and sign in
and try again, or contact us about the error. However, note that other
aspects of the program should continue to work normally.'.
                      html
                        break;
                        break.
                      html div
                        with: [
                          html text: 'Error description: '.
                          html span class: 'exceptionDescription' ].
                      html break.
                      html div
                        with: [
                          html text: 'Error ID: '.
                          html span class: 'continuationOop' ].
                      html break.
                      html div
                        with: [
                          html text: 'Generated at: '.
                          html span class: 'dateAndTime' ].
html break.
                      html div
                        with: [
                          html text: 'By user: '.
                          html span class: 'user' ].
html break.
                      html div
                        with: [
                          html text: 'Site url: '.
                          html span class: 'sitePrefix' ].
                      html break.
                      html div
                        with: [
                          html text: 'Packages: '.
                          html span class: 'packagesVersions' ].
html break.
                      html div
                        with: [
                          html text: 'Gem PID: '.
                          html span class: 'gemPid' ].
html break.
                      html div
                        with: [
                          html text: 'Gem Session ID: '.
                          html span class: 'gemSessionID' ].
] "html tbsModalFooter: [
html tbsButton: 'Close'.
html tbsButton bePrimary; with: 'Save changes'
]" ] ] ]
Hope this helps. Let me know if it is clear. If it is not yet, I can do
(and I should do!) a blog post explaining better.
Cheers,
On Sat, Sep 24, 2016 at 8:15 AM, Cyril Ferlicot D. <cyril.ferlicot@gmail.com
...
wrote:
...
Le 24/09/2016 à 08:48, Johan Brichau a écrit :
...
Hi Mariano,
First button does a single ajax call and responds a js script.
Second button does two ajax calls, first one without a response content,
second one with a html response content.
...
Both achieve the same end result but the second one requires two
request-response cycles to your server.
...
The second one will thus achieve the end result slower than the first
one.
...
We typically also try to optimize as much as possible into single ajax
requests.
...
Mind that you _can_ combine a single primary and multiple secondary
callback blocks into a single ajax call.
...
A primary callback is a callback that responds a content to the client
(#script:, #html:, #json:, #text, ….)
...
A secondary callback is a callback that does not respond content
(#callback:value:, #callback:passengers:, #callback:json: , …)
...
There is an exception to this rule, #callback: is implemented in the
Seaside jQuery binding as a primary callback, even if it does not return
any content.
...
Although for this example, I would actually write it as follows, because
the #callback: block is a primary callback.
...
          html button
                  bePush;
                  onClick: (html jQuery id: ‘myDivId’ load html: [:r

| | … do some other stuff …. then ... self renderMyDivOn: r.  ] )
...
                  value: ‘Test’


Hi!
With this example how is manage the case where the session expire?
In general I do:
onClick: (html jQuery ajax
        callback: [  ];
        onSuccess: (  (html jQuery id: 'myDivId') load html: [ :r | self
renderMyDivOn: r.  ]);
        onError: 'location.reload();' "probably session expiration");
...
...
Now, it also depends of the ‘myDivId’ is known when rendering the button
or not, but in this simple example this would yield the same result ;)
...
cheers
Johan

seaside mailing list
seaside@lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
--
Cyril Ferlicot
http://www.synectique.eu
2 rue Jacques Prévert 01,
59650 Villeneuve d'ascq France

seaside mailing list
seaside@lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
-- 
Mariano
http://marianopeck.wordpress.com

Custom error handler for Seaside expiration and AJAX errors [ WAS ] Re: [Seaside] [AJAX] #script: & #html: vs #onSuccess: & #load & #html: