0

On my page there is a panel that shows a list of car dealers. The panel displays a list of dealers with information for each dealer as mentioned below.

  • For each dealer I need to show : name, address, phone, hours. The data is in json.
  • name, address, phone : they are simple text-labels.
  • hours: There is a link "View hours" for each deaaler. On clicking it, a text-label slides down the link showing "loading-gif" if hours data not yet present, else shows the hours data. Clicking link again hides the hours data.

When the page is rendered, this is the behavior I need:

  • On page render I show name, address, phone labels & the hours link. As of now I do NOT have the hours information in json.
  • After the page renders, I want to make a request to the server (Ajax ?), get the updated json with hours information & re-render the "view hours" so that when clicked it now shows the hours. This is what I do not know how to do.

Why am I not sending a json with hours information initially itself? This is because collecting that is expensive & very rarely will the "View Hours" link be used. So collecting all that data upfront will make the page render slow. I want the event/act of page loading trigger a request to get hours data & re-render only the hours text-label that slides down on clicking the "View Hours" link.

I looked at AjaxSelfUpdatingTimerBehavior but its trigger is a time duration, not the page load.

Kumar Manish
  • 1,166
  • 1
  • 16
  • 28

3 Answers3

0

Since the view hours links will be used "Very Rarely" ,according to you, it would be best to fetch those data on demand, rather than pulling them all up during/after page load.

This would in turn reduce the overhead of collecting a lot of data in the page and also free you from associating each data with each records, parsing them and putting them in HTML.

  • Thanks. That did occur to me but "view hours" is still a functionality, and we decided that instead of making user wait after clicking it, why not utilize the time while the user is browsing the page to load the extra stuff. So I would not be making ajax request per click on the "view hours" button. I would like to get ALL hours information and render ALL the "view hours" text-labels after the page loads. – Kumar Manish Jan 28 '13 at 11:47
0

Try adding the "view hours" link and the code to get the data on a Panel, then lazyload that panel using an AjaxLazyLoadPanel http://www.mkyong.com/wicket/how-do-use-ajaxlazyloadpanel-in-wicket/. You could show a loading-gif, for each link, while the application gathers the data.

drobson
  • 955
  • 7
  • 13
0

You could use an AjaxLazyLoadPanel for this (as drobson suggested). This works very nice but in your scenario it might have 1 drawback. Each hour to be updated will be a synchronous AJAX call so each one needs to be updated separately. This might mean more traffic and a not ideal user experience.

Another alternative might be to add a AbstractDefaultAjaxBehavior to your page which will update the hours (and add the whole panel to the target). You can call the method generated by this behavior when the document has loaded.

    this.add(new AbstractDefaultAjaxBehavior() {

        @Override
        protected void respond(AjaxRequestTarget target) {
            //calculate hours + add list or whatever to the target
        }

        @Override
        protected CharSequence getCallbackScript() {
            StringBuilder result = new StringBuilder();

            result.append("function resetHours() {\n");
            result.append("wicketAjaxPost('" + this.getCallbackUrl() + "', null, function(){}, function(){});" + "\n");
            result.append("}\n");
            return result;
        }
    });

And the call:

public void renderHead(IHeaderResponse response) {
    response.renderOnLoadJavaScript("resetHours()");
}
Stijn Geukens
  • 15,454
  • 8
  • 66
  • 101