I have the following jQuery code that is giving me a problem. I have two jQuery functions that both call blockUI, and I get the same error for both. It says that blockUI is not a function. Can anybody tell me why?
function loading() { // register on click event for buttons. $.blockUI({ message: '<h3>Loading... <img src="/app/images/winliveprog.gif"/></h3>' }); $('body').css('cursor', 'wait'); } $(function() { $('[name="btnPreviewPost"]').click(function() { console.log('btnPreviewPost clicked'); $(this).blockUI(); loading(); $.blockUI({ message: '<h3>Loading... <img src="/capserver/images/winliveprog.gif"/></h3>' }); $('body').css('cursor', 'wait'); }); $('[name="btnEditPost"]').click(function() { console.log('btnEditPost clicked') $(this).blockUI(); loading(); $.blockUI({ message: '<h3>Loading... <img src="/capserver/images/winliveprog.gif"/></h3>' }); $('body').css('cursor', 'wait'); }); });8 Answers
I had the same problem, turns out I included the javascript file twice through some dependency. Once I removed one of the javascript files, blockUI worked fine.
Note that the jQuery BlockUI plug-in will not function "out of the box" in the latest version of jQuery.This is because BlockUI makes use of the jQuery.browser API, which was removed in jQuery 1.9. To get BlockUI working again, you need to use jquery-migrate:
I occurred the same problem, and I solved it by including this file:
<script src="">You can just use $(element).block();
see here
Try creating it as $.fn.blockUI for calling it on jquery objects like $(this).blockUI();
I had a same issue and the problem was path I used to register blockUI. In my case src of the of the jquery.blockUI.js in site.master page was wrong. Please check whether your are registering jquery.blockUI.js correctly.
I my case it was old version (2.0.10) of woocommerce plugin - I couldn't update it because it would break some custom functionality - so I had to comment out jQuery lines with .block in write-panels.min.js and writepanel-product-type-variable.php .
I am using the Angular and meeting the same issue here. Inspired by @Robert, I found out there are two references:
jquery.min.js
in the angular.json. I removed one and it worked.
