CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
user636859
user636859

Reputation:

jQuery -- blockUI is not a function

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 class="fldHead">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 class="fldHead">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 class="fldHead">Loading... <img src="/capserver/images/winliveprog.gif"/></h3>'
                });
                $('body').css('cursor', 'wait');
          });
        });

Upvotes: 5

Views: 53750

Answers (8)

Xiaoxing
Xiaoxing

Reputation: 1

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.

Upvotes: 0

Yingbo Cui
Yingbo Cui

Reputation: 269

I occurred the same problem, and I solved it by including this file:

<script src="http://malsup.github.io/jquery.blockUI.js">

Upvotes: 5

Mike
Mike

Reputation: 1266

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 .

Upvotes: 0

hec
hec

Reputation: 569

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.

Upvotes: 7

Matthew Raymond
Matthew Raymond

Reputation: 31

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:

https://github.com/jquery/jquery-migrate/#readme

Upvotes: 3

Yasith
Yasith

Reputation: 117

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.

Upvotes: 0

Mithril
Mithril

Reputation: 13808

You can just use $(element).block();
see here http://www.malsup.com/jquery/block/#element

Upvotes: 2

Brentoe
Brentoe

Reputation: 448

Try creating it as $.fn.blockUI for calling it on jquery objects like $(this).blockUI();

Upvotes: 1

Related Questions