AJAX和blockUI

Question

I want to show "wait" message with plugin http://www.malsup.com/jquery/block/. ajax.php file is

<?php
sleep(2);
$arr = array('m' => 'OK');
echo json_encode($arr);
?>

And jquery code is

function block() {
    $.blockUI();
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'ajax.php',
        async: false,
        data: {},
        success: function(data) {
            $.unblockUI();
        }
    });
}
block();
$('#button').click(function() {block();});

How to show a "loading.."-message BEFORE of using ajax for getting "OK" and hide AFTER of using ajax? Now it shows and hides after using. I need also "async: false," in ajax json. Also that this block show two seconds.

Thanks

Answer 1

In jquery ajax their is a property called 'beforeSend' use that like this

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'ajax.php',
    async: false,
    data: {},
    beforeSend: function(){
        showLoadingScreen();
    },
    success: function(data) {
        alert(data.m);

    },
    complete: function(data){

         $.unblockUI();
    }
});

function showLoadingScreen()
{
    //include block.js for using this
    $.blockUI({ 
        message: 'Loading....',
        css: { 
            border: 'none',
            width: '300px', 
            height: '50px',
            padding: '15px',
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff'
        }       
    }); 
}