Use the jscallback mechanism to call partial page refresh

Requirement Description: The approval form page is opened in my to-do list. After completing the process, I want to close the page and refresh the to-do form in real time; at the same time, this requirement also applies to situations where approval needs to be initiated from some workflow management modules, such as the recruitment process in the recruitment demand module and the approval performance in my performance management. Requirement Description: The approval form page is opened in my to-do list. After completing the process, I want to close the page and refresh the to-do form in real time; at the same time, this requirement also applies to situations where approval needs to be initiated from some workflow management modules, such as the recruitment process in the recruitment demand module and the approval performance in my performance management.

Let's take a look at the previous implementation. The logical implementation function is to initiate approval from the my to-do list and directly go to the current page after the approval is completed, that is, the approval page jumps to a new oa homepage and opens my work-my to-do tab. The implementation method is as follows:

$("#but_back").bind("click", function() {         window.top.opener=null;         var url = window.location.href;         var isoa=url.indexOf('phicomm.com');         //var isoatest=url.indexOf('oatest.phicomm.com');         var curWwwPath=window.document.location.href;          var pathName=window.document.location.pathname;          var pos=curWwwPath.indexOf(pathName);          var localhostPaht=curWwwPath.substring(0,pos);          var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);         if(isoa>0){             window.top.open(localhostPaht+'/main/index.action?tableName=mywork','_self');         }else{             window.top.open(localhostPaht+projectName+'/main/index.action?tableName=mywork','_self');         }     });

Processing logic of desktop js:

$ (Document ). ready (function ($) {// initialization icon initModules (initMenus (); refixAppPos (); // register the event regClick (); sortable (); initIcoRemove (); initAppManager (); // parse the current URL to determine whether to jump to the specified Table gotoTable () ;}); // jump to the Table function gotoTable () {var tableName = request ("tableName"); if (""! = TableName & null! = TableName & 'undefined '! = TableName) {openUrl ($ ("# shorttop_content_icon _" + tableName ));}}

Although the above method has implemented the function of jumping to my to-do list after handling, it has the following defects:

The jump is in the new page, not in the call page, thus forming two identical desktops for the call and jump pages;

The new page is not exactly the same as the original call page. If multiple tabs are opened on the call page, the new page is equivalent to closing other tabs except my to-do list, does not meet the user's needs;

Unfriendly user experience

We use the js callback implementation as follows. When the current page call page is not empty and is not closed, we directly call the js method in the page to implement partial refresh.

/** Refresh parent window close window */function refreshAndClose () {var jscallback =$. trim ($ ("# jscallback "). val (); var type = $. trim ($ ("# type "). val (); if (window. opener &&! Window. opener. closed & jscallback! = Null & jscallback! = "") {If (! Type) {// call page of this page to execute its embedded or called js method eval ("window. opener. "+ jscallback +" (); ");} window. close (); // close the current page} else {window. top. opener = null; var url = window. location. href; var isoa = url. indexOf ('phicomm. com '); var curwwwpathwindow.doc ument. location. href; var pathname=w.doc ument. location. pathname; var pos = curWwwPath. indexOf (pathName); var localhostPaht = curWwwPath. substring (0, pos); var projectName = pathNa Me. substring (0, pathName. substr (1 ). indexOf ('/') + 1); if (isoa> 0) {window. top. open (localhostPaht + '/main/index. action? TableName = mywork', '_ self');} else {window. top. open (localhostPaht + projectName + '/main/index. action? TableName = mywork', '_ self ');}}}

Call page js: grid is the table to be refreshed.

function openUrl(url){     url=url+"&jscallback=callsus"          window.open(url,'_blank');    } function callsus(){     $('#performanceDataGrid').reload(); }

Through js callback, the call page is refreshed locally, which provides guidance and reference for similar functions of other applications.

For more information about calling partial page refresh using the js callback mechanism, refer to PHP!