{"id":683,"date":"2012-05-01T12:28:56","date_gmt":"2012-05-01T10:28:56","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=683"},"modified":"2012-05-01T12:28:56","modified_gmt":"2012-05-01T10:28:56","slug":"cancel-a-partial-refresh-via-ssjs","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=683","title":{"rendered":"Cancel a partial refresh via SSJS"},"content":{"rendered":"

After reading Tim Tripcony’s blog post<\/a> , I thought about a way how to cancel a partial refresh via server side javascript. To bring this to life, there are just three things to do:<\/p>\n

    \n
  1. Abort the processing of the request on the server<\/li>\n
  2. Give feedback to the client that request is canceled<\/li>\n
  3. Stop Dojo to process the XHR request<\/li>\n<\/ol>\n

    To stop the processing of a request on the server and to send an empty response to the client, this SSJS code can be used:<\/p>\n

    var response = facesContext.getExternalContext().getResponse();\r\nresponse.reset();\r\nresponse.commitResponse();<\/pre>\n
    The client will receive an empty HTTP response body:<\/p>\n
    \"\"<\/p>\n
    A HTTP Header has to be added to the response to inform Dojo that the request was canceled. In this example it is „X-Partial-Refresh-Cancel<\/em>„:<\/p>\n
    response.setHeader(\"X-Partial-Refresh-Cancel\", \"1\");<\/pre>\n
    The header is now added to the HTTP response and sent back to the client:<\/p>\n
    \"\"<\/p>\n
    The XHR response must be hijacked before it is processed by Dojo. To do this, a new XHR function has to be injected between the existing one. Here is a basic code snippet:<\/p>\n
    var xhrLoad = null; \/\/ placeholder for the original function\r\n\r\nif( !dojo._xhr )\r\n   dojo._xhr = dojo.xhr;\r\n\r\ndojo.xhr = function(){\r\n   var args = arguments[1];\r\n   xhrLoad = args[\"load\"]; \/\/ \"save\" the original load function\r\n                           \/\/ and overwrite with a new one\r\n\u00a0\u00a0 args[\"load\"] = function( a, ioArgs ){\r\n      \/\/ execute custom code\r\n      \/\/ call the original load function:\r\n\u00a0\u00a0    xhrLoad( a, ioArgs );\r\n   }\r\n\r\n   \/\/ do XHR request\r\n   dojo._xhr( arguments[0], arguments[1], arguments[2] );\r\n}<\/pre>\n
    The load function of a Dojo XHR request has a parameter ioArgs<\/em>. This parameter gives a handle to an object that allows to access the HTTP response headers, so the response can be identified as canceled:<\/p>\n
    var canceled = ioArgs.xhr &&\r\n   ioArgs.xhr.getResponseHeader(\"X-Partial-Refresh-Cancel\");\r\n\r\nif( canceled ){\r\n   XSP.allowSubmit();\r\n\u00a0\u00a0 return;\r\n}<\/pre>\n
    If the HTTP header is set, the processing of the request can be stopped. After stopping the request, the XSP object is not allowed to fire the next event. To allow this again, the function XSP.allowSubmit()<\/em> must be called.<\/p>\n
    Here is a demonstration XPage with a button and a label. The partial refresh will never be processed, instead a „Canceled“ message will occur.<\/p>\n
    \"\"<\/p>\n
    <?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n   <xp:button value=\"Label\" id=\"button1\">\r\n      <xp:eventHandler event=\"onclick\" submit=\"true\"\r\n         refreshMode=\"partial\" refreshId=\"label1\">\r\n      <\/xp:eventHandler>\r\n   <\/xp:button>\r\n   <xp:br\/><xp:br\/>\r\n   <xp:label id=\"label1\">\r\n      <xp:this.value>\r\n      <![CDATA[#{javascript:\r\n      var response = facesContext.getExternalContext().getResponse();\r\n     \u00a0var ajax = new com.ibm.xsp.ajax.AjaxUtil();\r\n      if( ajax.isAjaxPartialRefresh(facesContext) == true){\r\n         response.setHeader(\"X-Partial-Refresh-Cancel\", \"1\");\r\n         response.reset();\r\n         response.commitResponse();\r\n         return;\r\n      }\r\n      java.lang.System.currentTimeMillis();}]]>\r\n      <\/xp:this.value>\r\n   <\/xp:label>\r\n   <xp:br\/>\r\n   <xp:br\/>\r\n   <xp:scriptBlock id=\"scriptBlockXHRHandler\">\r\n   <xp:this.value><![CDATA[\r\n      var xhrLoad = null;\r\n      dojo.addOnLoad( function(){\r\n         if( !dojo._xhr )\r\n            dojo._xhr = dojo.xhr;\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dojo.xhr = function(){\r\n           try{\r\n              var args = arguments[1];\r\n              xhrLoad = args[\"load\"];\r\n              args[\"load\"] = function( a, ioArgs ){\r\n    \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0    var canceled = ioArgs.xhr &&\r\n                    ioArgs.xhr.getResponseHeader(\"X-Partial-Refresh-Cancel\");\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if( canceled ){\r\n                    alert(\"Canceled!\");\r\n                    XSP.allowSubmit();\r\n                    return;\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n                 xhrLoad( a, ioArgs );\r\n               }\r\n            }catch(e){}\r\n            dojo._xhr( arguments[0], arguments[1], arguments[2] );\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n      });]]>\r\n      <\/xp:this.value>\r\n   <\/xp:scriptBlock>\r\n<\/xp:view><\/pre>\n","protected":false},"excerpt":{"rendered":"
    After reading Tim Tripcony’s blog post , I thought about a way how to cancel a partial refresh via server side javascript. To bring this to life, there are just three things to do: Abort the processing of the request … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,75,9,27,82,76,81,74,24],"tags":[33,8,7,77,11,4,25,87,16,5,32,12,3,85],"class_list":["post-683","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-dojo","category-javascript","category-performance","category-server","category-ssjs","category-web","category-xpages","category-xsp","tag-8-5-3","tag-dojo","tag-domino","tag-html","tag-http","tag-js","tag-partial-refresh","tag-performance","tag-server","tag-ssjs","tag-tipp","tag-web","tag-xpages","tag-xsp"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=683"}],"version-history":[{"count":9,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/683\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/683\/revisions\/692"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}