Search jQuery

jQuery Forum

noob2012

Implementing a simple blockUI example in an existing page.

in Using jQuery Plugins • 9 years ago

I'm new to jQuery and have been playing around with some of the blockUI plugin samples trying to get one of them to work in an existing project. If I paste the code below just below the <body> it works as expected.

I have a standard button control (btnNext) within a view within a multiview that'd I'd like to blockUI on click event, so I change $('#demo3').click(function() to $('#btnNext').click(function() but get "JavaScript runtime error: Object doesn't support property or method 'blockUI'." I'm wondering if someone can kindly suggest where my problem may be?

<button id="demo3">Run</button>

$(document).ready(function() { 
    $('#demo3').click(function() { 
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' } }); 
 
        setTimeout($.unblockUI, 2000); 
    }); 
});

Replies(7)

jakecigar

Re: Implementing a simple blockUI example in an existing page.

9 years ago

Object doesn’t support property or method 'blockUI" means that one of these is probably happening …

You didn’t include the blockUI script.
blockUI wasn’t found on your server where you think you put it.
You are attempting to hotlink directly to a server that doesn’t permit it.
You included multiple copies of jQuery.
You included another library that has stolen $.

JΛ̊KE

noob2012

Re: Implementing a simple blockUI example in an existing page.

9 years ago

Here are the script tags and order I'm referencing:

If the sample works with the button pasted outside of the multiview should I still be considering all 5 suggestions?

Here are the behaviors I'm experiencing:

1. If the button is located outside the multiview the behavior is as expected.

2 If the button is located in view1 of the multiview, it does function but erratically (I have to click the button many times, sometimes it works sometimes it doesn't but it never throws and error).

3. If the button is located in view2 of the multiview, it throws Object doesn't support property or method 'blockUI'

jakecigar

Re: Implementing a simple blockUI example in an existing page.

9 years ago

If a <button> is inside a <form> the button’s default type=submit comes into play. But that’s probably not the problem.

The first 2 scripts are both jQuery. You need only one. (that’s #4 above).

$(document).ready(function( $ ) { // local $ prevents many problems with multiple copies of jQuery!
$('#demo3').click(function() {
$.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
setTimeout($.unblockUI, 2000);
return false; // just in case it’s inside a form
});
});

JΛ̊KE

coldfusio..

Re: Implementing a simple blockUI example in an existing page.

9 years ago

Requires jQuery v1.7 or later

When you view

http://malsup.github.io/jquery.blockUI.js

You have:

jakecigar

Re: Re: Implementing a simple blockUI example in an existing page.

9 years ago

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js is actually jQuery v1.9.1

JΛ̊KE

noob2012

Re: Implementing a simple blockUI example in an existing page.

9 years ago

Well, in the end, I created a new page copied and pasted all the code behind and it now works as expected. Not sure what gives. I appreciate all the suggestions.

jakecigar

Re: Implementing a simple blockUI example in an existing page.

9 years ago

One word. CACHE. It’s your friend in production, but in development it can be an enemy.

Clear cache or change the name of the file, and amazing things happen.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Implementing a simple blockUI example in an existing page.

Replies(7)

Re: Implementing a simple blockUI example in an existing page.

Re: Implementing a simple blockUI example in an existing page.

Re: Implementing a simple blockUI example in an existing page.

Re: Implementing a simple blockUI example in an existing page.

Re: Re: Implementing a simple blockUI example in an existing page.

Re: Implementing a simple blockUI example in an existing page.

Re: Implementing a simple blockUI example in an existing page.

Statistics

Tags

Actions