How to Load the page First and read database

Question

Hi,

HTML form has some text boxes and a drop down box. Drop down has huge values, and takes lot of time to fetch from database.

So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).

But without any event trigger, how do I make call to database again ?

I am using JSF with RichFaces, Servlet.

The following code is not working

   <h:selectOneMenu value="#{obj.selectedValue}">
      <f:selectItems value="#{obj.allValues}" />
      <a4j:support selfRendered="true" action="#{bean.action}"/>
   </h:selectOneMenu>

Thanks,

Answer 1

You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values. Be advised that your form will be useless to those without JavaScript.

Answer 2

+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.

have a look at "google suggest" if you want to see this in action

-Ace

Answer 3

As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.

Answer 4

At the bottom of your page put the following:

<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}" 
     reRender="yourDropdown" />

window.onload = yourJsFunction();