PDA

View Full Version : How do I show cool "Loading..." animation when loa



davida
21 Dec 2006, 10:38 AM
I'm using the JSONDataModel and it takes a few seconds to load the data and refresh the browser so I'd like to show a little animation. I notice it comes for free with the tab dynamic loading.

Should I be using the UpdateManager? And how would I tie that into the dataModel.load(url) call?

Many thanks.

moraes
21 Dec 2006, 11:19 AM
Should I be using the UpdateManager? And how would I tie that into the dataModel.load(url) call?

Create an element to serve as a placeholder for the 'loading' message. Before calling dataModel.load(url), set a CSS class in that element so it will have the loading animation in the background. Execute a .update('Loading...') in the element to display the loading message. Set a callback in load() to de-activate the element once the loading is done.

See this thread for some CSS examples:
http://www.yui-ext.com/forum/viewtopic.php?t=1668

A quick code example:


// create an element in the target container
var msg = YAHOO.ext.DomHelper.append(container, {tag: 'div', cls:'msg-active loading-indicator''});
// set a message
msg.update('Loading...');
// this callback will de-activate the loading message once the load is done
var endLoad = function() {
msg.dom.className = 'msg-inactive';
}
// now do the loading
dataModel.load({url:..., callback: endLoad})

davida
21 Dec 2006, 12:36 PM
Moraes,

In your snippet, what should the container be? Is that the element that I'm rendering my grid to (in my case a div)? I tried that and I don't see anything.

moraes
21 Dec 2006, 2:32 PM
container is just a example variable. It should be the HTML element or ID to which the created element (the message div) will be appended. Check the DomHelper docs for other insertion methods. Test with document.body to append to the page body and see the results.

PS: sorry, I should have checked the docs for YAHOO.ext.grid.LoadableDataModel.load().


public function load(Object/String url, [String/Object params], [Function callback], [Number insertIndex])

Is this the class you are using? If yes you should use follow the syntax above.

jack.slocum
21 Dec 2006, 3:33 PM
Another thing to try which may work:


// grid defined above so easily closured in, you can modify how you need to
var grid = ....;
dataModel.on('beforeload', function(){
grid.getView().getBodyTable().innerHTML =
YAHOO.ext.UpdateManager.default.indicatorText;
});

This is completely untested but may work. It depends on the standard loading-indicator class used by the tabs and other updates. Let me know if it doesn't work and we can investigate some other stuff.

davida
22 Dec 2006, 7:21 AM
Jack,

That shows it but it doesn't go away - it stays floating above the grid data after it loads.

But I've not moved to the paged model and this is no longer an issue for me. The data loads more quickly and the paging toolbar has the little busy animation in it which works fine.

the hank freid
5 Jun 2008, 3:02 AM
In my opinion, the user moraes is right. So Create an element to serve as a placeholder for the 'loading' message. Before calling dataModel.load(url), set a CSS class in that element so it will have the loading animation in the background.

And also given the link of css is also correct.

http://www.yui-ext.com/forum/viewtopic.php?t=1668el