Have a look at :
There are 2 small divs with a background image.
If I click on the first div, the background goes away. If I click on the second div the background changes.
The only difference is an "invalidate'.
If you inspect the first div you will see that the style has only "https" as the background image url.
So what is the problem you ask? Just use invalidate. The trouble with that is it loses everything. Specifically in my case the attached event listeners provided by jQuery.
It looks a bit like a ZK bug to me?
Thoughts?
no need to think deeply, you simply found a bug in the parseStyle() function which has been there forever (12 years)
--> ZK-4831
If you're losing your jquery listeners I assume you only initialize them at page load time. Ideally you initialize your custom JS code whenever ZK (re-)renders a dom element. E.g. in a w:onBind listener. Doing so your init code is called again e.g. after an invalidate or in case of components being added on demand later.
Tags
People
Badges
Help
<zk xmlns:w="client">
...
<div w:onBind="myinit(this)">
...
Now a function myinit(wgt) will be called everytime the div is being rendered initially and after updates (invalidates/parent-changes).
You can use the wgt (widget object) directly in jquery jq(wgt).on(... or get the corresponding DOM node if needed : wgt.$n().
UPDATE 2021-04-26:
ZK-4831 will be fixed in 9.6.0 - a testable version is already available in 9.6.0.FL.20210423(-Eval)
I would strongly recommend using ZK's built-in lifecycle listener w:onBind the fact that onload works is just an coincidental side effect of how ZK distinguishes between client side listeners and client side overrides.
A client side listener starts with on followed by a capital letter e.g. onBind or onLoad... both will be listeners at ZK widget level (not DOM). ZK will trigger onBind (once the DOM elements are available) but it doesn't know about onLoad so that's never being executed.
The benefit of a listener is that you have the this variable set to the current widget so you don't have to find it first.
A client side override will just define a new (or override an existing) JS property on the widget object. The value can be any valid JS expression e.g. just a number w:myprop="123" or a string w:myprop="'text'", but also a function w:myfunc="function() { console.log('debug');}" or in your case a function call w:myprop="doSomething()" (not sure why you need the parenthesis there, for me the function gets called with and without them), if the function returns a value it will be assigned to the widget property. since there's no capital letter after on in your onload it does exactly that, assign the result of the method call to a new property called onload - after executing the function.
There's no guarantee that the DOM elements are already rendered at that point. That's why there's w:onBind the DOM element will be available from the current widget inside the listener. elem = this.$n().
So it's not just a matter of Syntax it's a matter of meaning, and guarantee when your custom init code is called.
I hope that clarifies.
Yes, an excellent clarification. I have used your suggested code, toucheSwipe and the fix for touchSwipe from https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/pull/362/files.
All is well.
Bobzk ( 2021-03-26 00:07:41 +0800 )editThanks cor3000,
I managed a different way :
xmlns:w="client" w:onload="(doListeners())"
Which seems to work.
No sure of difference between "onload" (which for some reason is not "onLoad") and "onBind".
I prefer your answer as the syntax is better. I could only get it to work by putting brackets around the "doListeners()".
I have combined this answer with the answers about swipeLeft andswipeRight and my code is doing what I want.
Again, thanks.
Asked: 2021-03-23 22:24:08 +0800
Seen: 18 times
Last updated: Apr 28 '21