Fun with jQuery and HTML5 data-* attributes
Warning
Yesterday I worked on a small Rails project for which I needed to implement custom orderable table rows through the use of ranked-model and some jQuery-UI magic. Found a helpful tutorial on how to do that, made some minor changes (use PUT to update an already existing table) and expected it to work fine.
Oh boy.
Why does it post to the wrong URL?
Turns out that jQuery – in order to comply with the W3C HTML5 Specification – changed their treatment of dashes in HTML5 data-* attributes in such a way that you need to camelCase the variable names at every dash in your data-attribute (source).
So data-update-url from the tutorial must be accessed through $(this).data("updateUrl").
Cost me some time to figure out as I suspected Rails at first to be the cause of the problem, but triple-checking my routes and controllers proved otherwise.
Now it works like a charm! Thanks to Ben for that nice write-up!
$foo = new BlarghInterface();