APEX

apex oracle 5.0:

Just wanted to load image(Like page is loading) while move to next page(for one page only not for whole app pages)

here what i have tried:

Page Template Body:

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

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 */

}

Global Function Javascript:

function deleteEmp(p_this, p_empno) {

  var tr = $(p_this).closest('tr');

  // perform an asynchronous HTTP AJAX request using jQuery

  $.ajax({

    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"

    },

    beforeSend:

      function() {

        $("div#cstm-loading-img").show();

        tr.removeClass('even');

        tr.removeClass('odd');

        tr.children().hover(function() {

          tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);

        }, function() {

          tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);

        });

        tr.children().animate({'backgroundColor': '#fbc7c7'}, 300);

      },

    success:

      function() {

        tr.children().wrapInner('<div>').children().fadeOut(400, function() {

          tr.remove();

          $("div#cstm-loading-img").hide();

        });

      }

  });

}

Followed this Link:https://apexplained.wordpress.com/2012/08/18/display-loading-image-in-apex/

Also uploaded image in worksplace.Don't know what i am missing.

apex.oracle.com

testdump/developer/desk1

application:TEST

Home Page