Make Dijit’s FilteringSelect Widget Display an Empty Option Value Label

By  on  

I was recently working with the FilteringSelect Dojo Dijit widget and realized that when the first OPTION in the SELECT widget had a label with an empty value (like "Choose one..." or "Select you state"), the label wasn't displaying.  That's no good!  What I did was monkey patch the widget's prototype to make sure that label was displaying when it was loaded.

The Dojo JavaScript

/* Modify ComboBox and FilteringSelect to use default label if value is "" */
(function(){
    var oldPMIP = dijit.form.FilteringSelect.prototype.postMixInProperties;
    dijit.form.FilteringSelect.prototype.postMixInProperties = function(){
        if(!this.store && this.srcNodeRef.value == ''){
            var srcNodeRef = this.srcNodeRef, nodes = dojo.query("> option[value='']", srcNodeRef);
            if(nodes.length){
                this.displayedValue = dojo.trim(nodes[0].innerHTML);
            }
        }
        oldPMIP.apply(this,arguments);
    };
})();

Like my previous monkey patching tutorial, we're essentially modifying the prototype of the Dojo Dijit (FilteringSelect, in this case) we'd like to act differently.  In this case, however, we're going to "save" the original prototype so that we may trigger its original functionality after we change a few settings first.  In this case, we want to ensure that the displayedValue of the FilteringSelect is the blank option's label.  After all, empty first labels are ugly, right?

Prototype modification is super useful, isn't it?  Now every FilteringSelect will be fixed by changing this one method on the prototype.  Hmmm...prototype modification sounds very familiar to me....

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

  • By
    Retrieve Your Gmail Emails Using PHP and IMAP

    Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Just for fun, I'll be using the MooTools Fx.Accordion plugin...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!