Optimized partial refresh with support for server-side actions

	<xp:scriptBlock id="scriptBlockPROptimized">
        <xp:this.value><![CDATA[
			XSP.addOnLoad(function(){

			    // hijack the existing partial refresh method
			    if( !XSP.__partialRefresh ){
			        XSP.__partialRefresh = XSP._partialRefresh;
			    }

			    // add the new one to the XSP object
			    XSP._partialRefresh = function x_prfh(method, form, refreshId, options){

			        // clear the form?
			        if( options.clearForm ){

			            // create a new HTML form...
			            var newForm = document.createElement( "form" );
			            newForm.setAttribute( "method", form.method );
			            newForm.setAttribute( "action", form.action );

			            // ... and loop all existing fields
			            for( var i = 0; i<form.length; i++ ){
			                var field = form[i];
			                var fieldName = field.name;
			                var includeField = false;

			                try{

			                    // check for addition fields
			                    if( options.additionalFields ){
			                        includeField = dojo.indexOf(options.additionalFields, fieldName)!=(-1)?true:false;
			                    }

			                    // only add XPages relevant fields and addtional fields
			                    if( fieldName == form.id || fieldName.substr(0,2) == '$$' || includeField ){

			                        var newField = null;
			                        if( field.options ){
			                            // special handling for fields with options
			                            for( var j=0; j<field.length; j++ ){
			                                if( field.options[j].selected ){
			                                    newField = document.createElement( "input" );
			                                    newField.setAttribute( "type", "hidden" );
			                                    newField.setAttribute( "name", fieldName );
			                                    newField.setAttribute( "value", field.options[j].value );
			                                    newForm.appendChild( newField );
			                                }
			                            }
			                        }else{
			                            // default field handling: just clone the DOM element

			                            // check for $$xspsubmitid option
							            if( options.submitid && fieldName == "$$xspsubmitid"){
							                newField = document.createElement( "input" );
							                newField.setAttribute( "type", "hidden" );
							                newField.setAttribute( "name", "$$xspsubmitid" );
							                newField.setAttribute( "value", options.submitid );
							                newForm.appendChild( newField );
							            } else {
				                            newField = field.cloneNode( true );
				                            newForm.appendChild( newField );
				                        }
			                        }
			                    }
			                }catch(e){
			                    console.log(e);
			                }
			            }

			            // call the original refresh method with the new form
			            return XSP.__partialRefresh(method, newForm, refreshId, options);
			        }

			        XSP.__partialRefresh(method, form, refreshId, options);
			    };
			});
		]]></xp:this.value>
    </xp:scriptBlock>






Here's an example of using the optimized partial refresh for an eventhandler:

<xp:button id="button1">
      <xp:eventHandler event="onclick" submit="false" id="submitEventHandler" refreshMode="partial" refreshId="somePart">
       <xp:this.action><![CDATA[#{javascript:someServerSideAction();}]]></xp:this.action>
       <xp:this.script>
           <![CDATA[
                  XSP.partialRefreshPost(
                      '#{id:somePart}',{
                          clearForm: true,
                          submitid: '#{id:submitEventHandler}'
                      }
                  );]]>
       </xp:this.script>
      </xp:eventHandler>
  </xp:button>

See http://per.lausten.dk/blog/2014/09/xpages-optimized-partial-refreshes-for-event-handlers.html.

XPages
Per Henrik Lausten
September 20, 2014 5:04 AM
Rating
18

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



No comments yetLogin first to comment...