PDA

View Full Version : How to build widgets and install into DOM when widget data is retrieved via AJAX



icfantv
24 Jan 2012, 11:51 AM
If I declare a string array and build up a widget in a loop, I can add to the DOM no problem in my onModuleLoad() method.

However, if I mix-and-match, placing some code in the AJAX call's onSuccess(...) method and some outside, I get varying degrees of mixed results, but none were correct until I put ALL my code in the onSuccess(...) method.

What is the "proper" way to build up and install DOM elements whose data is retrieved from AJAX calls? Where should what code be placed? I.e., what code should go in the onSuccess(...) method and what shouldn't?

Thanks.

Colin Alworth
24 Jan 2012, 2:48 PM
Without more details, it would be hard to say what the exact problem is, but I'm guessing it has to do with the Async part of the AJAX calls you are making. Just in case this is the answer, here is a discussion on the GWT group on how to start to think Async:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/faca1575f306ba0f/3be719c021aa19bd

Without more info, a few options present themselves. First, put everything into onSuccess - this is probably the easiest way to do it, but might slow your app down a bit on startup. The nicer way to do it is for the onSuccess to make changes to the layout without just appending to the end - give it the ability to reference the widgets it needs to change, and insert new ones where necessary.

icfantv
24 Jan 2012, 3:03 PM
I'm used to asynchronous programming via J/S - I'm just not used to it yet in Java and GWT.

I was building up a horizontal toggle button toolbar whose button text came in over AJAX. The only way I was able to successfully get it to work was to have all the code in the onSuccess() event handler.

Usually what had happened was that all the buttons were rendered on top of each other instead of in the order they were added to the toolbar.

What I think might have been happening is that since I didn't give the ToolBar an initial size, it would render with a height of like 5px and then add the buttons after the AJAX call completed. I could see the top of the button and using Firebug, if I expanded the height of the ToolBar, I was able to see the button, but again, they were all stacked on top of each other.

I agree that building the model first (if possible) and the populating it is the right way to go, it's just I could never make it work in this case. It seems like I should be able to build the container outside of the AJAX loop and just put stuff in it when the call completes.

Colin Alworth
24 Jan 2012, 3:19 PM
Ah, that helps. Likely the issue is that you need to re-layout the container that has new items.

It is possible to make it re-layout itself automatically, but that can be bad for performance - it will perform the layout every time you add something new, so adding 5 new things means 4 more layouts than you need.

Whatever container you are adding to, call layout on it after you've finished (this is different in 2 or 3, and I'm not yet clear on which you are using, so I can't be much more specific). If you are modifying a container and its parent, it should only be necessary to layout the parent, the child will be laid out automatically.