I must admit, I’m a bit of a jQuery nut. It simply makes our lives as web developers a whole lot easier. This blog entry is yet another example on how to take advantage of the endless possibilities of jQuery. My purpose here is to display a loading image (or message if you want) as a result of a certain action by the end user. A good example situation can be found in the very first article I’ve written: Instant row deletion from reports.

In that article I explain how you can instantly (without a page refresh) delete a row from a report. I’d like to enhance this delete action by displaying a loading image while our beloved Oracle Database is processing the delete statement. Let’s get started.

We first need to edit our page template so we can include a div element that will hold the loading image and is hidden by default. Add the following HTML code to the body element. It doesn’t really matter where you put it, as long it’s within the body element.

<div id="cstm-loading-img"></div>

Next, include the below CSS code.

div#cstm-loading-img {
  display: none;
  background-image: url(#WORKSPACE_IMAGES#loading-img.gif);
  width: 126px;  /* the exact width of the image */
  height: 22px;  /* the exact height of the image */
  position: absolute;
  top: 17px;
  left: 50%;
  margin-left: -63px;  /* the half of the width */

The div is positioned absolute in the upper-middle part of the page. The loading image I use can be downloaded here. So far, you won’t notice a difference when you run the page since the div is set to display: none.

Now it’s time for jQuery to jump in. Well, nothing spectacular to be honest. I only had to add two lines of code to the existing JavaScript function from my first post. The added lines have been highlighted. Please refer to the associated article for a more detailed explanation of the below code.

function deleteEmp(p_this, p_empno) {
  var tr = $(p_this).closest('tr');

  // perform an asynchronous HTTP AJAX request using jQuery
    type: "POST",
    url: "wwv_flow.show",
    data: {
      p_flow_id: $('#pFlowId').val(),
      p_flow_step_id: $('#pFlowStepId').val(),
      p_instance: $('#pInstance').val(),
      x01: p_empno,
      p_request: "APPLICATION_PROCESS=delete_employee"
      function() {

        tr.children().hover(function() {
          tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);
        }, function() {
          tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);
        tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);
      function() {
        tr.children().wrapInner('<div>').children().fadeOut(400, function() {

A great thing about jQuery code is that it’s extremely easy to read. You should be able to quickly identify three different code blocks. The first part (line 5-14) defines the AJAX request attributes. Then the beforeSend event follows (line 15-27) which is triggered before the AJAX request is started. That is the moment when we start displaying the loading image. Finally, the success event is triggered as soon as the request was successful. The perfect time to hide the loading image again. Check out the live demo (which also displays a loading image when you open the page).

The above code snippet is by no means complete and could certainly be improved. You might for example want to include other AJAX events to fit your requirements.