jQuery blockUI won't unblock

Question

I have a nice modal that blocks out the screen while a post is being submitted via ajax. The blockUI starts fine, the modal displays, but the modal does not unblock when the Ajax is done posting, it just continues to display.

$(document).ajaxStop($.unblockUI); 

$(document).ready(function() { 
    $('#ninja_forms_field_50').click(function() { 
        $.blockUI({ message: $('#rLo') }); 
    }); 
}); 

<div id="rLo" style="display:none;"> 
    <p style="font-size:33px; font-weight:300; text-align:center; line-height: 48px;">Your Recipe is Processing!</p>  
    <img src="<?php bloginfo('template_url'); ?>/images/loadinfo.net.gif" alt="Loading..." />
    <?php include(TEMPLATEPATH.'/quotes.php'); ?>
</div>

Answer 1

You need an ajax call for unblocking :

$(document).ready(function() { 
    $('#ninja_forms_field_50').click(function() { 
        $.blockUI({ message: $('#rLo') }); 

        // Your ajax call here
    }); 
}); 

Answer 2

i did not use it, but if blockUI is a function so why do you use unblockUI without () ? may be that the problem?

Answer 3

Where is your Ajax request taking place? In the code you provided there is no Ajax call, and since ajaxStop() is triggered only when an Ajax request is completed, you are never evaluating that function.

If you're correctly doing your Ajax call and the unblocking is not taking place, you might consider to trigger your Ajax request with the global option set to true .

Reference: http://api.jquery.com/ajaxStop/