Easy Data Updating With jQuery and AJAX

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.

Continue reading “Easy Data Updating With jQuery and AJAX”

Make Content Panels Using jQuery

One common design problem is how to display a large amount of content on a page and still make it easily accessible. Often times, a table of contents is used at the top with links within the same page to sections below. This gets pretty unwieldy if you have a lot of content, and splitting it up into multiple pages can be annoying and hard to navigate.

An easy and elegant alternative is to use a dropdown list with content panels made of individual divs. The dropdown acts as the table of contents, and each time a selection is made, only that panel is displayed.

Example:

contentpanel

With a little bit of jQuery and CSS, it’s very simple to create this kind of ui.

Continue reading “Make Content Panels Using jQuery”