2

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>
damrakred
  • 59
  • 1
  • 1
  • 7
  • I've found out that the form plugin that I'm using (Ninja Forms) for Wordpress uses the jQuery AjaxForm plugin, and the developer of the plugin is unsure if .ajaxStop is called at all. He mentioned that I should be able to use the jQuery event: submitResponse to trigger actions when the form is finished submitting, but I can't find any reference to this event anywhere. :( – damrakred Nov 10 '13 at 17:30

3 Answers3

0

You need an ajax call for unblocking :

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

        // Your ajax call here
    }); 
});
Pascalz
  • 2,348
  • 1
  • 24
  • 25
0

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

Dmitry Dvornikov
  • 294
  • 1
  • 8
0

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/

skz
  • 165
  • 10