The prokki-ajax from prokki

prokki-ajax's Introduction

Prokki Ajax

This is a small javascript snippet to extend the default jQuery.ajax() function with an overlay while loading.

Integrations

Download the code from GitHub and copy the dist directory to your project.

Include the following lines of code in the <head> section of your HTML.

<link href="path/to/jquery.prokkiajax.min.css" rel="stylesheet" />
<script src="path/to/jquery.prokkiajax.min.js"></script>

The Basics

Since jQuery 3.0 the jQuerty.ajax() returns a jqXHR object which extends the chainable Deferred Object.

The methods success, complete and error are marked as deprecated, the deferred methods done, fail and always should be used instead.

Options

let pa = $.prokkiajax({
    overlay: "#ajax-loading",
    overlayAuto: true,
    spinner: "<i class=\"fa fa-spinner fa-spin fa-3x fa-fw\"></i><span class=\"sr-only\">Refreshing...</span>",
    minDuration: 500,
    beforeSend: null
});

Simple Usage

The ajax() is responsible for

showing the overlay and
excuting the asynchronous request.

In the deferred always method the overlay will be hidden.

let pa = $.prokkiajax({
    url: 'my_controller.php',
});

pa.ajax().always(pa.hideOverlay.bind(pa));

Extended Usage

let pa = $.prokkiajax({
    url: 'my_controller.php',
    beforeSend: function ()
    {
        console.log('Overlay is visible, but ajax request was not sent.');
    }
});

pa.ajax()
    .done(function ()
    {
        console.log('Method done: Overlay is still visible.');
    })
    .always(function ()
    {
        console.log('Method always I: Overlay is still visible.');
        
        pa.hideOverlay();
        
        console.log('Method always I: Overlay is removed.');
    })
    .always(function ()
    {
        console.log('Method always II: Overlay is removed');
    });

Recommend Projects