Tapestry javascript zoneManager 回调函数的 deferredZoneUpdate 方法

Question

我做了一个fullcalendar in my tapestry 5.4网页。

当我创建新的 Event 或单击现有事件时，将调用完整日历的方法（select 或 eventClick）。在这些方法中调用了tapestry js方法（zoneManager.deferredZoneUpdate("formZone", listenerURIWithValue);），因为我想刷新我的jQuery对话框div（#formZone）什么是tapestry zone。而且它在功能上运行良好，数据出现。

但是，我总是看到刷新 "procedure" 因为在区域更新部分之后， jQuery 对话框打开，但刷新没有结束（我知道因为 ajax调用是异步的），它会在 jQuery 对话框打开后导致 "ugly" 刷新。

我的目标是为deferredZoneUpdate定义一个回调函数或者使这个代码序列：

...
zoneManager.deferredZoneUpdate("formZone", listenerURIWithValue);
$('#wsDialog').dialog('open');
...

提前感谢您的回答！

更新：

日历-init.js:

    define(["jquery" , "t5/core/zone"], function($, zoneManager) {
        return function(modifyEventLink, newEventLink, pageTurnLink, allDayText) {
            $(document).ready(function() {
                var calendarDiv = $('#calendar');
                calendarDiv.fullCalendar({
                 //....init
                eventClick: function(calEvent, jsEvent, view) {


                // create modifyeventlink with id param
                var listenerURIWithValue = appendQueryStringParameter(modifyEventLink, 'eventID', calEvent.id);
                // ajax zone update
                zoneManager.deferredZoneUpdate("formZone", listenerURIWithValue);
                // open the worksheet dialog
                $('#wsDialog').dialog('option', 'title', calEvent.title);
            },
            //...init
   });});}}) // the code syntacs is good dont bother these :D

后端：

void onModifyEventLink() {
    if(request.isXHR()) {
        logger.debug("ModifyEventLink on.");
        String eventID = (String) request.getParameter("eventID");
        if(eventID == null) {
            logger.error("wsDialog was not able to load because eventID is NULL!");
        } else {                
            try{
                wSheet = sheetService.find(Integer.valueOf(eventID));
                if(wSheet != null) {    
                    ajaxResponseRenderer
                        .addCallback(new JavaScriptCallback() {
                            @Override
                            public void run(JavaScriptSupport javascriptSupport) {
                            javascriptSupport.require("wsdialogs");
                            }};)
                        .addRender(formZone);
                } else {
                    logger.warn("Worksheet with " + eventID + " not found.");                   
                }
            } catch (NumberFormatException e) {
                logger.error("wsDialog was not able to load beacause eventID was not a number.");
                logger.error("Exception: ", e.getLocalizedMessage());
            }
        }
    } else {
        logger.debug("ModifyEventLink on, request is not XHR (ajax)");
    }
}

（模块）wsdialogs.js:

define(["jquery" , "t5/core/zone"], function($, zoneManager) {
        console.log("wsdialog-js run"); 
        $("#wsDialog").dialog('open');
});

tml:

<t:container
   xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd"
   xmlns:p="tapestry:parameter">

   <t:jquery.dialog t:clientId="wsDialog" t:id="wsDialog" title="${message:wsheet-new}" style="display: none;">
      <t:zone t:id="formZone" id="formZone">
        <t:form t:id="worksheetForm" t:type="form" t:zone="^">
            ....
        </t:form>   
       </t:zone> 
    </t:jquery.dialog>
</t:container>

Answer 1

public class ComponentWithZone {
    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;        
    ...
    public void onSomeEventFromClient() {
        ajaxResponseRenderer.addRender("zone-id-to-update", zone.getBody()).addCallback(new JavaScriptCallback() {
            @Override
            public void run(JavaScriptSupport javascriptSupport) {
                javascriptSupport.require("modal").invoke("showModal").with("#dialog-id");
            }
        });
    }
}

此示例包含 bootstrap 模态作为挂毯模块。

当挂毯刷新区域 div 包含内容时，它将触发 showModal 函数。

UPD：忘了说这个例子假设你有模态模块。这是我的例子：

(function(){
    define(["jquery", "bootstrap/modal"], function($, modal) {
        return {
            showModal: function(id) {
                $('#'+id).modal('show');
            },
            hideModal: function(id) {
                $('#'+id).modal('hide');
            }
        };
    });
}).call(this);

您可以使用任何模块代替 bootstrap/modal，但不要忘记将其包含在 META-INF/modules.

中

Tapestry javascript zoneManager 回调函数的 deferredZoneUpdate 方法

Tapestry javascript deferredZoneUpdate method of zoneManager callback function

javascript

ajax

tapestry

callback

fullcalendar