jQuery adds a touch of eazy to admin screen

I really was not sure what to title this post so that's what I came up with. I have a friend who I do work for that has a pretty simple admin screen where he can update properties of an e commerce application I built for him. Recently he asked for an option to change the status of an order. This is fairly common in this type of application but what we did not want to do is present an order list, click on an order to view the details, update the order and then return back to the order screen. We decided it would be best if he could easily change the status right from the orders listing. This article will walk you through a couple things I found while creating this feature, hopefully it helps someone.

First let's look at our new admin screen. Here we have a list of orders and instead of displaying a status we are going to display the status as a pick list with the current status selected, nothing big going on here.

<select id="status-#orderId#" class="_status"> <option value="P" <cfif status EQ "P">selected</cfif>>Processed</option> <option value="D" <cfif status EQ "D">selected</cfif>>Declined</option> <option value="S" <cfif status EQ "S">selected</cfif>>Shipped</option> <option value="C" <cfif status EQ "C">selected</cfif>>Cancelled</option> </select> The thing to pay attention to here is what I am doing with the id of the select box. All status drop downs will have a class of status but the id will be unique for each one. During the output loop we will insert the order id so our status will be status-orderid. This will allow us to know what order is being changed.

[More]

jQuery Tools

I just came across one of the coolest new additions to the jQuery framework. jQuery tools is a collection of the most important user-interface components for today's websites. The great thing about the tools collection is that it weighs in a whooping 5.8KB. With all things jQuery it's incredible easy to use and it is a great addition to an already GREAT framework. I encourage you to check out the demo's because they are really great and it's pretty exciting to see them in action.

Google Ajax Libraries

I first learned about the Google Ajax Libraries about a month ago when I was reading through one of Hal Helms jQuery blog posts.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globaly available access to a growing list of the most popular, open source JavaScript libraries including:

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

What does this mean to you? Let's say your working on a project and you need the latest copy of jQuery or the jQuery UI. You could go out and download the latest versions of each and install them on your server or you could use use the Google Ajax Libraries. The other advantage is they are minified and gziped so the size is pretty small along with the fact that it may already be cached in you end users browser. Here is an easy way to include both in your application. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

I would love to hear others thoughts on this but here go mine. I don't like the idea of relying on this for production. Something about the thought of not having this on my server for production just gives me an uneasy feeling. I think for creating tutorials / demo's or even using this in development is a great idea and I am loving it. What do you guys think?

A lot of hard work has finally paid off

When 2009 started most people were working on setting those all important personal goals for the year. Let's face it, for most of us If your still following 1 a congratulations is in order. Here at STERIS we were starting the planning phase of what would become the new www.steris.com. If you don't know I was lucky enough to have joined this team back in October of 2008. I happy to announce that over the weekend we were able to launch the new corporate site. There is still plenty of work to do but I would like to walk you through a quick overview of the new compared to the old and give a quick run down of the new features. In the future I will post some more code specific features.

Here are a couple screen shots from the old site with it's counter part from the new site. The first is the home page and the second is the news page which is also an example of an inside page with sub navigation. 

[More]

jQuery Select Example

Now that I am working a lot more with jQuery I thought I would start posting little examples of why I enjoy using it so much. If you are looking for a full on beginner or selective tutorial you should head over to the tutorials section on the jQuery site, it is packed with great stuff. This first example is a short one but to me is the main reason I have been using jQuery so much lately. Just keep in mind when I am going through these examples that I am no JS expert so there may be better ways to accomplish the task at hand.

Everyone has dealt with a select box (drop down) at one point or another right? One thing I really hate about JS is how much code I have to write just to accomplish what should be a simple task. Here is the way I would of done it in the past. In our example we have a list of developers in a select menu. We explicitly set an onChange event handler (not a good practice more on that another time) that calls our onSelectChange method. The problem now is that you have to grab the element from the dom, find the selected index and write all this code to get the values and text. I just don't have fun writing this and you can probably see why. If there is a better way that is my fault and while this would work its just no fun for me.

<html> <head> <title>Select Example</title> <script> function onSelectChange(){ var dropdown = document.getElementById("developer"); var index = dropdown.selectedIndex; var ddVal = dropdown.options[index].value; var ddText = dropdown.options[index].text; if(ddVal != 0) { output = "You Selected " + ddText; } document.getElementById("output").innerHTML = output; } </script> </head> <body> <h3>Developers</h3> <select id="developer" onChange="onSelectChange();"> <option value="0">Select Developer</option> <option value="1">Todd Sharp</option> <option value="2">Brian Meloche</option> <option value="3">Ray Camden</option> <option value="4">Sean Corfield</option> <option value="5">Ben Nadel</option> <option value="6">Mark Drew</option> <option value="7">Rey Bango</option> <option value="8">Mark Mandel</option> <option value="9">Joe Rinehart</option> <option value="10">Dan Vega</option> </select> <br /><br / <div id="output"></div> </body> </html>

Now on to the fun part. The first thing we need to do is include the jquery library and create a ready function. We also have our list of developers and our goal is to write out what developer the user selects every time the selection changes.

<html> <head> <title>Select Example</title> <script type="text/javascript" src="js/jquery.js"></script> <script> $(document).ready(function(){ }); </script> </head> <body> <h3>Developers</h3> <select id="developer"> <option value="0">Select Developer</option> <option value="1">Todd Sharp</option> <option value="2">Brian Meloche</option> <option value="3">Ray Camden</option> <option value="4">Sean Corfield</option> <option value="5">Ben Nadel</option> <option value="6">Mark Drew</option> <option value="7">Rey Bango</option> <option value="8">Mark Mandel</option> <option value="9">Joe Rinehart</option> <option value="10">Dan Vega</option> </select> <br /><br /> <div id="output"></div></p><p></body> </html>
The first thing we need to do is to notify our application that the user changed their selection. To do that we can use a jquery change event. To use this event we must first have a jquery object. This is really where the beauty of the code lies, almost everything is returned as a jQuery object. By selecting our developer select we simply attach an event and pass in the name of the function we would like to call when the event occurs.
<script> $(document).ready(function(){ $("#developer").change(onSelectChange); }); </script>
Now we can write our method that handles the actual logic of our application. Remember all that code we wrote earlier, it was ugly right? This to me is a better approach, first you can get the selected option using the option:selected selector. This will return to us a jQuery object and we can get what we need by using the val() and text() attributes. The html() method in this case sets the contents of an element. <script> $(document).ready(function(){ $("#developer").change(onSelectChange); }); function onSelectChange(){ var selected = $("#developer option:selected"); var output = ""; if(selected.val() != 0){ output = "You Selected " + selected.text(); } $("#output").html(output); } </script>

There is a link below for a live demo of this. This was just a quick example of why I enjoy using jQuery. The code is clean and I am never guessing what some method returned to me (object/string/date) because I will almost always get back a jQuery object. If you have any questions about this example let me know and for you more advanced users I got some good stuff in the pipe so stay tuned.

Select Demo