Uom-Js

I’ve used the JavaScript DataTables plug-in for jQuery a lot. It’s great for easily adding sorting to tables and lots more. It works nicely with Bootstrap too. The clunkiest thing I’ve found is trying to sort columns that contain date / time information. In the past, I used the datetables-date-sort.js plugin, which allows you to specify for each column what the data type is e.g. <script type="text/javascript"> $(document).ready(function () { $("#myTable").dataTable({ "aLengthMenu": \[\[10, 25, 50, -1\], \[10, 25, 50, "All"\]\], "iDisplayLength": -1, "aoColumnDefs": \[ { "bSortable": false, "aTargets": \[0\] }, { "asSorting": \["asc", "desc"\], "aTargets": \[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\] }, { "sType": "uk-date-time", "aTargets": \[8,10\] } \] }); }); </script> That’s nice and flexible but you have to specify it for each table and, worse still, you have to (remember to) change it each time you add/remove/reorder columns. ...

In this case the value selector is used like this: $(“.pPlacement select option\[value='” + PlacementId + “‘\]”).attr(‘selected’, true); When PlacementId changes from a number to text and that text then contains an apostrophe, then it breaks! To explain the code above, thee’s a dropdown list of placements and from somewhere we have the value of the one that we want to have as the selected option. The selector picks the option with the value equal to PlacementId and selects it. ...

If your page contains an iframe and you need to dynamically add a stylesheet, you can do it like this: var $head = $(“#myIframe”).contents().find(“head”); $head.append($(“<link/>”, { rel: “stylesheet”, href: window.location.protocol + “//” + window.location.host + “/mystyles/mystylesheet.css”, type: “text/css” })); Even if the domain for the stylesheet is the same as the parent page and the iframe, you still need to include the host address of the stylesheet (the protocol and host bit) or IE will ignore it. from http://stackoverflow.com/questions/6960406/add-css-to-iframe and http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

In a previous post I showed how you could set attributes on properties in an MVC model so that a text field would be edited with a multi-line HTML text box, instead of a single line input field. What if the you text you’re editing is HTML and you want to use an HTML editor? In the edit razor view, you could set some HTML attributes (e.g. CSS class) on the @Html.EditorFor() but you would have to do that on every view where you edit the field, and on every field that you want to use an HTML editor for. So this shows how to add an attribute to a property so that, wherever the property is edited, the HTML editor will be used. ...

Reading to do relating to frameworks for Rich Internet Applications… Visual Studio 2013 bundles Knockout.js, which looks fairly straightforward (I hope) Postal could be a better way of handling the events https://github.com/postaljs/postal.js Need to make sure our applications are accessible: http://stackoverflow.com/questions/7370056/accessibility-and-all-these-javascript-frameworks With Knockout, you can pass the server side model to the client like this: <script> ko.applyBindings(@Html.ToJSON(Model)); </script> Comparison of frameworks http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/ Yet more from the developers at Twitter http://twitter.github.io/hogan.js/. This is a compiler for {{mustache}}, which is a templating language that can convert JSON to HTML in a similar way to Razor converting entities to HTML in ASP.Net. Useful if you want to say generate whole data grids on the client. If your server is getting JSON from elsewhere and you want to template it into HTML, you can use mustache templates on the server (rather than client) using https://github.com/jdiamond/Nustache ...