作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我做了一个fullcalendar在我的tapestry 5.4 网页。
当我创建一个新的 Event 时或者我单击现有事件,将调用 fullcalendar 的方法(select
或 eventClick
)。在这些方法中,tapestry js方法被调用(zoneManager.deferredZoneUpdate("formZone",listenerURIWithValue);
),因为我想刷新我的jQuery对话框div(#formZone
)什么是一个 Tapestry 区。而且功能运行良好,数据出现。
但是,我总是看到刷新的“过程”,因为在区域更新部分之后,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>
最佳答案
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");
}
});
}
}
此示例将引导模式作为 Tapestry 模块包含在内。
当tapestry用内容刷新区域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 中。
关于javascript - Tapestry javascript deferredZoneUpdate方法的zoneManager回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42786279/
我是一名优秀的程序员,十分优秀!