zoneManager回調函數

Question

的掛毯的JavaScript deferredZoneUpdate方法我在tapestry 5.4網頁製作fullcalendar。

當我創建新的Event或單擊現有事件時，將調用fullcalendar的方法（select或eventClick）。在這些方法中，tapestry js方法被稱爲（zoneManager.deferredZoneUpdate("formZone", listenerURIWithValue);），因爲我想刷新我的jQuery對話框div（#formZone）什麼是掛毯區域。它的功能很好，數據出現。但是，我總是看到刷新的「過程」，因爲在區域更新部分之後，打開了jQuery對話框，但刷新沒有結束（我知道是因爲ajax調用是異步的），並且會導致「醜陋」在jQuery對話框打開後刷新。

我的目標是定義一個回調函數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"); 
      } 
     }); 
    } 
} 

該實施例是具有包括作爲掛毯模塊自舉模式。

當與內容掛毯刷新區域的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); 

而不是引導/莫代爾你可以使用任何模塊，但不要忘記包括在META-INF /模塊。