Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I have a quite simple but worrying question.
Consider a tabbox with two tabs : T1 and T2.
A handler is executed when I change from T1 to T2 (onSelect$T2 event). But the point is that this event takes some time to be executed (database requests and various operations) and T2 appears (while T1 disappearing) only when this handler has finished.
Consider that T2 has got a HTML component which depends on the DOM page. Thus, commands such as jquery (jq('#myId')) have no effect because the component is still hidden because T2 is not displayed yet, so that getDocumentById returns 'undefined' until the DOM page is constructed (ie. T2 is displayed)
So I'd like to know if my component (or another component within T2) could fire an event whenever it is "physically" shown on the page. I mean displayed client side "for the first time", ie. every time the user switches from T1 to T2.
Thanks for your replies.
I don't know such event to do this, since 'physically visible' is really dependency,
however, there is a client side api ,when a component is bind to dom, (bind_) could be overrided.
<zk xmlns:w="client">
<tabbox>
<tabs>
<tab>Tab1</tab>
<tab id="tab2">Tab2</tab>
</tabs>
<tabpanels>
<tabpanel>
<div>Panel 1</div>
</tabpanel>
<tabpanel fulfill="tab2.onSelect">
<div w:bind_="function(dt,skipper,after){alert('hi javascript');this.$supers('bind_', arguments);}">Panel 2
<button label="ClickMe" onClick='alert("Work!!")'/>
</div>
</tabpanel>
</tabpanels>
</tabbox>
</zk>
Hi dennis,
Thank you for your answer. This really works but it only does the trick when the element is bound to the DOM, that's to say the very first time the user switches from Tab1 to Tab2.
I needed a function to be fired every time we switch from Tab1 to Tab2.
So, either I can use your code and dynamically reinstanciate the div each time T2 is clicked in order to (re)bind it each time Tab2 is displayed, or I can use directly some jquery functions (for example : http://stackoverflow.com/questions/1432111/how-to-write-onshow-event-using-javascript-jquery).
Thanks again.
Best Regards,
I don't really know your case,
however, If you want it does every time when 'switch' to Tab2, maybe you should listen to onSelect of tabbox or tab ,
and use Clients.evalJavaScript to do the jquery stuff.
Dennis, the point is that at the time Clients.evalJavaScript("...") is called within my onSelect handler, the corresponding tabpanel is not yet displayed.
For example :
public void onSelect$tab2() {
// Do stuff with database queries
// Do stuff with zk list rendering
// ...
// Function below has no effect, because $('#myDivOnTab2Panel') is still hidden on current page at the time I call it, because tab1 is still displayed
Clients.evalJavaScript("myJQueryFunction($('#myDivOnTab2Panel'))");
}As a matter of fact, the call to onSelect$tab2() within tab2 (for example when I click a button onto tab2 panel) and the call when zk automatically calls it when the user changes from tab1 to tab2 behave differently. The value of $('#myDivOnTab2Panel') are not the same between the two calls. First case myDivOnTab2Panel is displayed and second case it is not.
Of course, if the onSelect handler just consists in executing the jquery call, it would work.
public void onSelect$tab2() {
Clients.evalJavaScript("myJQueryFunction($('#myDivOnTab2Panel'))");
}Though, my database queries and list's rendering are made synchronously... I don't know why tab panel 2 is not already shown at the end of the onSelect handler...and why tab panel 1 still is...
I expected the onSelect$tab2() to be called when tab panel2 is displayed, and not while tab panel 1 is still here...
Anyway, I resolved my problem following the stackoverwflow's workaround I provided in my previous post.
Thanks again for your input dennis.
Regards,
Maybe you have a complex case, in my simple test, it works,
Following is my simple case. for the time about tabpanel firsttime shows to client and evalJs in onSelect
<zk>
<script>
var fn1 = function(){
jq('$mydiv').css('border','1px red solid');
}
</script>
<tabbox>
<tabs>
<tab>Tab1</tab>
<tab id="tab2" onSelect='Clients.evalJavaScript("fn1()")'>Tab2</tab>
</tabs>
<tabpanels>
<tabpanel>
<div>Panel 1</div>
</tabpanel>
<tabpanel >
<div id="mydiv" >Panel 2
<button label="ClickMe" onClick='alert("Work!!")'/>
</div>
</tabpanel>
</tabpanels>
</tabbox>
</zk>Hi dennis.
Thanks again for your example. Indeed it's exactly the behaviour I was expecting and the way I thought and coded my window.
But it happens that it gets pretty much more complex when the onSelect executes some heavy code in addition to Clients.evalJavascript() and before calling it.
Thanks again.
Regards,
Asked: 2011-11-14 18:06:51 +0800
Seen: 278 times
Last updated: Nov 17 '11