Making the Wijmo Drop Down Listen

Wijmo is a awesome HTML/JavaScript toolkit that provides styled widgets for any website or web application. They provide great integration with the equally brilliant KnockoutJs.

I was using the Wijmo drop down control, but I found that there was something a bit strange: the control does not update it’s value when the observable changes its value. The control is actually a very thin wrapper for Knockout’s default binding for the <select> element. Knockout listens to the element’s updates and can update the element from the observable, but Wijmo does neither: it only can update the HTML that control is bound to. Thus, the value on the control is never updated at all; the observable’s value is updated because the widget updates the HTML and then Knockout updates the observable as it listens to the HTML.

This posed a problem as I would have to manually listen to the observable and then update the widget, this is boring and I should not have to do it. So I wrote a wrapper for it and extended the wijdropdown binding:

(function () {
    // override the wijdropdown to update the drop down display label when the selection changes
    var proxied = ko.bindingHandlers.wijdropdown.init;
    ko.bindingHandlers.wijdropdown.init = 
        function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var options = allBindingsAccessor();
        var value = options.value;

        // subscribe to the changes and update
        if (ko.isObservable(value)) {
            value.subscribe(function () {
                $(element).wijdropdown("refresh");
            });
        }

        // continue as normal
        return proxied.apply(this, arguments);
    };
})();

The original code would have required me to listen to each observable with this code:

myObservable.subscribe(function () {
    $("#selectElement").wijdropdown("refresh");
});

But the extension does away with this and I can simply bind to the element:

<select data-bind="value: pageSize, wijdropdown: {}">

The reason that there is a “double” binding is that the default Knockout binding is sufficient to work the drop down, and the wijdropdown just adds the styling.

Changing Bing Stylesheets

I have never liked Bing’s results page style, it is a decided lack of coloring – or anything for that matter. So, using Google Chrome I tweaked the stylesheet.

Here is the before:

 

Here is the after:

 

And all it took was a little CSS:

#sw_hdr {
    border-bottom: #6190FF 1px solid;
    padding-bottom: 12px;
    background: #DBE6FF;
}
#id_h {
    height: 75px;
    background: #DBE6FF;
}
.sw_bd {
    background: #FFF;
}
.sb_form_go {
    background: #DBE6FF;
    height: 25px;
}
.sb_ph .sb_count {
    color: #777;
}
.sw_logo {
    background-image: url('http://www.logostage.com/logos/bing.png');
    background-color: #DBE6FF;
    background-size: 75px 26px;
}

It is just a tiny splash of colour and everything looks better. I use the different image because I wanted the transparency. Maybe Microsoft will change it a bit and then we can all celebrate by doing a few extra searches – maybe even click on some ads?

JavaScript Ajax & ASP.NET WebAPI

Recently I was working on a HTML/JavaScript web application and I was having one of those moments where everything was working fine except for one small thing: the server always seemed to receive NULL.

I tried the usual check-for-null-before-sending, but this was not the problem. Maybe it was breaking in the jQuery Ajax call? Is that even possible? 🙂 Everything was perfect, including when checking the request data with Internet Explorer’s Network Traffic Capturing Developer Tool. It was sending the data across. The JSON was valid and everything.

I decided it was the server. It was a basic ASP.NET WebAPI. All the GETs were working so why was the POST failing? I checked the ApiController’s http context request content. That was correct. The only thing that was wrong was the method’s object parameter value being NULL.

So what was it? The client was sending the right data and the server was receiving it, but the object was NULL.

Here is the JavaScript code:

$.ajax({
    url: '/api/ingredient',
    type: 'POST',
    data: JSON.stringify(ingredient),
    contentType: 'json',
    success: function() { ... },
    error: function() { ... }
});

That was perfect. Now on the server:

public class IngredientController : ApiController
{
    public void Post(IngredientDto ingredient)
    {
        // it failed here as &quot;ingredient&quot; was NULL
    }
}

After searching for some time and trying all sorts of things, I finally found where I went wrong. Now, we all know Microsoft for not being very standards compliant, I mean look at Internet Explorer before version 9, it was pretty glum times. But the problem lay with Microsoft being too standards compliant. The problem lay in the small string, “json”: it is not the right string. Of course if this was a strongly typed language, an enum based action, this would have never have happened. (Look out for my upcoming post on Type Safety)

The informal standard according to Internet Assigned Numbers Authority‘s (IANA) media types and The Internet Engineering Task Force‘s (IETF) RFC4627:

The official MIME type for JSON text is “application/json”.

Wow. What a waste of time. And of course, as soon as I changed the Ajax type from “json” to “application/json” everything JustWorked™.
So the new code is:

$.ajax({
    url: '/api/ingredient',
    type: 'POST',
    data: JSON.stringify(ingredient),
    contentType: 'application/json',
    success: function() { ... },
    error: function() { ... }
});

I hope this helps someone to avoid what I was doing: wasting time. But I did learn a few other things along the way, all was not lost.