0

jQueryUI undefined

asked 2020-12-15 23:32:32 +0800

aUser gravatar image aUser
113 4

Hello,

I imported a custom version of jQuery and wanted to import a custom version of jQueryUI too. The jQuery import went fine, however the jQueryUI didn't. In developer tools (Chrome), after the page is loaded, if I type:

alert(jQuery.fn.jquery)

the output is:

3.5.1

which is correct. If I type:

alert(jQuery.ui.version)

or

alert(jQuery.ui)

I get undefined.

This is the code:

<?page title="title" contentType="text/html;charset=UTF-8"?>
<zk>

<script type="text/javascript" src="~./js/jquery-3.5.1.min.js" ></script>
<script type="text/javascript" src="~./js/jqueryui.js" ></script>

<window title="title" border="normal">
</window>

</zk>

Am I missing something here?

Thanks

delete flag offensive retag edit

9 Answers

Sort by ยป oldest newest most voted
1

answered 2020-12-18 12:15:11 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

Is there a way to make jQueryUI.js "connect" to a different imported version of jQuery instead of the ZK built-in jQuery?

There is always a way to control the sequence how scripts are loaded and executed. However there are a few things you haven't mentioned in detail. E.g.

  • your exact ZK version?
  • is the code you provided your root page or part of a page that's added later via include (in my tests this makes big difference)

In any case adding scripts in an uncontrolled manner is kind of gambling against latency, browser (version) specific and zk specific behavior. ZK has a built in way to control client side js package loading (and especially waiting for a package to be ready), this control can be achieved by defining a js package in a WPD file, which can package both zk js widget code and external files. It will then provide a dedicated callback indicating when your package is loaded (similar to afterMount, just especially dedicated for this usage).

e.g. create a wpd for mypackage in src/main/resources/web/js/mypackage/zk.wdp (also place both jquery files in the same mypackage folder)

<package name="mypackage">
    <script src="jquery-3.5.1.min.js"/>
    <script src="jquery-ui.min.js"/>
</package>

Now both scripts will be combined into a single resource and downloaded once (no more sequence/latency issue). To trigger loading the package you can use:

zk.load('mypackage', function() {
  // will be called after your package is loaded
});

Since it looks like you are integrating a custom 3rd party library the next step would be to define a custom widget to make the inline code reusable.

To implement the widget - create a MyWidget.js (same mypackage folder)

mypackage.MyWidget = zk.$extends(zul.wgt.Div, {
        /*instance members*/
        _myString: '',
        _myNumber: 0,
        bind_: function() {
            this.$supers('bind_', arguments);
            alert(jQuery.fn.jquery + ' ' + jQuery.ui.version + ' my props:' + this._myString + this._myNumber);
            // initialize your widget here based on parameters
        }
    }, { /* static members */ }
);

(I added 2 client side widget attributes, you can add more, and change names)

and add it to the zk.wpd file:

<package name="mypackage" language="xul/html"  depends="zul.wgt">
    <script src="jquery-3.5.1.min.js"/>
    <script src="jquery-ui.min.js"/>
    <!-- more scripts -->
    <widget name="MyWidget"/>
</package>

In the zul file you can now w:use the widget class (which will load mypackage automatically) and set widget attributes also using the client namespace w: declared above.

<zk xmlns:w="client">
    <div w:use="mypackage.MyWidget"
         w:_myString="'a string'"
         w:_myNumber="1234"></div>
</zk>

Like this the required scripts will only be loaded once and only when needed, at the right time, and you can have multiple instances of the same widget in your page.

From the java side you can use setWidgetClass and setWidgetOverride on a Div component


If you want this to be controllable more conveniently from java code you can also implement a server side component class and define a custom component ... however that's too much for here, just read the custom component reference.

link publish delete flag offensive edit
1

answered 2020-12-16 16:17:24 +0800

hawk gravatar image hawk
2740 1 5
http://hawkphoenix.blogsp... ZK Team

I have run with your code and 2 script files are loaded as expected.

Have you ever checked Chrom developer tool > Console? is there any js error?

From the developer tool > Source tab, you should be able to see those 2 files: image description

link publish delete flag offensive edit
1

answered 2020-12-17 10:53:25 +0800

hawk gravatar image hawk
2740 1 5
http://hawkphoenix.blogsp... ZK Team

Use script directive to ensure its loading order like:

<?script src="~./jquery-3.5.1.min.js"?>
<?script src="~./jquery-ui.min.js"?>

Check the console tab to see if there is an error that fails jquery UI. But even jquery UI doesn't register on 3.5.1, it should register on zk built-in jquery.

So even you just load jqueryui.js only, jq.ui should return its version.

Or maybe something in your current project affects the jquery UI. You can also create a new project to test.

link publish delete flag offensive edit
1

answered 2021-01-01 03:55:59 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

updated 2021-01-04 10:05:40 +0800

(reply to question below)

inside a script running at client side the server side configuration isn't known, however you can encode the url at server side using the c:encodeURL function

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
...
<script type="text/javascript">
    var file = jq.getScript("${c:encodeURL('~./path/to/file')}",  // should work
                   function() {alert("script loaded"); });
</script>

should produce something like this:

/yourwebapp/zkau/web/ac142736/path/to/file

still I'd recommend the .wpd approach described above (btw I tried adding the iviewer script as well successfully) it is deliberately designed to load scripts in a particular order inside a ZK application, jquery alone won't be aware of ZK specific timing

link publish delete flag offensive edit
0

answered 2020-12-16 17:07:17 +0800

aUser gravatar image aUser
113 4

updated 2020-12-16 17:14:05 +0800

Yes, I can see the scripts loaded in the sources of Chrome, both jQuery and jQueryUI.

I also wanted to import another script (iviewer.js) that depends on jQuery and JQueryUI, but as soon as i load the page i get the error message:

Uncaught TypeError: $(...).iviewer is not a function

This is the code so far..

<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
    <script type="text/javascript" src="~./app/component/zoomer/jquery-3.5.1.min.js" ></script>
    <script type="text/javascript" src="~./app/component/zoomer/jqueryui.js" ></script>
    <script type="text/javascript" src="~./app/component/zoomer/js/iviewer.js" ></script>

    <window title="" border="normal">

        <div id="wrapper" class="wrapper">
            <div id="viewer" class="viewer" style="border: 2px solid red;"></div>
        </div>

    </window>

    <script>

        zk.afterMount(function(){
            var test = $("$wrapper").css('background-color', 'red'); // works fine

            var iv1 = $("$viewer").iviewer({  // error, iviewer not a function
                src: path,
                zoom : 55
            });
        });

    </script>
</zk>

I can't understand why this doesn't work, thank you for the help

(I can't upload images, if it can be useful, I'm adding the full error message)

Uncaught TypeError: $(...).iviewer is not a function
at eval (eval at <anonymous> (zk.wpd:9), <anonymous>:7:29)
at r (zk.wpd:21)
at s (zk.wpd:21)
at t (zk.wpd:21)
at d (zk.wpd:21)
at zkx (zk.wpd:21)
at zkmx (zk.wpd:21)
at _childjs (eval at c.evalJSON (zk.wpd:25), <anonymous>:4:287)
at y.bind_ (zk.wpd:54)
at y.bind (zk.wpd:19)
link publish delete flag offensive edit

Comments

I have granted you to upload an image

hawk ( 2020-12-17 10:42:09 +0800 )edit
0

answered 2020-12-17 18:28:32 +0800

aUser gravatar image aUser
113 4

I'll try as soon as I can creating a new project and check that.

Is there a way to make jQueryUI.js "connect" to a different imported version of jQuery instead of the ZK built-in jQuery?

Thanks

link publish delete flag offensive edit
0

answered 2020-12-18 17:19:33 +0800

aUser gravatar image aUser
113 4

updated 2020-12-23 00:56:58 +0800

I tried using both 8.0.2.2 and 9.5.0.2 versions of ZK getting the same results. The code I provided is actually part of a bigger project. I tried to do the same thing on a new project and it worked, all was imported correctly and I had no problems so far.

I'm assuming that the structure of this project is creating some conflicts on loading these .js files.

About the 3rd part library.. It is a .js file, I don't understand why it should not be loaded like the other two .js files (jQuery and jQueryUI) as you mentioned in your answer, I mean, why shouldn't it be like this?

<package name="mypackage">
    <script src="jquery-3.5.1.min.js"/>
    <script src="jquery-ui.min.js"/>
    <script src="iviewer.js"/>    // this is the custom .js that i need to use
</package>

At this point I guess in my .zul page i can go with something like this?

<script type="text/javascript">
    zk.load('mypackage', function() {
    // will be called after your package is loaded
    var iv1 = jq('$viewer').iviewer({
        src = 'test.jpg',
       zoom : 55
    })
    });
</script>

The .zul page is at the same level (hierarchically speaking) of the mypackage folder which contains the zk.pwd file with the content mentioned above. Did I get it right?

From a really fast test i get:

Uncaught SyntaxError: Invalid shorthand property initializer
    at p (zk.wpd:41)
    at Function.globalEval (zk.wpd:69)
    at zkx (zk.wpd:575)
    at zkx_ (zk.wpd:576)
    at Object.outer (zk.wpd:675)
    at m (zk.wpd:642)
    at K (zk.wpd:645)
    at Object._doCmds (zk.wpd:652)
    at Object.afterResponse (zk.wpd:663)
    at Object._onResponseReady (zk.wpd:659)

From documentation:

WPD must be named zk.wpd

This means that you cannot have under mypackage two files called zk1.pwd and zk2.pwd right? None of them would be imported since ZK only "loads" a file called zk.pwd?

I'm using Chrome version 87.0.4280.88 (Stable build)

Thank you

Update: I managed to import the .wpd file but still got the jq(...).iviewer is not a function error message. I don't understand why I should create a widget for a 3rd party library.. Is it necessary? Why does this widget have to extend Div?

link publish delete flag offensive edit

Comments

please provide a runnable project it seems to be too complicated to provide help in this forum based on partial information. or contact our support

cor3000 ( 2020-12-24 15:10:00 +0800 )edit

I'm sorry but I don't think I can do that.. There are so many dependencies and I don't know how many I should use in order to create this situation. I'll try again and I will continue to use the .pwd as I wrote in the last post, without creating a new widget..

aUser ( 2020-12-29 00:55:26 +0800 )edit

ok understood. Yes as mentioned the widget is optional, (i just thought) it makes a lot of sense and allows automatic loading of the package on demand (just like any other ZK widget does), you can still load the .wpd manually when needed.

cor3000 ( 2020-12-29 11:56:36 +0800 )edit

and also you can add the 3rd party script to the .wpd file ... add as many files as you like, I just didn't include it since I didn't know where to download it during my tests.

cor3000 ( 2020-12-29 12:02:16 +0800 )edit

if you would like to give it a try here's the link for the plugin i'm trying to use: https://plugins.jquery.com/iviewer/ again, importing this file in a new project witho pretty much no dependicies, scripts are loading fine, that means that i am not getting any errors so far

aUser ( 2020-12-30 21:21:28 +0800 )edit
0

answered 2020-12-31 18:44:50 +0800

aUser gravatar image aUser
113 4

Is there a way to reference a file with the notation "~./..." inside a script?

If i have a file in my project that can be referenced inside a .zul page with "~./path/to/file", how can i replicate that path inside a script in a .zul page?

<script type="text/javascript">
    var file = jq.getScript("~./path/to/file",  // doesn't work
                   function() {alert("script loaded"); });
</script>
link publish delete flag offensive edit
0

answered 2021-01-05 01:24:34 +0800

aUser gravatar image aUser
113 4

Updating my situation..

I'm trying to use this iviewer.js plugin in a new project to see if i can run it at least in isolation. No luck so far. Following the instructions recevied in this thread and in this other thread this is what i've done:

I created a new project and inside the index.zul page under DeployedResources/webapp i have this code:

<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="" border="normal" xmlns:w="client">
    <div id="wrapper" style="width: 500px; height: 500px;">
        <div id="viewer" style="width: 400px; height: 400px;" w:onBind="doTheThing(this)">
        </div>
    </div>
</window>
<script type="text/javascript">
    function doTheThing(wgt){
        zk.load("mypackage", function() {
            jq("$wrapper").css("background-color", "red");   // works fine
            var iv1 = jq(wgt).iviewer({ // iviewer is not a function
                src : "test.jpg",
                zoom : 55
            }); 
        });
    }
</script>
</zk>

Inside src/main/resources/web/js/mypackage folder i have a zk.wpd file with this content:

<package name="mypackage" language="xul/html">
    <script src="jquery.js" />
    <script src="jqueryui.js" />
    <script src="jquery.mousewheel.min.js" />
    <script src="jquery.iviewer.js" />
</package>

and in the same folder i also have all the .js files listed above.

From Chrome's developers tool i can see that mypackage.wpd is loaded and if i open it i can see the iviewer.js file imported.

The same files were used inside a .html file to display the content and it worked fine (in another zk project) however i can't find a way to make it work again in a .zul page. The test.jpg is put at the same level as the index.zul page but i don't think it has impact on the message jq(...).iviewer is not a function

link publish delete flag offensive edit

Comments

jq refers is the custom variable name for ZK's internal version of jquery, by default it's the same js object as $ or jquery. when loading a custom jquery version later jq will remain ZK's version, and $ and jquery will pick up your custom version. That's why jq(wgt).iviewer fails.

cor3000 ( 2021-01-05 18:25:41 +0800 )edit

the iviewer plugin is only loaded on your custom jQuery version. also the custom jquery version is not aware of zk widget classes. so you'll have to use the DOM element corresponding to that widget. $(wgt.$n()).iviewer should be defined (assuming the scripts were loaded successfully)

cor3000 ( 2021-01-05 18:29:05 +0800 )edit

here the docs about the zk.widget.$n() method

cor3000 ( 2021-01-05 18:31:02 +0800 )edit

Thank you very much. That definitely helped a lot!

aUser ( 2021-01-07 01:46:22 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-12-15 23:32:32 +0800

Seen: 31 times

Last updated: Jan 08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More