poniedziałek, 30 sierpnia 2010

Dynamically removing some website content in Rails 3 Way (Prototype, UJS)


<div id="search">
  <div class="results">
    Search results
  </div>
  <%= link_to 'Reset results', '#', :'data-remove' => '#search .results' %>
</div>



document.observe("dom:loaded", function() {
$(document.body).observe("click", function(event) {
element = event.findElement();
resetWhat = element.readAttribute('data-remove')
if(resetWhat) {
resetable = $$(resetWhat);
for(var i=0; i< resetable.size(); i++) {
resetable[i].remove();
}
event.stop();
return false;
}
return true;
});
});



You could implement data-show, data-hide, data-toggle, data-appear etc. in the same easy way :-) I can certainly imagine hundreds of applications for such data-* custom attributes. Hopefully, we will have some libraries which will make good use of this pattern.



You can check it live here: Live heroku application with demos

Visit rails3-demos github repository to see the source code and colaborate on other demos. Be creative!