[SalesForce] Page cannot use jQuery Plugin as it’s registered with $ from Sidebar component

This again and again is a reason why jQuery-based pages in my apps fail to render at some customers but not at all customers…

There must be a solution to this. Or at least others who share the pain 😉

Image my page using jQuery in the recommended way

<apex:page>
    ... 
    <apex:includeScript value="//anycdn/jquery.min.js" /> 
    <apex:includeScript value="//anycdn/jquery.plugin.min.js" />

    <script type="text/javascript">
        jQuery.noConflict();

        jQuery(document).ready(function() {
            jQuery("#id").pluginMethod();
        });
    </script>
</apex:page>

Now imagine there is a Sidebarcomponent contains Javascript code that registers another version of jQuery with the noconflict() call and using the default alias $.

Sidebar components seem to load faster and so a plugin sometimes is registering not in the jQuery I load in the same page but in the previously loaded jQuery from the Sidebar component.

My call to jQuery("#id").pluginMethod(); will fail in the Browser with a Javascript error

undefined is not a function

The screenshot from my Browsers console proves that the Dynatree plugin was NOT registered with jQuery in the same page but with the $ loaded in the sidebar component (this was proven by using sidebar="false" on the page tag).

I see no easy solution to this as my Script works properly and I cannot really change neither the sidebar Javascript code nor how a Plugin registered itself.

Best Answer

One hacky work-around would be to look for the instance of jQuery that the plugin is registered with:

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function() {
    if (typeof jQuery.pluginMethod === 'function') {
        jQuery("#id").pluginMethod();
    } else if (typeof $.pluginMethod === 'function') {
        $("#id").pluginMethod();
    }
});
</script>

Related Solutions

[SalesForce] Use of (BlockUI) plugin in jquery constantly breaks Visualforce pages

jQuery plugins, as a best practice, should be registered on the main jQuery object, NOT on $j or other alternative references to jQuery obtained through use of jQuery.noConflict().

Depending on when/how various jQuery plugins are loaded in the page, this will make the plugins available to all alternate jQuery references (e.g. one developer's code might use $j = jQuery.noConflict(), another's might use j$ = jQuery.noConflict()), but they will all have access to all jQuery plugins registered throughout the page load on the main jQuery object.

To properly register the blockUI plugin, use the code from the plugin's download page --- this registers the plugin on the jQuery global object by, essentially, registering jQuery.fn.block = function(){}, jQuery.fn.unblock = function(){}, etc. However, this code attaches/registers its plugin within a CLOSURE, so its reference to the jQuery global object is locked in. DO NOT register plugins on a unique reference (that is, do NOT do $j.fn.pluginName = function(){}) --- always register plugins on the main jQuery object.

TO avoid reloading a given jQuery plugin multiple times, you could check for the plugin's existence before loading:

if (!jQuery.fn.block) {
    // Load the block UI plugin
} else {
   // Hurray, it's already loaded!
}

Finally, as an aside, all that jQuery.noConflict() does is to relinquish control of the $ variable (or even the jQuery variable if you pass true as a param to it --- but this is NOT a best practice). Using jQuery.noConflict() can be very helpful in Visualforce page development when you don't know how other components that you'll be using within the page will be making use of external JS libraries --- other JS libraries might use the $ variable to refer, for instance, to an old version of jQuery, or to some entirely different JS library altogether. So using something like var $j = jQuery.noConflict(), or even a namespaced version like acme.$ = jQuery.noConflict(), allows you to rest easy knowing that all calls to $j (depending on the scope of where you use it, of course) will return references to jQuery as you expect them to, and NOT to some other vendor's code or version of jQuery.

[SalesForce] Error : requested an insecure script ‘http://code.jquery.com/jquery.min.js’

Try using following URL in script tag. https://code.jquery.com/jquery.min.js instead http://code.jquery.com/jquery.min.js

Best Answer

Related Solutions

[SalesForce] Use of (BlockUI) plugin in jquery constantly breaks Visualforce pages

[SalesForce] Error : requested an insecure script ‘http://code.jquery.com/jquery.min.js’

Related Topic