CODEWITHSUNDEEP
jsf
Miten
Miten

Reputation: 358

jsf cascading list

How do I cascade the lists so if user changes selection in selectedCategory list it should update the selectedTo list.

Here is my snippet:

<h:selectOneMenu id="selectedCategory" value="#{converterBean.selectedCategory}">
  <f:ajax execute="selectedCategory" render="selectedFrom"/>
  <f:selectItems value="#{converterBean.categories}"/>
</h:selectOneMenu>
<h:selectOneListbox id="selectedFrom" value="#{converterBean.selectedFrom}" size="5">
  <f:selectItems value="#{converterBean.fromList}"/>
  <f:ajax execute="selectedCategory selectedFrom" render="selectedTo"/>
</h:selectOneListbox>
<h:selectOneListbox id="selectedTo" value="#{converterBean.selectedTo}" size="5">
  <f:selectItems value="#{converterBean.toList}"/>
</h:selectOneListbox>

I notice that it updates the selectedFrom list but does not cascade further to selectTo list.

As per suggestion to try render both selectedFrom and selectedTo for category selection the request posted from the page is:

POST http://localhost:8081/converter_web/faces/converter.xhtml HTTP/1.1
Accept: */*
Faces-Request: partial/ajax
Content-Type: application/x-www-form-urlencoded;charset=UTF-8
Referer: http://localhost:8081/converter_web/
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: localhost:8081
Content-Length: 1253
Connection: Keep-Alive
Pragma: no-cache
Cookie: JSESSIONID=DDDEA598A60CC468763C36B536513B41

converter_form=converter_form&converter_form%3AselectedCategory=temperature&converter_form%3AselectedFrom=mm&converter_form%3AselectedTo=cm&converter_form%3Avalue=0.0&javax.faces.ViewState=b%2BArKl5NJujWibUQzHf3dUG2JlT%2Bnq7KygA2%2FXpXXscCouBr5xT9Br%2BmoP78%2FvuPAYG%2Bi7Q0jFEKGqJpFgRo%2BDU4ZV251yac84pu3bZ71V9j%2BHvRPMkWw82S8q0v2p1jmn3msPXxvKrQQ1oVpr7pGBPXc2faQGXHW55Md%2BKSkspIgCxXx3x3T6NDaJ1%2BGTEFkyb1DE%2BdoQHQ4EjqV3jEC5mq56OlsHgEmkQ8TVCQM%2FPmAfUBWiQEHqBYzohXNfFpO3kfdrKjeTrq648UtGPYU88VJ9mtIOptYEfwFKN9y%2FG9MOBKEfRZ9XlJz2bPt1zmATIg3iRT1W7YVtmHq7e9g%2FUxsM82duMxFUWhoFPHfrFk4tt48LFH29Hk60y3eeFxqtg7g1JxPD1aQrLN9sxBduS53nFWObCms1YU40uvMT2yjX0kp4wM8YwqT2jTFDtLHcVBide1RGTnzFGzjOrbCJ8rIEmWfPa1yUMkXRBBsgpKWFIl0ueBQiCT%2BDoD9UXlNOQGS%2F5tIdP%2BVTO%2FkWiBo5X99SpKwKY8%2B2pqzJKDrPRXIwci52Wi%2Fo%2Fw%2B0TkpnVrtDaDl7w2eYjmq7bYZFRDjWy3Jtgc5V1DUF%2BhX3Bfiq7l%2Fq5YL4DYx0NBI2esfJ0LTFCqXu8aCk%2BWOPOWnOCSGA5Y9EGUXgzV6q%2Fp%2FFWa8Kj8E%2FeoB380eFwXAEiyyRGv&javax.faces.source=converter_form%3AselectedCategory&javax.faces.partial.event=change&javax.faces.partial.execute=converter_form%3AselectedCategory&javax.faces.partial.render=converter_form%3AselectedFrom%20converter_form%3AselectedTo&javax.faces.behavior.event=valueChange&javax.faces.partial.ajax=true

We would expect only selectedCategory be send but its sending all form fields in ajax call. It though calls getCategories(), getFromList(), getToList() but when it calls getToList it uses category=temperature and from=mm. from=mm is what is passed in POST request as selectedFrom=mm.

Regards,

Miten.

Upvotes: 0

Views: 234

Answers (2)

Miten
Miten

Reputation: 358

I added ajax listener as below so indicate that category change is being invoked so that getFromList will set selectedFrom to new item from its list instead of one being posted. Then getToList will find correct category and from unit to query its to list.

<f:ajax execute="selectedCategory" render="selectedFrom"></f:ajax>

to

<f:ajax listener="#{converterBean.categoryChanged}" execute="selectedCategory" render="selectedFrom selectedTo"></f:ajax>

Upvotes: 0

Kerem Baydoğan
Kerem Baydoğan

Reputation: 10722

Change this:

  <f:ajax execute="selectedCategory" render="selectedFrom"/>

To this:

  <f:ajax execute="selectedCategory" render="selectedFrom selectedTo"/>

Upvotes: 1

Related Questions