changing background-image requires an invalidate

asked 2021-03-23 22:24:08 +0800

Bobzk gravatar image Bobzk
442 1 7

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?


delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2021-03-24 12:27:49 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

updated 2021-03-24 12:42:10 +0800

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.

<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().

link publish delete flag offensive edit

answered 2021-03-24 18:31:04 +0800

Bobzk gravatar image Bobzk
442 1 7

Thanks 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.

link publish delete flag offensive edit

answered 2021-03-25 10:12:53 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

updated 2021-03-25 10:16:28 +0800

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.

link publish delete flag offensive edit


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 )edit

That's great to hear. Let's hope the owner of the TouchSwipe-Jquery-Plugin will find the time to integrate pull requests

cor3000 ( 2021-03-26 12:23:04 +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

1 follower



Asked: 2021-03-23 22:24:08 +0800

Seen: 10 times

Last updated: Mar 25

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