A Popup Form Deconstructed

Looking at the JavaScript code from "A Popup Form", there are really only two things going on in this function. The first is that we build this huge string named s. The second thing is that we inject that HTML into the document using jQuery:

$("body").append(s);

This causes the form to pop up. But the fun stuff is really happening within that HTML string named s. So let's take a look at its parts and see what they do.

First thing to mention is that this piece of code breaks one of my favorite best practices--keeping content (HTML), display (CSS) and behavior (JavaScript) in distinct files. It's a trade-off. The idea behind this example is that we have a very small form that we might want to use in several places in the application. By having it all included in a single JavaScript file, we can easily leverage it wherever we want. Anyway, back to the code.

There are three sections of code inside s: the CSS, the HTML, and the JavaScript. We'll look at each individually, starting with the CSS.

<style>
  #formDiv {
   position: absolute;
   top: 100px;
   left: 100px;
   background-color: #D9E8D7;
   color: #33532F;
   border: 1px solid #33532F;
   padding: 12px 6px 0px 6px;
   font-family: Tahoma, Helvetica, sans-serif;
   font-size: 9pt;
   text-align: center;
  }
</style>

This is just plain old CSS to position, size, and color the popup the way we want it. One important thing to note is the use of position: absolute. Since this div is being injected a the end of the content of the body element, it's reasonably safe to position it absolutely (i.e., from the body element's upper left corner).

The we have the HTML section of the code:

<div id="formDiv">
  <strong>New Employee</strong><br /><br />
  <form name="newEmployeeForm" id="newEmployeeForm" method="post">
  First Name: <input id="firstName" name="firstName" type="text" /><br />
  Last Name: <input id="lastName" name="lastName" type="text" /><br />
  <input type="submit" name="btnSave" id="btnSave" value="Save">
  <input type="button" name="btnCancel" id="btnCancel" value="Cancel">
  </form>
</div>

Again, nothing fancy here--just basic HTML to display the popup's title, text inputs for firstName and lastName, and buttons for Save and Cancel. Notice, though, the use of id attributes for all the inputs and the popup's div. These are critical for the next part--the JavaScript.

<script type="text/javascript">
  formInfo = "";

We start by setting the formInfo variable to an empty string. This just makes sure we're not carrying around extra information by chance.

  $("#btnCancel").click(function(){
    returnResponse("Cancelled");
  });

Now we set the button whose id is btnCancel to call the returnResponse() function when clicked. It includes the string "Cancelled" as an argument to the function.

  $("#newEmployeeForm").submit(function(){
    formInfo = new Object;
    formInfo.firstName = $("#firstName").val();
    formInfo.lastName = $("#lastName").val();
    returnResponse(formInfo);
  });

Now we assign some behavior to the form itself (id is newEmployeeForm). When the form is submitted, we create a new Object and save it with the name formInfo. Then we fetch the values from the firstName and lastName fields and store them to properties of the formInfo object. Notice we're taking advantage of id attributes again--one of jQuery's strong suits. Finally, we call the returnResponse() function, this time with the variable formInfo as its argument.

  function returnResponse(fI){
    $("#formDiv").remove();
    ' + callbackFunc + '(fI);
  }
</script>

The last part is the definition for that returnResponse() function. All it does is remove the formDiv (the popup) from the DOM, and then do something with a variable called callbackFunc. Let's take a closer look at that.

Remember this is all in the context of building that string variable called s. So that line with the callbackFunc variable is really building some text that uses a value stored in the callbackFunc variable. Looking back at the top of the code, the function signature for showPopup() specifies an argument called callbackFunc:

function showPopup(callbackFunc) {

This is where we get that value. In the calling page, the showPopup() function is called with an argument of 'processData'. So the script is actually building a line that looks like this:

processData(fI);

This is how the script triggers the callback function. Of course, the fI variable is just passing along what was passed into the returnResponse function--either the string "Cancelled" in one case, or the object formInfo in the other.

That's it. The callback function can now deal with the response data in any way it wants. In this example, we're just plugging the values into a string and displaying an alert box to show how it works. In an application, we might be doing something like plugging the new values into a list, etc.

Have fun!