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.

Now we are ready to rock and roll. The first thing we need to do is to add a change handler for all status drop down box. This reason we are using the class is so we can register a change listener on all status drop downs. It would not make much sense to create a listener for every single one. To get the order id we are using this which represents the item that was changed and using the split method to break the id into an array. From there we know the id will always be the 2nd part of the array (remember arrays in javascript are 0 based. Now that we have the id we can get the status the admin selected. I made a mistake here that you might come across so be on the look out for it. If you don't put a space before option:selected the selelctor appears as "#status-orderidoption:selected" and as you can imagine that just will not work so be careful. $(document).ready(function(){ $("._status").change(updateStatus); }); function updateStatus(){ var orderId = this.id.split("-")[1]; var newStatus = $("#status-" + orderId + " option:selected").val(); }

To update that order status on the server side we need the orderId and the new status, both of which we now have. To accomplish our Ajax call to our back end we are going to use the post method. The post method will do all the magic for us all we need to do is provide some details. The first argument is the URL we are calling and it happens to be our order component. The next item is a object of key/value pairs to be sent to the server. I am sending the method I want to call, the order id and the new status. Finally I am setting a callback method, which is the method to call when this round trip is done. It's important to note that this will happen on success or failure and will send the response along with it. function updateStatus(){ var orderId = this.id.split("-")[1]; var newStatus = $("#status-" + orderId + " option:selected").val(); // updateStatus(orderId,status) $.post("components/order.cfc",{ method: "updateStatus", orderId: orderId, status: newStatus} ,afterUpdateStatus,"text" ); }

Before we look at handling the response we will take a quick peek at the server side. This is pretty bacsic update method that will set the status of an order based on it's order id. Remember like all ajax methods we need to set the access to remote. If the update was a success I am returning the string "success" if not I am returning the error message. <cffunction name="updateStatus" access="remote" output="false" returntype="string"> <cfargument name="orderId" type="any" required="true"> <cfargument name="status" type="any" required="true"> <cfset var update = ""> <cfset var retMsg = "success"> <cftry> <cfquery name="update" datasource="*****"> UPDATE Orders SET status = <cfqueryparam value="#arguments.status#"> WHERE OrderId = <cfqueryparam value="#arguments.orderId#"> </cfquery> <cfcatch type="any"> <cfset retMsg = "#cfcatch.Message#"> </cfcatch> </cftry> <cfreturn retMsg> </cffunction>

We are in the home stretch. Now that the call has been made to our component and the status has either been updated or failed, we just need to react to it. In our post method we defined afterUpdateStatus as our callback. Remember that this method will accept the response as an argument. In ColdFusion8 or higher you can return plain text or json but if you just return a string in 7 it will turn it into wddx. I did a quick search and this little regex seems to work good for stripping out the xml and just giving you the response. You can probably do more with the response but I am just outputting it in an alert. function afterUpdateStatus(data){ var response = $.trim(data); var reTag = /<(?:.|\s)*?>/g; var justTheWhiteMeat = response.replace(reTag, ""); alert(justTheWhiteMeat); }

If there are better ways to do things please speak up! I have no problem admitting I don't know everything. This little gem works though and it's added some nice functionality for our orders admin screen. I hope this helps someone through a problem and as always feel free to fire away questions.

This entry was posted on June 6, 2009 at 3:40 PM and has received 3303 views. Comments 5 | Print this entry.