Set bean's property from dynamically generated HTML list

Question

I have a <ul> element which I dynamically fill with <li> elements. I desire to get control of these <li> element, by that I mean to have them able to set a property of my bean with there content. Just to be more explicit : once I click on a <li> , I want the text in it to be the value of a property.

Here's the code of the unordered list generation:

<div data-role="content">   

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Région...">
  <%
     for (int i = 0; i < mdjsBean.getRegionList().size(); i++) {
        String region_ = (String) mdjsBean.getRegionList().get(i) ;
  %>
    <li><a><%= region_ %></a></li>
   <%}%>
</ul>

What I hope for is something similar to JSF's selectOneMenu tag, it gives you choices and you select one (of which the value will be stored in your bean property).

Any idea about how we might do that in JSP and <ul> and <li> tags ?

My requirements :

As the picture shows, it's a an autocomplete widget of jQuery(mobile), in my case, I so far succeded to retrieve values of "regions" for DB and arrange them in a listview. Type anyting in the textarea and the listview start filtering regions. What I hope for is now to click on an element of that listview and have it fill the mdjsBean.region property with the choosen region (btw regionList is a list of all regions, this list is filled from DB, with the help of a java function).

Thanks in advance.

Answer 1

I don't see anything here that isn't simple JS and Ajax, but there are no "beans" on the client side. You can fake it with DWR, which is JS and Ajax.

Without DWR it's a matter of sending the selected value to the server, getting back either JSON to build the new options with, or HTML and injecting it directly into the DOM. (It's actually the same with DWR, but it's wrapped up in Java-looking JS.)

Depending in your needs it might be a good idea to investigate frameworks that wrap up this process for you, although IMO is important to understand what's going on underneath.

It's not twisted, it's simply not possible: JS=client, bean=server. If you want to update the client with server-side data without a page refresh, Ajax is the option (ignoring long connections etc).