{"id":1383,"date":"2014-03-07T12:57:16","date_gmt":"2014-03-07T10:57:16","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1383"},"modified":"2014-03-07T22:33:39","modified_gmt":"2014-03-07T20:33:39","slug":"xpages-optimized-partial-refreshs","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1383","title":{"rendered":"XPages: Optimized Partial Refreshs"},"content":{"rendered":"

Inspired by the last post of Mark<\/a>, I have created a small CSJS snippet which allows to optimize the behaviour of a Partial Refresh. Normally, if you execute a Partial Refresh, all elements of a form are sent to the server. Take a look at this XPage:<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText01\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText01}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText02\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText02}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText03\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText03}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText04\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText04}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText05\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText05}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText06\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText06}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText07\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText07}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText08\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText08}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText09\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText09}\" \/>\r\n\u00a0\u00a0\u00a0 <xp:inputText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"inputText10\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{sessionScope.inputText10}\" >\r\n\u00a0\u00a0\u00a0 <\/xp:inputText>\r\n\r\n\u00a0\u00a0\u00a0 <xp:div id=\"refreshMe\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <xp:label\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"#{javascript:java.lang.System.currentTimeMillis()}\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"labelNow\" \/>\r\n\u00a0\u00a0 \u00a0<\/xp:div>\r\n\r\n\u00a0\u00a0\u00a0 <xp:button\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"Normal Refresh\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"buttonNormal\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <xp:eventHandler\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 event=\"onclick\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 submit=\"true\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 refreshMode=\"partial\" refreshId=\"refreshMe\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <\/xp:eventHandler>\r\n\u00a0\u00a0\u00a0 <\/xp:button>\r\n\r\n<\/xp:view>\r\n<\/code><\/pre>\n
The button refreshes only a small portion of the XPage, the DIV element refreshMe<\/em>. It does not require any of the posted field values, it just refreshes the DOM element in the frontend. But when clicking the button, the posted data to the server contain all the fields and their values, which is not necessary in this case.<\/p>\n
This is how the request looks like in Firebug (I have prefilled all fields with the values 1..9):<\/p>\n
\"\"<\/p>\n
The response of the server is – as expected – the actual HTML code for the refreshed DOM element:<\/p>\n
\"\"<\/p>\n
The optimized\u00a0 version adds the option clearForm<\/em> to partial refreshs. When using this option, only the XPages internal fields are sent to the server, but DOM will be refreshed correctly:<\/p>\n
<xp:button\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"Cleaned Refresh\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"buttonCleaned\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:eventHandler\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 event=\"onclick\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 submit=\"false\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:this.script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <![CDATA[\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XSP.partialRefreshPost(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 '#{id:refreshMe}',{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 clearForm: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 );]]>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:this.script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:eventHandler>\r\n\u00a0\u00a0\u00a0 <\/xp:button><\/code><\/pre>\n
Now, the POST looks like this:<\/p>\n
\"\"<\/p>\n
You may think „This is useless, you can do a XSP.partialRefreshGet<\/em> instead!“<\/p>\n
That’s why there is the second option additionalFields<\/em>. This allows to define all fields you want to update during the refresh:<\/p>\n
<xp:button\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value=\"Cleaned Refresh\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 id=\"buttonCleaned\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:eventHandler\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 event=\"onclick\"\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 submit=\"false\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:this.script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <![CDATA[\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XSP.partialRefreshPost(\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 '#{id:refreshMe}',{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 clearForm: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0additionalFields: ['#{id:inputText01}',\r\n                                              '#{id:inputText02}' ],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 );]]>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:this.script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/xp:eventHandler>\r\n\u00a0\u00a0\u00a0 <\/xp:button><\/code><\/pre>\n
When clicking the button now, the specified fields are added to the POST request (and will be updated in the JSF tree:<\/p>\n
\"\"<\/p>\n
Here is the snippet (Tested on IE 11, Chrome 33 & FF 27 with ND9 & ND 8.5.3 )<\/p>\n
<xp:scriptBlock id=\"scriptBlockPROptimized\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <xp:this.value><![CDATA[\r\nXSP.addOnLoad(function(){\r\n\r\n\u00a0\u00a0\u00a0 \/\/ hijack the existing partial refresh method\r\n\u00a0\u00a0\u00a0 if( !XSP.__partialRefresh ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XSP.__partialRefresh = XSP._partialRefresh;\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 \/\/ add the new one to the XSP object\r\n\u00a0\u00a0\u00a0 XSP._partialRefresh = function x_prfh(method, form, refreshId, options){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ clear the form?\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( options.clearForm ){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ create a new HTML form...\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var newForm = document.createElement( \"form\" );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newForm.setAttribute( \"method\", form.method );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newForm.setAttribute( \"action\", form.action );\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ ... and loop all existing fields\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for( var i = 0; i<form.length; i++ ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var field = form[i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var fieldName = field.name;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var includeField = false;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 try{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ check for addition fields\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( options.additionalFields ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 includeField = dojo.indexOf(options.additionalFields, fieldName)!=(-1)?true:false;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ only add XPages relevant fields and addtional fields\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( fieldName == form.id || fieldName.substr(0,2) == '$$' || includeField ){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var newField = null;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( field.options ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ special handling for fields with options\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for( var j=0; j<field.length; j++ ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if( field.options[j].selected ){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newField = document.createElement( \"input\" );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newField.setAttribute( \"type\", \"hidden\" );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newField.setAttribute( \"name\", fieldName );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newField.setAttribute( \"value\", field.options[j].value );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newForm.appendChild( newField );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }else{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ default field handling: just clone the DOM element\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newField = field.cloneNode( true );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 newForm.appendChild( newField );\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }catch(e){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(e);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ call the original refresh method with the new form\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return XSP.__partialRefresh(method, newForm, refreshId, options);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 XSP.__partialRefresh(method, form, refreshId, options);\r\n\u00a0\u00a0\u00a0 };\r\n});]]><\/xp:this.value>\r\n\u00a0\u00a0\u00a0 <\/xp:scriptBlock><\/code><\/pre>\n
Just add the script block above to your XPage, or move it into a CSJS library. But keep in mind that you have to think twice when removing data from the request. It can lead in an inconsistence between the data in the client and the data stored in the component tree on the server.<\/p>\n","protected":false},"excerpt":{"rendered":"
Inspired by the last post of Mark, I have created a small CSJS snippet which allows to optimize the behaviour of a Partial Refresh. Normally, if you execute a Partial Refresh, all elements of a form are sent to the … 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":[75,9,27,81,74,24],"tags":[33,47,8,7,4,25,87,32,3,85],"class_list":["post-1383","post","type-post","status-publish","format-standard","hentry","category-dojo","category-javascript","category-performance","category-web","category-xpages","category-xsp","tag-8-5-3","tag-9-0","tag-dojo","tag-domino","tag-js","tag-partial-refresh","tag-performance","tag-tipp","tag-xpages","tag-xsp"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1383","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=1383"}],"version-history":[{"count":6,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1383\/revisions"}],"predecessor-version":[{"id":1395,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1383\/revisions\/1395"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}