jModified jQuery Plugin

Sometimes you need to know if the user has changed any of the fields on the page. I wrote a jModified jQuery plugin that will allow you to do just that. It works by hooking it up to form fields, and providing a callback method that will give you the form id, the original value, and the new value. Unlike a simple handling of the change event the original value is preserved so you can see if it actually changed.

The form fields:

<label for="a">Field A:</label>
<input id="a" name="a" type="text" value="a value" />

<br/>
<label for="b">Field B:</label>
<input id="b" name="b" type="text" value="b value" />   
    
<br/>
<label for="c">Field C:</label>
<input id="c" name="c" type="text" value="c value" />

The hookup:

<script> 
    $(function() {
        $("input").modified( { onModified: valueChanged } );
    });
    
    var isPageDirty = false;
    function valueChanged(id, previousVal, newVal) {
      isPageDirty = true;
      alert('The page is dirty.  The value for ' + id + ' has changed from ' + previousVal + " to " + newVal);
    }
  </script>

The jModified Plugin:

(function($){
 $.fn.modified = function(options) {
    
   var defaults = {  
     onModified: function(id, previousVal, newVal) { 
         alert('The value for ' + id + ' has changed from ' + previousVal + " to " + newVal ); }  
   };  
    
   var options = $.extend(defaults, options);  
  
   this.each(function() {
     $(this).data('originalValue', $(this).val());
   });
  
  return this.change(function() {
   var newValue = $(this).val();
   var originalValue = $(this).data('originalValue');
   
   if(newValue != originalValue)
     options.onModified($(this).attr("id"), originalValue, newValue);
   
  });
 };
})(jQuery);

Get the full source on GitHub.

jQuery Autocomplete via TextArea

It is always desirable to prevent users from making typos.  One tool that is great at preventing this is the jQuery AutoComplete.  However, sometimes you want to drive it off of client entered data and not via a constant array or ajax call.  Let's look at an example where we populate the AutoComplete via an existing TextArea on the page.

The jQuery splits on newline and fills the autocomplete whenever the textarea changes:

$("#Choices").change(function () {    
    var choices = $(this).val().split('\n');    
    $("#DefaultChoice").autocomplete({        
        source: choices    
    });
});

And the supporting markup:

<div id="DivList" class="dataChoice">
    <label for="Choices">Choices:</label>
    <textarea cols="20" id="Choices" name="Choices" rows="2"></textarea>
    
    <label for="DefaultChoice">Default Choice:</label>
    <input id="DefaultChoice" name="DefaultChoice" type="text" value="" />
</div>

Get the full source on GitHub.

DynaBook

The iPad is an amazing device, but to envision it in 1972 is amazing... http://www.mprove.de/diplom/gui/Kay72a.pdf February 1, 2010

Rich Clients

I found the recent article “What's Ailing ASP.NET WEB Forms” by Rick Strahl to be very interesting.  I still agree that the ASP.NET server side has a strong advantage over alternate technologies, but the client needs to be richer.  Web Forms are too simple and people are not ready to fully except Silverlight (and the control set is not there yet).  Integrating a client side framework like ExtJS or jQuery seems like the best approach... for now.  November 30, 2007

The Pragmatic Programmer

I believe every level of developer will benefit from reading “The Pragmatic Programmer” by Andrew Hunt and David Thomas.  This book looks at the complete software life cycle and gives insightful tips at each stage.  By the end you will take pride in every line of code you write.  It is also full of useful design techniques such as tracer bullets.  A must read for every developer.  May 19, 200

Blog Update

This blog /* Code Comment */ is the continuation of "The Art of .NET".  A few posts that got a lot of hits have been transitioned forward, but most older content that became irrelevant has been purged.  Enjoy the updates....