Hi Thiago,
Thank you for you kind reply. I did tried different combinations. With
JQuery 3+, there is no need to add JQuery lib to the context asset, just
override
conf.override("jquery-library","Jquery.3.3.1.js"). It's only in core stack.
But for JQuery with lower version, it must be added to JavaScriptStack with
ret.add(assetSource.getContextAsset("jquery/jquery-1.8.3.min.js", null));
and ALSO override the core stack. Otherwise the EasyUI tags are not parsed.
But In either situations, invoke below script from the page, JQuery.dialog
does not work, and reported require function not defined exception. I don't
know the reason. It might be caused by JQuery incompatibility with
Tapestry, or EasyUI. Do you know any EasyUI+JQuery example with Tapestry
5.5.0+? Thank you.
-------------
<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');
}
}
-------------
Thiago H. de Paula Figueiredo <thiag...@gmail.com> 于2021年7月27日周二 下午8:57写道：
> Hello!
>
> I believe the problem here is that it seems your code is preventing
> Require.js from being loaded, thus causing the Uncaught TypeError: require
> is not a function error and completely breaking the whole Tapestry's own
> JavaScript. I'd try avoiding overriding/adding again the jQuery library,
> which is included automatically when you use the jquery infrastructure,
> then have your pms stack depend on the core stack (so it's guaranteed
> jQuery and Require.js get included in the page).
>
> On Mon, Jul 26, 2021 at 12:45 PM fred fred <fred54...@gmail.com> wrote:
>
> > 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
> >
>
>
> --
> Thiago
>
