Two computers and a microphone

about me presentations

Using ColorBox with Dirty Forms

22 Dec 2011

Recently, I was working on a form that had some sensitive data that the user was required to submit, but often the user would navigate away from the page without saving their work. To combat this, I turned to Dirty Forms; a jQuery plugin to prevent users from losing unsumbmitted HTML form data.

By default, it uses FaceBox. I however, was using ColorBox as my lightboxing library and needed a way to substitute it in. Thankfully, Dirty Forms lets you override the dialog box with bindings.

And so, I present to you the dialog bindings for a ColorBox based dialog:

$.DirtyForms.dialog = {
  selector : '#cboxContent',
  fire : function(message, title) {
    var content = '<h3>' + title + '</h3>' + 
                  '<p style="padding: 10px;">' + message + '</p>' + 
                  '<br />' + 
                  '<p> <a href="#leave" id="leave" class="button delete delete-item">Lose changes and leave</a> <a id="stay" href="#stay" class="button">Stay on current page</a></p>';
    $.colorbox({html: content, width: "500px", height: "240px"});
  bind : function() {
    var close = function(decision) {
      return function(e) {
  refire : function(content, ev) {
    $.colorbox({html: content, width: "500px", height: "300px"});
  stash : function() {
    if ($("#cboxContent").html != "") {
      return $('#cboxContent').clone(true);
    else {
      return false;
comments powered by Disqus