I am currently working on a project for a client that involves updating an existing legacy ASP application to make it easier to use, but I am not yet able to completely replace the entire application. Wherever possible, I have been getting around limitations by adding in AJAX code to pages to make them more interactive using jQuery.
As example is an order list in the back end administration section. It has a column with a checkbox next to the order id, and a column with a dropdown list of status codes (with the current status for each order selected), along with the rest of the basic order information.
In order to update the status of an order, you have to check the box next to the order #, select the new status, and the click on an Update Status button at the bottom of the page to post the page back and save the changes. It works, but it is clunky and annoying when you have a lot of orders to update. Also, you could easily forget to check an order or to click on update to save your changes.
Ideally, the order status should update immediately after selecting the new status, without any other steps. Using the onchange handler on the dropdown list, along with jQuery’s post() function, I can do just that with an ajax request to a separate page to handle to status update.
There are three parts involved in making this modification. First, adding an onchange attribute to the select tag as each row is generated in the order list table HTML. In the onchange event, I will call a javascript function and pass it the orderid number and the newly selected status.
Here is the relevant VBScript code in the ASP page. This will work with any server side language, you just need to make sure it correctly outputs the HTML with the onchange attribute in it.
sOutput = "<select name='status_" & CStr(iRows) & "'
onchange=""updateStatus('" & CurrentOrderID & "',this.value);"">" _ & sOutput & "</select>"
That code is part of a loop that creates each of the cells in each row. The important part is what the onchange attribute ends up looking like once the code is done:
<select onchange="updateStatus('275181018',this.value);" name="status">
The orderID has been filled in as the first parameter of the function, and this.value will pass the selected value from the dropdown when the change event occurs.
The next part is the updateStatus Javascript function. This function will actually make the AJAX call to update the status of the order. It is quite simple – only one line.
function updateStatus(sOrderid,sStatus) { $.post("updatestatus.asp", { orderid: sOrderid, status: sStatus } ); }
In this example, I have two parameters for the updateStatus function – the orderid and the status, which are both strings. This corresponds to the updateStatus call in the onchange event in the first step.
The $.post() function has several variations depending on what you want to do with it. Here, I am using a very simple form that only takes two parameters. The first parameter is the URL to post the data to, in this case a page called updatestatus.asp.
The second parameter is a javascript array containing the data to post to the page. I am posting two values, orderid and status. I set those to the values passed into the updateStatus function.
That’s it for the function, since I don’t care about the response. You may want to make the function a bit more robust by handling a response as well, but for simple tasks, it’s not always necessary. For more information on handling a response back from the .post call, see the jQuery documentation.
The final piece is the page that will receive the AJAX request via post(). In my example, I used a simple ASP page that receives two values and updates the status in the database. The orderid is available in Request.Form("orderid") and the status is in Request.Form("Status"). You can use those values in your page to update the database. Whether you are using ASP, PHP, ASP.NET, or something else, the concepts are the same.
Keep security in mind with your AJAX requests. The page receiving the request should validate the data passed to it before processing it to avoid unauthorized access and the possibility of SQL injections.
The end result is that the status of each order is now able to be updated directly from the order list, without the extra steps of checking the order and submitting the page with an update button. This makes for a much more responsive UI and makes the page more efficient. If you are processing a lot of orders every day, even small changes can lead to increased usability and productivity.
An idea for improvement would be to have some kind of visual indicator that the value was saved. For example, having the background color change on the dropdown or the table row itself once it has been updated. This would be very easy to do using the callback functionality in .post. You could also expand the backend page to handle multiple field updates depending on what is passed to it.