Hugoware

The product of a web developer with a little too much caffeine

jQuery Magic – Why I Love Enclosures

with 15 comments

One thing that I’ve learned I really love in programming is enclosures. I’m amazed that someone, somewhere had the brain power to design something that has some much potential to fail.

In a recent web application I was working on I had to come up with a login screen with a standard username and password. I wanted it to be a user friendly as possible since I knew a large variety of users would be accessing this screen. There isn’t much you can do about a login form – it’s two text fields and a button.

However, if you’ve ever noticed in Vista, there are some password fields that have a check box that let you see what is in the field. It’s handy when you don’t have prying eyes around you or trying to help Grandma enter a password. That seems like it might be handy!

 

Web Based Password Display

 

I wanted to have something similar for the web app I was working on, and with some jQuery magic and those loveable enclosures, it was possible with a single chained command.

$("input[type=password]")
  .each(function(index,input) {
    input = $(input);
    $('<div/>')
      .append(
        $("<input type='checkbox' />")
          .attr("id", ("check_"+index))
          .click(function() {
            var change = $(this).is(":checked") ? "text" : "password";
            var rep = $("<input type='" + change + "' />")
              .attr("id", input.attr("id"))
              .attr("name", input.attr("name"))
              .val(input.val())
              .insertBefore(input);
            input.remove();
            input = rep;
          })
        )
        .append(
          $("<label/>")
            .attr("for", ("check_"+index))
            .text("Show contents of the password box.")
        )
        .insertAfter(input);
      });  

The jQuery worked great. Now, when the fields toggle back and forth between text and password the form will still contain all the information required to postback your information.

You’ll notice that the input variable is assigned to each time the click is handled, overwriting the previous value all while updating for the new value… Javascript designers, wherever you are, simply amazing!

I know that quite a few people are against long jQuery commands, and I agree that readability comes before all else (since we write code for human eyes, not the computer). But there is a certain satisfaction in being able to use the magic of enclosures to cram everything you need into a single jQuery command. This code can be dropped into a page and all the work is done.

In any case, I don’t advocate doing this with all your code, but it is a good exercise in the power of enclosures to see what you can built with a single chained jQuery command.

Advertisements

Written by hugoware

May 6, 2009 at 2:22 am

15 Responses

Subscribe to comments with RSS.

  1. jQuery Magic – Why I Love Enclosures « Yet Another WebDev Blog…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

    DotNetShoutout

    May 6, 2009 at 12:40 pm

  2. Nice post.

    Jenny

    May 7, 2009 at 2:29 pm

  3. nice one .. keep it up …

    saurabh shah

    May 7, 2009 at 4:07 pm

  4. I’d be worried if you could do this with one (long) line of jquery..

    $(‘#checkbox’).toggle(
    function(){ $(‘#input’).attr(‘type’) = ‘password’}),
    function(){ $(‘#input’).attr(‘type’) = ‘text’})
    );

    Mark

    May 8, 2009 at 12:56 am

    • Unfortunately, you can’t change the type on an INPUT tag which is why a slightly more complex bit of jQuery was required. Something about the page security rules will prevent it (as in throw and exception).

      Strangely enough, it doesn’t prevent you from reading a password field… 🙂

      hboss

      May 8, 2009 at 1:07 am

      • too good to be true.. It is actually ie thats the issue. Firefox will let you change the type of an input no problem…

        Mark

        May 8, 2009 at 1:29 am

      • Oh, excellent – thanks for the info

        hboss

        May 8, 2009 at 2:13 am

  5. […] jQuery Magic – Why I Love Enclosures « Yet Another WebDev Blog Cool jQuery show password function […]

  6. Great post……and you did a great job. The post is well written and thanks for the info.

    Web Design Quote

    May 8, 2009 at 7:52 am

  7. Great post, very interesting, i have been searching for something like this.. to bad there is no demo of the login screen above. Could u supply us with and demo download or demo page?

    Martin Hagedoorn

    June 19, 2009 at 11:13 am

  8. […] Check out my previous post for more jQuery magic? […]

  9. […] may have read some of my earlier jQuery posts about mimicking Vista style password boxes or creating search highlighting for web pages and noticed that it doesn’t take that much code […]

  10. […] nochmal nicht so trivial wie es sich anhört. Was mit ein Grund sein mag, warum ich viel schönes gesehen habe, bei dem aber die zentrale Grundfrage nur halbherzig gelöst wurde. jQuery bietet sich ja […]

  11. […] but has one slight modification — all the methods are overridden and placed into a queue (man, I love enclosures). Once our AJAX call has completed we run an update command that executes everything we have saved […]

  12. Perfect!

    Rafael Clares

    April 7, 2011 at 12:58 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: