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:
view
render template1

template 1
div1
    remoteSubmit
    update div1
/div1

controller
render template2

template 2
Connection Accepted

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

No comments:

Post a Comment