How can I use a function in a jsp page to change the value in a div tag?

Question

I have a website where a list is printed using a function and <%= %> to print it. I then want to change the value in a separate <div> when an item in the list is selected.

Here is the function that creates the string:

public String createInfoString(String s){

                       JavaBeans.CatalogueBean c = new JavaBeans.CatalogueBean(); 
                       JavaBeans.ProductBean pb[] = c.getProducts(); 


                       int posit = Integer.parseInt(s); 
                       String tempStr =
                       "<img src='Images" + pb[posit].getImageExtention() + "'            width='400' height='300'></img> </BR></BR>"+                                               
                       "Model: " + pb[posit].getName()+ "</BR></BR>" +
                       "Description: " + pb[posit].getDescription() + "</BR></BR>"+
                       "Number in stock: " + pb[posit].getNumAvailable() + "</BR></BR>";

                       return tempStr;

                       }

The Code for the list is as follow:

<ul  onclick="createInfoString(event.srcElement.id)">
                                      <li>
                    <div class="Folder">Accessories</div>
                                      </li>
                                            <%= createSideList()%>
                                </ul>

When an item is clicked, I need to generate a string(this is done by createInfoString ), I then need to push that string into a <DIV> , Can anyone show me how to do this?

with JavaScript i would have used
document.getElementbyID("DisplayInfo").innerHTML = tempStr .
But this does not work with jsp .

Please Help...

Answer 1

The JSP is executed at server-side. If you need to do something when somethin is clicked, it must be done at client-side, in JavaScript.

So you basically have two possibilities:

1. Embed all these HTML blocks in hidden divs in the page. When the UL is clicked, extract the inner HTML of the appropriate hidden div using Javascript and copy it to the DisplayInfo div.
2. When the UL is clicked, send an AJAX request to your webapp, make your webapp return the appropriate HTML block, and in the AJAX response handler, set the received content as the content of the DisplayInfo div.