I created a Component that acts like a Search Wrapper. The user is able to enter a search query. This query is sent from the client to the server, the server sends it to a search machine (like google), results will be returned, parsed and then displayed to the user. You can see it on the screenshot how it looks (not ready yet :-). Now I need a way to perform a “lazy loading”.
When the user scrolls almost to the bottom of the window, an event should be triggered to load more results from the search machine. It has nothing to do with SQL so I cant use the default “Lazy containers” or Tables etc.
I use a simple panel with labels to display the results. Dont want to use tables because they dont fit into my design…
So is there a way to trigger such an event? Or do you even know a better solution to perform a “custom” lazy loading?
Solved it with jQuery and custom JavaScript Code.
For those who are interested in it…
These are the BASIC! steps for my approach.
You need to work on it of course not to overload the server.
JavaScript.getCurrent().addFunction("loadMoreResults", new JavaScriptFunction() {
@Override
public void call(JSONArray arguments) throws JSONException {
Notification.show("GOT CALL... loading more results");
new Thread(new Runnable() {
@Override
public void run() {
UI.getCurrent().access(new Runnable() {
@Override
public void run() {
// load results an update gui
// PUSH must be enabled.
}
});
}
}).start();
}
});
Register the listener:
[s]
$(document).ready(function() {
$(".v-ui").scroll(function() {
alert("Scroll Test");
});
});
[/s]
Unfortunately … this construction does not work. I dont know why…Hence I moved the script part into the java class directly.
Attention: Not the window is scrolling but the
v-ui element. Thanks to Jouni Koivuviita. Saw it in another post.
Finally… we can register the listener:
