BlockUI not working after the first call

Question

I am using blockUI with some AJAX calls and am running into issues with it working. The first time it is called everything works as expected. When I execute a subsequent AJAX call and try to call blockUI it does not block my screen again. In both cases writing to console results in function (opts) { install(window, opts); } being returned. Thinking that it might be a z-value issue I've tried adding baseZ with a number higher than any other z-value in my css but that didn't correct it. A simple instance of one of the calls is below:

$(document).ready(function() {
    $(document).on('click',".defect",function() {
        $.blockUI({ message: "<h4>Getting images ...</h4><img src='img/wait.gif'/>"});
    })
})

I have tried $(document).ajaxStop($.unblockUI); and then tried removing that and using $.unblockUI(); in my AJAX success but still had the same results

Answer 1

You can add jquery.blockUI.js .Try adding it when ajax call happens:

$(document)
    .ajaxStart(function () {
    $.blockUI(); 
/*      for css style
    $.blockUI({css: { border: 'none',
            padding: '5px',
            backgroundColor: '#000',
            '-webkit-border-radius': '5px', 
            '-moz-border-radius': '5px',
            opacity: .5, color: '#fff' },
            message: "Loading..."}); */
    })
    .ajaxStop(function () {
     $.unblockUI();
    });