Donnerstag, 28. September 2017

Please Wait like in Page Designer with Ajax beforeSend Event

After you have saved something in "Page Designer", this window (see screenshot) comes and you have to wait until it finishes.

This is user-friendly because the user knows exactly that he has to wait until the process ends.

In this tutorial, I will show you how to do this with "beforeSend" event from Ajax.

beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

1- Add that Javascript to run a PL/SQL Process

    $body = $(".t-Body");
    apex.server.process("TEXT_PROCESSING", {
        x01: 1
    }, {
        beforeSend: function() {
            $('<span class="vfr u-Processinga" role="alert" style="top: 252px; left: 720px;"><span class="vfr u-Processing-spinner"></span><span class="u-VisuallyHidden">Processing</span></span>').appendTo("body");


        success: function(pData) {

            if (pData.success === true) {



        error: function(request, status, error) {


2- Add Custom Css
     pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: .25;  

.u-Processinga {
    display: block;
    height: 64px;
    width: 64px;
    cursor: progress;
    position: absolute;
    left: 50%;
    margin-left: -32px;
    padding: 16px;
    background-color: rgba(0,0,0,.5);
    border-radius: 100%;  

.u-Processing-spinner {
    display: block;
    width: 32px;
    height: 32px;
    font-family: apex-5-icon-font!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation: u-animate-spin 1s infinite linear;
    animation: u-animate-spin 1s infinite linear;
    color: rgb(255, 255, 255);

3- Demo

Keine Kommentare:

Kommentar veröffentlichen