In the last blog Custom Autosuggest / typeahead we saw how to construct a custom typeahead / autosuggest using an input text box and a popup with select items. If the list to be filtered is smaller we wouldn't need to show a loading symbol to the user, while doing the filter process in the backing bean. But what if the the list too big to filter and the filtering process would take some time like 3 to 4 seconds. Or what if the result of search need to be fetched from an external rest end point or from an external soap service ? It would take some considerable amount of time to fetch the data.
User's expect some quick response from the page, when they try to do something. So it's better to show them that the process is happening at the back end. A simple way to do that is to have loading gif image ready, and show it when the popup opens and before triggering the server event to filter the list. Once the filtered items are ready and about to be returned to the client then hide the loading gif image.
So add a loading gif image inside the popup.
bind it to backing bean binding="#{backingBeanScope.employeeTableData.loadingImage}"
add style to it to show it at the center of the popup. Here we have used position:absolute and using left,top values we can move it. You can adjust according to your popup size.
Now in the javascript add these lines to show the image, before triggering the server event
var loader = evt.getSource().findComponent("loader");
loader.setVisible("true");
Now, when the popup opens this image will be shown. and in "doFilterEmployees"
method we are going to hide this image once the list is ready to be sent to the client back
That's all. We are good to go now :)
This is how it looks
User's expect some quick response from the page, when they try to do something. So it's better to show them that the process is happening at the back end. A simple way to do that is to have loading gif image ready, and show it when the popup opens and before triggering the server event to filter the list. Once the filtered items are ready and about to be returned to the client then hide the loading gif image.
So add a loading gif image inside the popup.
bind it to backing bean binding="#{backingBeanScope.employeeTableData.loadingImage}"
add style to it to show it at the center of the popup. Here we have used position:absolute and using left,top values we can move it. You can adjust according to your popup size.
Now in the javascript add these lines to show the image, before triggering the server event
var loader = evt.getSource().findComponent("loader");
loader.setVisible("true");
Now, when the popup opens this image will be shown. and in "doFilterEmployees"
method we are going to hide this image once the list is ready to be sent to the client back
That's all. We are good to go now :)
This is how it looks
Comments
Post a Comment