Tapestry5中LoadingSpinner点击事件不触发问题求助

问题原因 #

Tapestry5的eventlink组件会通过自身的JavaScript框架接管点击事件，原生的onclick属性会被Tapestry的AJAX处理逻辑覆盖或阻止，导致你写的showSpinner(0)无法执行。

解决方案 #

推荐使用Tapestry官方提供的clientEvent参数来绑定前置JS逻辑，这是最贴合Tapestry机制的做法：

方法1：使用clientEvent参数修改EventLink

直接在eventlink上添加t:clientEvent属性，指定AJAX请求发起前要执行的JS代码：

<a t:type="eventlink" t:zone="appMaintenanceZone" name="reindexArticle" event="reindexArticle" t:clientEvent="showSpinner(0)">Update</a>

Tapestry会自动把这段代码整合到它的AJAX处理流程中，在发送请求前立即执行showSpinner(0)，完美契合你显示加载动画的需求。

方法2：通过JavaScriptSupport绑定事件

如果需要更灵活的事件处理，可以在页面的初始化方法中，用Tapestry的JavaScriptSupport给EventLink绑定点击事件：

1. 先给EventLink添加t:id属性：

<a t:type="eventlink" t:id="reindexLink" t:zone="appMaintenanceZone" name="reindexArticle" event="reindexArticle">Update</a>

2. 在页面类的setupRender方法中注册事件：

@Inject
private JavaScriptSupport javascriptSupport;

@InjectComponent
private EventLink reindexLink;

@SetupRender
void setupLinkEvent() {
    javascriptSupport.addScript("$('#%s').on('click', function() { showSpinner(0); });", reindexLink.getClientId());
}

这种方式可以确保事件绑定在Tapestry的逻辑之前执行，不会被覆盖。

补充说明 #

你服务器端回调中隐藏Spinner的逻辑是正确的，不需要修改。另外注意不要在服务器端执行showSpinner——加载动画应该在用户点击时立即显示，等服务器响应再显示会有明显延迟，影响体验。

内容的提问来源于stack exchange，提问作者Andreas