Hello!
Almost 7 Several years ago I developed an application with Tapestry 5.3.8 +
EasyUI 1.3.5 (with JQuery 1.8.3) + tomcat 8.0+JDK8+Spring+OpenJPA. Now for
some reason I have to migrate the JDK8 to OpenJDK11. So I have to upgrade
Tapestry to version 5.5.0 or higher. I did below things:
JqueryStack.java (same as that in the application with Tapestry 5.3.8)
public class JqueryStack implements JavaScriptStack {
...
@Override
public List<Asset> getJavaScriptLibraries() {
List<Asset> ret = new ArrayList<Asset>();
ret.add(assetSource.getContextAsset("jquery/jquery-1.8.3.min.js", null));
ret.add(assetSource.getContextAsset("jquery/jquery.json-2.4.min.js",null));
ret.add(assetSource.getContextAsset("jquery/jquery.easyui.min.js", null));
ret.add(assetSource.getContextAsset("jquery/validatebox-filter.js",null));
ret.add(assetSource.getContextAsset("jquery/easyui-lang-zh_CN.js", null));
ret.add(assetSource.getContextAsset("jquery/datagrid-groupview.js", null));
ret.add(assetSource.getContextAsset("jquery/datagrid-pagerfilter.js",
null));
ret.add(assetSource.getContextAsset("jquery/jquery.ajaxfileupload-min.js",
null));
ret.add(assetSource.getContextAsset("jquery/noconflict.js", null));
ret.add(assetSource.getContextAsset("script/pms.obj.min.js", null));
ret.add(assetSource.getContextAsset("script/pms.min.js", null));
return ret;
}
AppModule.java
@Contribute(SymbolProvider.class)
@ApplicationDefaults
public static void setupEnvironment(MappedConfiguration<String, Object>
configuration)
{
configuration.add(SymbolConstants.JAVASCRIPT_INFRASTRUCTURE_PROVIDER,
"jquery");
}
@Core
@Contribute(JavaScriptStack.class)
public static void overrideJquery(OrderedConfiguration<StackExtension>
conf) {
conf.override("jquery-library",
StackExtension.library("context:jquery/jquery-1.8.3.min.js"));
}
@Contribute(JavaScriptStackSource.class)
public static void addMyStack(
MappedConfiguration<String, JavaScriptStack> configuration) {
configuration.addInstance("pms", JqueryStack.class);
}
Then in Layout.java,
@SetupRender
void initScript() {
javaScriptSupport.importStack("pms");
}
Deployed and started:
The EasyUI tags are parsed and pages could be rendered correctly. But Tabs
and Dialog did not works:
Dialogs:
<a href="javascript:changePass(1)">Administrator</a>
function changePass(userId) {
var href = contextPath + "/user/gadget/changepass";
if (userId != null) {
href += "/" + userId;
}
jQuery('#dd_edit').dialog({
title : PMS.Messages.dialog_upass_change,
width : 300,
height : 190,
closed : false,
cache : false,
href : href,
modal : true,
buttons : [ {
text : PMS.Messages.btn_save_label,
iconCls : 'icon-save',
handler : saveUserPass
} ],
onLoad : function() {
loadAdminView(userId);
},onBeforeOpen:doNothing
});
}
function loadAdminView(userId){
if(userId != null){
jQuery('.admin').hide();
jQuery('#opassword').validatebox('disableValidation');
}
}
When clicked on Administrator link, a blank page displayed, and browser
console showed:
pms.js.1.0.7.js (minified JavaScript library):4 Uncaught TypeError: require
is not a function.
It seems the RequireJS is not initialized.
Tabs problem:
<div id="page_tabs" class="easyui-tabs">
<div title="${message:tab_structure}" style="padding:0 10px 10px 10px;">
<div style="margin:10px;">
<t:if test="isMaster">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addfund()"
data-options="plain:true,iconCls:'icon-add'">${message:btn_fund_add}</a>
<p:else>
<a t:type="pagelink" page="structure/member" context="literal:list"
class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-back'">${message:btn_return}${workspace.masterFund.fundName}</a>
</p:else>
</t:if>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="addpartner()"
data-options="plain:true,iconCls:'icon-add'">${message:btn_partner_add}</a>
</div>
<table class="easyui-datagrid" data-options="onLoadSuccess:genDescTip"
style="height:435px;">
<thead>
<tr>
<th
data-options="field:'name',width:fixWidthTable(0.10)">${message:column_name}</th>
<th
data-options="field:'fullName',width:fixWidthTable(0.25)">${message:column_full_name}</th>
<th
data-options="field:'holderType',width:fixWidthTable(0.10)">${message:column_type}</th>
<th
data-options="field:'joinTime',width:fixWidthTable(0.10)">${message:column_join_time}</th>
<th
data-options="field:'subscribeAmount',width:fixWidthTable(0.10),formatter:numberFormatter">${message:column_subscribe_amount}</th>
<th
data-options="field:'raiseFee',width:fixWidthTable(0.10),formatter:numberFormatter">${message:column_raise_fee}</th>
<th
data-options="field:'participationFee',width:fixWidthTable(0.10),formatter:numberFormatter">${message:column_participation_fee}</th>
<th
data-options="field:'description',width:fixWidthTable(0.05),formatter:formatDescription">${message:column_description}</th>
<th
data-options="field:'operation',width:fixWidthTable(0.08),align:'center'">${message:column_operations}</th>
</tr>
</thead>
<tbody>
<tr t:type="Loop" t:source="funds" t:value="fund">
<td>
<t:pagelink page="structure/member"
context="${parentNav}_${fund.holder.holderId}">${fund.fundName}
</t:pagelink>
</td>
<td>${fund.fullName}</td>
<td>${messages.get(fund.fundType)}</td>
<td>
<t:output format="format" value="fund.setupAt" />
</td>
<td></td>
<td></td>
<td></td>
<td>${fund.description}</td>
<td>
<a href="javascript:editfund(${fund.fundId})"
class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">
</a>
</td>
</tr>
<tr t:type="Loop" t:source="partners" t:value="partner">
<td>${partner.partnerName}</td>
<td>${partner.fullName}</td>
<td>${messages.get(partner.partnerType)}</td>
<td>
<t:output format="format" value="partner.setupAt" />
</td>
<td>${partner.baseValue}</td>
<td>${partner.raiseFee}</td>
<td>${getPartiFee(partner)}</td>
<td>${partner.description}</td>
<td>
<a href="javascript:viewpartner(${partner.partnerId})"
class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-tip'">
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div title="${message:tab_cashin}" style="padding:0 10px 10px 10px;"
data-options="cache:false,href:'${contextPath}/structure/gadget/listcashin'">
</div>
</div>
When clicked on the tab:
<div title="${message:tab_cashin}" style="padding:0 10px 10px 10px;"
data-options="cache:false,href:'${contextPath}/structure/gadget/listcashin'">
</div>
Exceptions showed:
pms.js.1.0.7.js:4 Uncaught TypeError: require is not a function
The same error. It seems the RequireJS is not initialized.
I tried different versions of JQuery. For JQuery 1.8.3, if the lib is not
included into the JavaScript stack:
@Override
public List<Asset> getJavaScriptLibraries() {
List<Asset> ret = new ArrayList<Asset>();
//ret.add(assetSource.getContextAsset("jquery/jquery-1.8.3.min.js", null));
ret.add(assetSource.getContextAsset("jquery/jquery.json-2.4.min.js",null));
ret.add(assetSource.getContextAsset("jquery/jquery.easyui.min.js", null));
The EasyUI tags will not be parsed, the page is a mess. I checked the
core.js, it's there. If putting it in the JS library, the pages are parsed
fine. But obviously the Jquery lib is duplicated.
But if using JQuery 3+, don't need Jquery.js to be put inJS libraries, just
let it in the core.js, the page would be parsed. Tabs and Dialog did not
work with Jquery 3.1 either. But this time no errors are reported in the
browser console.
This bothered me for a long time. If you ever experienced such problems or
if you have any suggestions, I will appreciate it greatly.
Thank you very much.
Fred
