Listbox onSelect event does not fire

asked 2019-07-01 01:03:37 +0800

k0k0s gravatar image k0k0s
51 1

updated 2019-07-02 16:26:40 +0800

I have the followins zul page with a popup that contains a listbox.

   <space bar="false" spacing="1px" />
   <checkbox id="profile" label="Use my preferences" />
   <space bar="false" spacing="1px" />
   <label value="Select category filter" 
      style="cursor:pointer; padding:5px; border:solid 1px black" popup="categoriesPopup"/>
   <space bar="false" spacing="1px" />
   <popup id="categoriesPopup" > 
      <listbox id="categoriesfilters"  model="${$composer.category_filters}"
         multiple="true" checkmark="true" height="350px" width="400px" >
         <template name="model">
            <listitem value="${each.name}" label="${each.name}" />

And in my composer:

 @Listen("onSelect = listbox#categoriesfilters")
    public void applyCategoryFilter(SelectEvent se){
        Clients.showNotification("LISTBOX ITEM WAS CLICKED");

        if (se.getSelectedItems().isEmpty())

I want to do it in MVC but I can't figure it out the function isn't called I tried specifing the path but that didn't work either, any ideas?


There is a following structure

  • indexFile.zul
    • indexContents.zul #(it's children components are changed at loggin/logout)
      • loginControls.zul #removed and loggedIn.zul components are put in
      • loggedIn.zul
        • loggedInContents.zul #(it's children are changed while navigating)
          • searchContents.zul

The composer that has the Listener is in loggedIn.zul:

   <window id="student_loggedIn" contentStyle="padding:0px; overflow:auto;"  
        <vbox width="100%" align="center" pack="center" 
            style="border:2px solid red;">
            <hbox (NAVIGATION_BAR) ...
            <div hflex="1">
               <window  id="loggedIn_Contents" contentStyle="overflow-y:auto;   
                    padding:0;" style="border:2px solid red; overflow-y:auto;">
                  <include src="/studentComponents/loggedInHome.zul"/>

In the NAVBAR hbox I have a button that changes the loggedIn_Contents by clearing them and loading new in their place from a file

public void goSearch(){
   ClientDebug cd = new ClientDebug();
   cd.clientMsg("Search button was clicked");
   Window loggedInContents = 
      (Window) Path.getComponent("/indexContents/student_loggedIn/loggedIn_Contents");
   Executions.createComponents("/studentComponents/searchContents.zul", loggedInContents, null);

and in the searchContents.zul is the popup that I want to trigger the function in the following path that I posted above:

    <borderlayout vflex="min">
        <west vflex="min" title="Filters" size="15%" flex="true" maxsize="90" collapsible="true">
            <div style="background:#B8D335">
                   <popup id="categoriesPopup" >
                      <listbox id="categoriesfilters"  model="${$composer.category_filters}">

the search Contents also uses model with its getters and they work which makes me think the composer in logged in contents can find the components.

I am thinking to create another composer apply it to the div exactly above the popup and have the listener there and in general divide the logged-in composer's functionality.

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2019-07-01 19:29:05 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

I tested your example trying to follow your snippets as closely as possible. Obviously I had to make up the parts you didn't provide ;) :


As you can see the onSelect listener is called ... so I guess something is missing to cause the problem.

Please adjust the code and send an updated zkfiddle link, showing your exact scenario reproducing the problem?

(I increased your karma so that you can post a link)

link publish delete flag offensive edit

answered 2019-07-02 17:11:24 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

updated 2019-07-02 17:24:36 +0800

trying to follow your edited response:

I can definitely say that dynamically added components are not wired automatically (only those that exist during 'doAfterCompose'). Otherwise you have to rewire listeners manually with Selectors.wireEventListeners(...)

Besides that you are nesting components inside IdSpace components (e.g.: window and include are idspaces) which require to add more specific path information in the @Listen annotation (similar to css selectors).

e.g. (or something similar, I didn't test it)

@Listen("onClick=#loggedIn_Contents #categoriesPopup")

In the end I agree splitting the composers will give you an application which is easier to maintain.

link publish delete flag offensive 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




Asked: 2019-07-01 01:03:37 +0800

Seen: 12 times

Last updated: Jul 02 '19

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