I actually already posted about this very same thing before. But I’m trying to allow myself to be a little more expressive and descriptive in my posts, so consider this a makeover. Thanks:

Ok so maybe the title to this post is a little harsh. But I only say it because I love JSON and jQuery so much. With a simple $.post() and an ASP.NET MVC service things just work. Things except of course for those @#! dates.

If you haven’t experience this. JSON notation looks a lot like JavaScript, it’s super simple, it make XML look like a math problem at MIT.

XML: <Person><Name>John Doe</Name><Age>45</Age></Person>

JSON: { "Name": "John Doe", "Age": 45 }

That’s great and best of all it just works. If you do a post and the service returns JSON the post will return an object.

var test = { "Name": "John Doe", "Age": 45 };

$.post("MyService", function (person) {
    alert("Hello " + person.Name);
});

Beautiful, just beautiful. The string is a string. The number is a number. And the date is a… string? Yep it’s a string in the format "/Date(23947298342)/". Now there are whole bunch of reasons why that is, but at the end of the day I just wanted a date object.

So what’s a guy to do? Create a library of course! I attached it to this email.

Just include jquery.DateTime.js right after you include jQuery. Should look something like this:

<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.DateTime.js" type="text/javascript"></script>

Here’s how it works: Turns out jQuery has a collection of ‘converters’ that it uses depending on the kind of data it’s trying to parse. So I simply replaced the default converter for JSON with my own.

The default converter just called $.parseJSON() and so does mine with one difference, in mine after I parse it into an object I use reflection to enumerate through all the properties of the object generated by $parseJSON() whenever it finds a string matching the date format it converts it into a JavaScript date.

The conversion itself is actually very simple just parse out the number in the string and pass it as the parameter to new Date().

Now that what you get is an actual date you can perform all the regular JavaScript date operations. And you can dynamically format the date however you like using libraries like Steven Levithan’s dateFormat() which you can find here:

http://blog.stevenlevithan.com/archives/date-time-format

P.S. Note the issue wasn’t really JavaScript it’s actually ASP.NET “issue”. There are other ways to solve it including setting up something on the server that generates the “correct” JSON to begin with. I wanted to create a drop in solution which is why I went with this approach.

jquery.DateTime.js

When you get a jQuery object for an iframe the html() and other methods might not function as you would expect them. That is because what you really want is the jQuery object for the ‘document’ of the iframe. How you get the document object depends on the browser.

To simplify things I created a jQuery plugin that allows you to call iframe() instead of jQuery’s $() or find() and returns a jQuery object that should behave the way you expect.

So instead of this which wouldn’t work

$("#MyIframe").html("new HTML");

You would do this:

$.iframe("#MyIframe").html("new HTML");

And instead of this which wouldn’t work:

$("div").find("#MyIframe").html("new HTML");

You would do this:

$("div").iframe("#MyIframe").html("new HTML");

You can download it here: jquery.iframe.js

Just include it after you include jQuery.

I currently use ASP.NET MVC for development on the server side and jQuery and assorted libraries on the client side. One annoying issue that keeps coming up because I keep forgetting about it is dates.

When the server returns JSON it encodes dates as a string, something like /Date(16847928349)/ when I would like to have it as a JavaScript date.

There are several solutions offered when I Googled it. On the client side the solution was mostly to parse it using some other kind of JSON parser like JSON2, or using a regular expression.

But I didn’t want to liter my client code conversion code every time I used a date. I want it to be automatic. So I decided to created a script that did what I wanted. It might be less efficient than parsing dates as needed, but it works seamlessly.

It works by replacing jQuery’s built in converter. Identifying dates using a regular expression and converting them. It does that by first using jQuery.parseJSON() then using JavaScript reflection to enumerate through arrays and properties.

When it finds a string it checks if it matches the ASP.NET MVC date format, if it does it converts it to a date.

To just just include the js file after including jquery.

Download jquery.DateTime.js

Knockout is awesome. I love the view model pattern and I think knockout does a great job of bringing that to JavaScript.

There was one thing thought that I wanted to change. To me it felt like I had to write too much code for simple bindings that sometimes made it hard to tell what was going on. So I decided to create an extension that allows you to use a much more succinct syntax.

Instead of writing something like this:

<span data-bind="text:FirstName"></span><span data-bind="text:LastName"></span>

You can instead write:

{{FirstName}} {{LastName}}

I published the project on GitHub for anyone who’s interested: knockout.curly.js

Update 5/12/2013

Yesterday I wanted to embed HTML through knockout. I grew fond of this curly syntax but the curly syntax uses knockout’s text: binding which encodes string, so it can’t be used to embed HTML. What I needed was the html: binding.

I wanted to use the curly syntax but I didn’t want to start creating a new template language with yet a new syntax to learn. I also wanted the previous syntax to still work. So I finally decided to just allow regular knockout syntax. So now you can embed HTML like this:

{{html:Message}}

More than that you can use any knockout binding syntax if you really wanted to. For example:

{{html:Message, click:ClickHandler}}

I use notepad all the time, sometimes I just wanted to add one little feature, but it’s not extendable so I can’t. If I could just get my hands on the source code and if that source code was in C# I’d be set. So I decided to write a clone so I can do just that, and share it so that others could as well.

I attempted to make an exact clone and I think I did pretty good with three exceptions. One I decided I wanted a different icon so I can tell it apart from the actual notepad. Two, the real notepad has header and footer information as part of the page setup. I didn’t know how to do that since the page setup dialog is a system dialog. And three I didn’t try to duplicate the windows notepad help file.

As you can see from the screenshot it includes the following features:

• File
  • New
  • Open
  • Save
  • Save As
  • Page Setup
  • Header & Footer (you can use variables to include filename, date, and other information)
  • Print
  • Exit
• Edit
  • – Undo
  • – Cut
  • – Copy
  • – Paste
  • – Delete
  • – Find
    • Find next
    • Direction up/down
    • Match case
  • – Find Next
  • – Replace
    • Find next
    • Replace
    • Replace all
    • Match case
  •  Go To (a specific line number)
  •  Select All
  •  Time/Date (inserts the date and time e.g 9:18 PM 2/11/2014)
  • insert (e.g 9:18 PM 2/11/2014)
• Format
  • Word Wrap
  • Font
• View
  • Status bar (displays the line number and column number)
• Help
  • View Help (you will have to provide your own documentation)
  • About Notepad Clone

Download Notepad Clone .NET Binary (exe)

You can get the source code at GitHub:

https://github.com/luisperezphd/NotepadClone

If you would like to be notified of future posts subscribe to my mailing list using the widget on the bottom.