DWZ (JUI) application instance (III): Modify the source code to automatically refresh the current Layer

Previous DWZ (JUI) Tutorial (II): describes the general specification for processing information feedback. It encapsulates the processing of returned information in the AjaxObject object. For example, after the addUser method in UserAction is successfully executed, outMsg (AjaxObject. newOk ("User Added successfully! "). SetNavTabId (" userListview "). toString (); indicates that the" added successfully "prompt will be displayed on the tab layer where the tabId is userListview ".




 




 

It can be seen that the userListview parameter needs to be set in the Action, that is, the target tab of the returned data. This design is okay, but there are two problems:

1. In practical applications, most of our operations are the current tab. If tabId is specified every time data is returned to the current tab, it is not too formal.
1. If the tree menu on the left side of the page is dynamic and read from the database, and the tabId attribute value can be modified, outMsg (AjaxObject. newOk ("User Added successfully! "). SetNavTabId (" userListview "). toString () obviously cannot meet the requirements.

 

By modifying the dwz source code, you can refresh the current layer when returning data to the action without specifying the tabId,

Take adding a user as an example:

Original example

<% @ Page contentType = "text/html; charset = UTF-8 "pageEncoding =" UTF-8 "trimDirectiveWhitespaces =" true "%> <% @ include file ="/page/common. jsp "%> <div class =" pageContent "> <form method =" post "action =" $ {contextPath}/user/addUserAction "class =" pageForm required-validate "onsubmit = "return validateCallback (this, dialogAjaxDone) "> <div class =" pageFormContent "layoutH =" 58 "> <p> <label> Logon Name: </label> <input type = "text" name = "user. username "class =" required "size =" 20 "maxlength =" 32 "/> </p> <label> logon password: </label> <input type = "text" name = "user. password "class =" required "size =" 20 "minlength =" 6 "maxlength =" 20 "value =" 123456 "alt =" 6-20 letters, numbers, and underscores "/> <span class = "info"> default value: 123456 </span> </p> </div> <div class = "formBar"> <ul> <li> <div class = "button"> <div class =" buttonContent "> <button type =" submit "> OK </button> </div> </li> </ul> </div> </form> </div>




Onsubmit = "return validateCallback (this, dialogAjaxDone)" indicates registering the callback function dialogAjaxDone. After the execution of the action is completed, the js function is executed.

Action, You need to specify the tabId to refresh the page, outMsg (AjaxObject. newOk ("added successfully! "). SetNavTabId (" userListview "). toString ());

 

Replace dialogAjaxDone with the custom dialogReloadNavTab.

Action, you do not need to specify the tabId to refresh the current layer, outMsg (AjaxObject. newOk ("added successfully! "). ToString ());

 

Implementation of the dialogReloadNavTab function:

/*** Get the navtab * @ returns */function getCurrentNavtab () {return $ ("ul. navTab-tab li. selected ");}/*** automatically refreshes the navTab * @ param json */function dialogReloadNavTab (json) {DWZ. ajaxDone (json); var tabId = getCurrentNavtab (). attr ("tabid"); if (json. statusCode = DWZ. statusCode. OK) {if (json. navTabId | tabId! = Null) {navTab. reload (json. forwardUrl, {navTabId: json. navTabId});} else if (json. rel) {var $ pagerForm = $ ("# pagerForm", navTab. getCurrentPanel (); var args = $ pagerForm. size ()> 0? $ PagerForm. serializeArray (): {} navTabPageBreak (args, json. rel);} if ("closeCurrent" = json. callbackType) {$. pdialog. closeCurrent ();}}}





If you want to understand the web framework, or even design your own, js and jquery are the foundation. We recommend that you learn w3cschool.