I just spent a couple of hours debugging a Jquery call to a WCF Service and luckily stumbled on a solution. I though I’d share it with the universe.

Here is the basic setup that was causing issues.

The WCF Service

	public class JsonResponse {

		public bool Success { get; set; }

		public string ErrorMessage { get; set; }
	}

	[ServiceContract(Namespace="FooBar.Services")]
	public interface IServices
	{

		[OperationContract]
		[WebInvoke(Method = "POST",
			UriTemplate = "/FooBar",
			BodyStyle = WebMessageBodyStyle.Wrapped,
			RequestFormat=WebMessageFormat.Json,
			ResponseFormat=WebMessageFormat.Json)]
		JsonResponse FooBar(string foo, string bar);
	}

Calling the Service with the following Ajax call

var data = {
		"foo" : "bar",
		"bar" : "foo"
};

$.ajax({
	type : "POST",
	url : "/Services/Services.svc/FooBar",
	contentType: "application/json",
	data : data,
	success : function(data){
				if(data.success){
                                  alert('BAM');
                     }
	},
	dataType : "json"
});

Returns this error

The server encountered an error processing the request. The exception message is ‘OperationFormatter encountered an invalid Message body. Expected to find an attribute with name ‘type’ and value ‘object’. Found value ‘boolean’.’. See server logs for more details. The exception stack trace is:

The solution.

Luckily it’s pointing to the Json Serializer not being able to deserialize the request. After looking closely at multiple examples on the web something jumped at me. Examples seem to pass and textual representation of the object and not the Json object itself. What the ajax call does for you here is depending on the “type” option, “POST”, “GET” etc…, it will convert the data (json format) option to a foo=bar&bar=foo format and add it to the appropriate output. If you use POST it will put it the the body of the request. If you use GET it will put it in the querystring.

In order to fix this I need to pass the data as a stringified version of the json object. At that point the ajax call will not convert when adding to the body of the request.

This is the new javascript that works

var data = {
		"foo" : "bar",
		"bar" : "foo"
};
$.ajax({
	type : "POST",
	url : "/Services/Services.svc/FooBar",
	contentType: "application/json",
	data : JSON.stringify(data),
	success : function(data){
				if(data.success){
                                  alert('BAM');
                     }
	},
	dataType : "json"
});

I used the JSON library found here
Hopefully this will save someone out there some time when debugging this issue. I’m quite certain it’s happened to someone out there.

S.

I ran into this recently and I though I would share it with you. This animation is made possible by the use of JQuery and CSS. I’m quite impressed at what they were able to do. It is relatively easy if you compare to earlier Javascript techniques.

S.

Here’s a quick step by step tutorial to create a Twitter style Flash message using css and javascript.

The CSS
I’m using the blueprint css which can be found here

.notification
{
    text-align: center;
    display: none;
    width: 100%;
    position: fixed;
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
    font-weight: bold;
    font-size: 1.2em;
    overflow: visible;
}

Add the following html somewhere before the Body closing tag.

<div id="notification" class="notification">
	<span id="notification-text"></span>
</div>

And the javascript:
As you can probably tell we are using the JQuery library. We wanted the flash message to show up for a decent amount of time after witch it would go away. Luckily JQuery has the fadeIn and fadeOut animation methods. To make it more JQuery like we added a callback function. This callback will be invoked once the Flashmessage has completed it’s fadeOut.

//Provide a variable to hold the callback function
var notifyCallBack;

function showNotification(message, type, callback) {

    notifyCallBack = callback;

    var notification = $("#notification");
    notification.removeClass("success notice error");
    notification.addClass(type);

    //Make sure it's visible even when top of the page not visible
    notification.css("top", $(window).scrollTop());
    notification.css("width", $(document).width());

    $("#notification-text").html(message);

    //show the notification
    notification.slideDown("slow", function() {
        setTimeout(hideNotification,
            4000 // 4 seconds
            )
    });
}

function hideNotification() {
    $("#notification").slideUp("slow", function() {
        if (null != notifyCallBack && (typeof notifyCallBack == "function")) {
            notifyCallBack();
        }
        //reset the callback variable
        notifyCallBack = null
    });
}

Here’s a typical scenario where the showNotification would be usefull

$(form).ajaxSubmit({
		success: function(data) {
			if (true == data.isSuccessful){
				showNotification(data.FlashMessage, "success", function(){
					//do something
				});
			}
			else{
				showNotification(data.ErrorMessage, "error", function(){
					//display errors
				});
			}
		},
		dataType: "json"
	});