JQuery BlockUI Plugin Not Working, works temporarily with $.noConflict

Question

I'm trying to get the BlockUI plugin to work normally, and it's not working (and behaving very strangely when I do some hacks with $.noConflict to make it work temporarily).

This is an ASP.NET application. Scripts loaded by the page per the debugger are:

 bootstrap.js
 modernizr-2.6.2.js
 respond.js
 jquery-1.10.2.js
 jquery.unobtrusive-ajax.js
 jquery.blockui.js
 <my javascript file>.js (Contains my javascript; no jquery plugins; I've tried commenting everything but BeginWorking() below in here).

When I call my function with $.noConflict(), the BlockUI code works the first time. On subsequent calls, the JQuery object ($) has been mangled, and no JQuery functions will work any longer. See below code:

function BeginWorking() {  $('#loadingImage')[0].style.display = "inline";
$('#statusText')[0].style.display = "none";
$('#cancelButton')[0].style.display = "none";
$.noConflict();
$.blockUI();

Reloading the page and executing the same code except without calling $.noConflict(), the Jquery object is no longer mangled, but I get the following error on the line where I call $.blockUI(), in Chrome:

 Uncaught TypeError: Object function ( selector, context){
 // the jQuery object is actually just the init constructor 'enhanced'
 return new jQuery.fn.init(selector, context, rootjQuery );
 } has no method 'blockUI'

This seems to imply the plugin file for blockUI is not found but clearly it is there, because I can call $.blockUI() if I precede with $.noConflict().

All of this would lead me to believe that multiple versions of JQuery are running, and that's breaking the plugin, but based on my includes that seems very unlikely. Would it be a definite thing or extremely likely that one of these plugins is erroneously trying to override the JQuery object? (Please note - JQuery.blockUI also does not work, despite the above weirdness working temporarily) Would something else cause this behavior?

By calling `$.blockUI()` after `$.noConflict()` the `$` is freed from jQuery and the former reference restored, which might not be compatible with your plugin or not even jQuery at all. You should probably simply use `jQuery.blockUI()`. See [the documentation](http://api.jquery.com/jQuery.noConflict/)! — nietonfir, Feb 24 '14 at 23:30
I did try replacing all instances of $ with jQuery in my script, but got the second error when I did that. — John, Feb 25 '14 at 15:10

score 0 · Accepted Answer · edited May 23 '17 at 10:31

There were multiple copies of the same version of jQuery referenced, and these were not showing in the Chrome debugger. The default ASP.NET application generated by VS2013 generates this line of code in Layout.cshtml, a page which is wrapped around other content pages:

    @Scripts.Render("~/bundles/jquery")

This code loads a bundle of files, including the verbose version of JQuery. I meanwhile added my own reference to the same verbose version of jQuery, and the debug tools showed that there was only one copy of jQuery present. But, per my original suspicion, there was more than one jQuery include.

As for whether you should use the above code or include JQuery conventionally in an ASP.NET application, please see the following post: Why use @Scripts.Render("~/bundles/jquery")

JQuery BlockUI Plugin Not Working, works temporarily with $.noConflict

1 Answers1