Since that find-as-you-type thing was kind of fun, I decided to implement another little "nice to have" for the client in jQuery. This time it's a simple piece of functionality which obscures form elements and requires an extra explicit step from the user before being able to edit data. The requirement was that users need to confirm what they're doing to avoid accidental edits. Some people were suggesting that we put check-boxes next to elements that the user needs to click to confirm the edit, etc. But I thought of something that seemed a little more elegant.
The idea was simple. For each input element on the form we just want to hide the input and replace it with a text label which shows the data, but isn't an input element. Then we add a button or link that the user needs to click in order to make the form editable.
It also occurred to me that this didn't require any server-side code changes at all. None. It's just JavaScript and HTML manipulation, after all. The ASP.NET code shouldn't even know that anything's happening. It just needs to track its own controls and that's it.
Given that this was as simple to implement as the find-as-you-type thing, I figured I'd take some extra time and abstract this out into a proper jQuery plugin. It's only needed on one page for now, but it can easily be needed on other pages (and likely will be) in the client's site. So I might as well make it portable.
Thus, FormGuard was born. I know I'm just starting small, but man I love JavaScript. And the fact that I'm just starting small is even more exciting because it means there's so much more to do.
Ha, I actually had to write something like this a week ago but I was using Backbone.js and did it as a simple View I would swap in that handled the update or canceling of the element. The user interaction was you click on the text and it swapped in a text box. You hit enter it updated, esc or losing focus canceled.
ReplyDeleteYour working a different level but it looks pretty cool.
Mine isn't particularly advanced mostly because it had to work on the existing infrastructure for this particular client. And that infrastructure is a horrid mess to say the least. Models, binding, etc. all sound high-risk here. But simple (and understandable by their other developers) jQuery hiding/showing is another story.
ReplyDeleteI'll definitely have to give Backbone.js a serious try one of these days. Lately my work has focused more on documenting things and running meetings, so just small outlets into enjoyable development are like a little oasis of fun for me. But supposedly in the coming weeks the client will get us back into real development, otherwise I might roll off the project in favor of a better matching resource so I can go be useful elsewhere.