Evan J Palmer's Blog

A blog about learning (code, improv, film and, anything else).

Month: September, 2013

Referencing MVC Actions in Javascript

live-free-or-die-hard-poster

How do you access an MVC endpoint from some Javascript code?

One way to do it would be to just manually resolve the URL of your endpoint and hardcode it:

var url = '/Home/GetFeeForOrder';
// perform a get on this URL

I don’t like this too much. Mainly because string literals like that scare me. I mean, things change and it makes leaning on the IDE tools to find references much harder.

I use a different pattern in which I let the Framework resolve the path and put it in a data attribute. I then access the data attribute from the JS file. For example:

View:


<div id="order" data-fee-url="@Url.Action("GetFeeForOrder", "Home")">

</div>

Javascript file:

var url = $('#order').data().feeUrl;
// perform a get on this URL

I think this is nicer, as we no longer have the magic string. It also means that any route changes will automatically work and when I use visual studio to find all references, I’ll get more accurate results. It also cuts down on any human error when writing URL – granted, that’s something that would be evident quite quickly.

I’ve been told this method is convoluted, and I do admit, it’s is a little more time consuming than just writing the URL, but think this is outweighed by the benefits.

Advertisements

Jump to the top of outer frame, from inner frame

542189_orig

I have a long-ish form on my site. When you submit this form a validation message appears at the top of the screen and the page is scrolled up – I’m not particularly fond of this UX, but that’s how it is unfortunately.

Now, this works well on the site, but when I embed this in Facebook, inside an iFrame, it no longer scrolls. That’s becuase the inner frame is already set to 100% (so there’s no way to scroll the frame, and we don’t have access to the outer frame, or window.document, because that’s controlled by Facebook.

So how can I make it scroll to the top in this case?

I ended up just usign javascript to focus on a div that I placed at the top of the page. I’m aware this is a hack, but it really helps the UX when using Facebook, so i think it’s warranted.

Here’s code:


function jumpToTopOfIframe() {<
var facebookTop = document.getElementById('facebooktop');
if (facebookTop != null) {
    facebookTop.style.display='block';
    facebookTop.text = '.';
    facebookTop.focus();
    facebookTop.text = '';
    facebookTop.style.display='none';
  }
}

And the mark up:


<div tabindex="0" id="facebooktop" name="facebooktop"><!-- This is here so we can jump to the top of the frame when loaded in facebook. It needs to be visible (not display: none). --></div>

What’s going on:

I’ve put a div at the top of the page that I want to target and given it an Id so I can access to it, and a tab index so the browser is able to focus on it (a tab index of zero means the browser can work it out). Now, I don’t want the div visible, but I can’t put a dispay: none on it, because the browser won’t let us focus on a div with no display. Likewise it needs some text it in. So in the javascript, I show the frame and add some text, now I can focus on it. I then remove the inner text and hide it so it doesn’t screw with the layout.

And that’s it.

Hacky? Yes. But it works.

…I should get that last line printed onto a t-shirt.

It’s cool for dudes to wear make up…. right?

kiss

So we recently shot a short film with lots of close ups.

It’s funny, the close ups aren’t that much closer than a view you might get of your friend when you’re talking, but for some reason on film, every imperfection in the actors skin is suddenly noticeable – maybe even amplified.

This might be because of the lighting? Or maybe just how your brain registers the actors face on film. Or maybe just because as an editor I’ve looked at it so much that I notice more stuff?

It’s cool – it can kind of be fixed in post with some soft filters or color grading (depending on the type of imperfection), but I think it’s a good idea to use a little make up if planning lots of close ups.

I’ll be trying it for a future shoot.

Convert a date in the format DD-MMM-YYYY in JavaScript in IE

primer-2004-time-travel

So when I’m developing, I use Chrome. (Who doesn’t?)

Eventually I test in IE and fix whatever I find.

Today I found that IE doesn’t parse dates in the format dd-mmm-yyyy.

Try it:


new Date('12-Aug-2012')

I searched around for a standard solution to this, and couldn’t find one. I find this really surprising considering it’s not an uncommon date format.

So I just knocked one up myself based on this stack overflow response:

http://stackoverflow.com/questions/16449934/is-there-a-way-to-shim-the-dd-mon-yyyy-date-format-for-ie/16530920#16530920


var customDateDdMmmYyyy = function (dateString) {
 var dateParts = dateString.split(/-/);
 return new Date((dateParts[2] * 1), ($.inArray(dateParts[1].toUpperCase(), ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]) * 1), dateParts[0] * 1);
 };

My answer is different to the stack overflow for a couple of reasons:

1) I’ve changed the code to return a new date object
2) I’m not dealing with a datatable
3) I chose not to use modernizr, and just always call my custom date function

I hope someone finds this useful, but because I feel like there must be a better, more standard solution than this.

Sadly, I couldn’t find it.