When zTree Reactive is loading for the first time I'm getting this error message in JS:
This error happens in the client action: InitTreeAction during the InitTree JS step in the flow seen below:
The line of JS code it happens on is this line here seen below:
When the zTreeObj is getting initialized for some reason the zTree object that is part of the $.fn is undefined. But this only happens when other HTML elements are present in the same screen and I'm not sure why these other elements are affecting it.
I've also attached a very simple oml file that demonstrates the issue. Interestingly enough if you change the order of the components in the widget tree and put zTree below the FullCalendar then the error goes away, but when it's above it the error happens.
This is a pretty critical issue for us that we need to get resolved. Any ideas why this is happening or help on this issue would be greatly appreciated.
Hi Cody,
I tried reproducing the mentioned issue and fortunately it's working fine in my case. What happens if you don't include the Fullcalendar block in the page?
Demo Link: zTreeTask
Kind regards,
Benjith Sam
Hi Benjith, did you try loading the OML I attached? Yes with that OML if I remove the calendar the error goes away. But in our actual application it doesn't. Most likely because there is something else in the application that causing it to do that.
Hi Codey,
Sorry for my late reply. The only difference that I observed with the shared oml is, I'm using the FullCalendarReactive forge asset instead of ReactiveFullCalendar. As you assumed there is a possibility that the error might have occurred because of a conflict with some other element in the dom.
Thank you for your reply, I switched the calendar to what you are using and the error did go away. So I will have to see why I'm using the one vs the other and see if I can switch them.
Thanks!
Ok so I just remembered why we are using the other calendar "ReactiveFullCalendar". Because it supports ExternalDropEvents which we use.
The calendar you are using doesn't support External Drop Events. Can you use the OML I sent and make sure you are using ReactiveFullCalendar. I think if you do that you will see the error we are getting.
Are you referring to reactive-fullcalendar - I don't see the ExternalDropEvents available in the FullCalendarRoot block. Is it a custom build?
I can try to help if you can share the oml (ReactiveFullCalendar) with the customized fullcalendar asset code.
Hi Benjith, yes there is some custom code in it. I've attached the oap file.
I assume that the error occurred because of the jQuery version conflict.
zTree refers to jQuery ver 1.4.4 and the custom FullCalendar implementation refers to jQuery ver 3.6.0
Suggestion: Update the zTree script reference to jQuery 3.6.0
Sample app: zTreeTaskFC
I hope this helps you!
Hi that was a great thought, I changed out the JS library to match but it still throws the error. Just to make sure you have exactly what I have in my environment I've attached all 3 modules.
ZtreeReactive
Reactive FullCalendar
ca (my test app that throws the error which references both the modules above)
Hi that was a great thought, I changed out the JS library to match but it still throws the error. Just to make sure you have exactly what I have in my environment I will attached all 3 modules in separate replies since it won't let me attach all 3 in this reply due to size limit.
Can you try the following steps.
1) Remove the jQuery script reference from the FullCalendarRoot block
2) Add the RequireScript Node in the FullCalendarRoot > OnReady event handler action flow and reference the jQuery script URL in the RequireScript client action URL property.
Refer to the attached oml.
Hi Benjith, thanks again for helping with this. So I did everything you mentioned above and it did fix it for the ca application I had you trying it with, but it didn't solve it for the bigger application we actually are using it with. The ca application I had you looking at was a stripped down version to make it super simple and still causing the error. But for whatever reason the error still happens with the more complex version of the app.
I've attached the more complex application still called "ca" to this post to show you. If you can figure out why it happens with it using the same libraries with everything you've suggested to do to them then I think it will be resolved.
Again thank you this is a big project for us and we are super hopeful to be able to use the zTree component.
Hi Cody, Unfortunately, I'm not able to trace the glitch happening under the hood while multiple-level jQuery files get loaded, and the happened issue is related to it.
A workaround that will hopefully resolve your issue is to check the jQuery presence in the global scope and conditionally execute the RequireScript node in the FullCalendarRoot > OnReady event handler action flow.
So I tried what you recommended and it still throws the error. I think it's because somewhere else in our project we are loading the JS library. But this never use to be an issue. If I don't load the JS library at all in the FullCalendarReactive module then the error goes away in the sample I've sent you. But not in our main project, most likely because we have other modules loading the JS library too. Is there some way that can be changed in zTree for how it loads the JS library?
the zTree script is requiring the jquery script and there isn't a way to check if it's already loaded to be safe here. Do you have any thoughts on checking if it's already load in the zTree module and not loading it if it already is?
I implemented the previously shared approaches in my env, and it worked well for oap1 (stripped-down version) and oap2 (more complex version).
Do you have any thoughts on checking if it's already load in the zTree module and not loading it if it already is?
I would try following the same approach.
Hi Benjith, I followed the same approach in the zTree module and now it's finally working! YAY! Thank you so much for all your help I really appreciate it!
Hurrah! we finally cracked it :)
Glad to help you. Please mark any of the posts as a solution for future reference. Thank you.
Nice job @Benjith Sam! This also solved my problem but I am not able to mark the post as a solution.