Monday, 30 July 2012

Disappearing Button

A light-weight hands-on-coding kinda post this one, and that too not in a mainstream language, Grails. The use case is a familiar one on social networking sites like facebook or linkedin.

Let's say you have pending friendship/connection requests. Adjacent to each username you will have a button ("Accept"). Once you click the button and the server has done its job, you will see text in place of the button saying something like "Mr. X is now a connection". I call this pattern as the disappearing button pattern.

The key to implement it is an ajax call by the button pressed, the return updating the div element in which the button is placed and replacing the button with a text.

In grails, the mechanism is as follows:
render template1

template 1
    update div1

render template2

template 2
Connection Accepted

Here is the actual code, and it’s quite easy to follow the flow.
ProfileController.groovy _accept-connection.gsp
Connection Accepted

No comments:

Post a Comment