ADDED DETAILS: The problem appears only on those VF pages where a custom homepage component uses another version of jQuery. Those component seems to load later and overwrite the jQuery object that was extended by BlockUI before. That's why any calls to
$(node).block()
show errors that function "block" cannot be found.
I'm experiencing constant problems when using Jquery in combination with the famous BlockUI plugin. It only seems to appear on more complex VF pages that:
- Have embedded Javascript
- Include external Javascript
- Have embedded VF components also include jquery and BlockUI
In the past I thought that using jquery.noConflict()
like below:
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
and <apex:includeScript>
instead of <script>
would take care of all this multiple loading issues that one might think of.
But BlockUI as a plugin seems to extends the Jquery operator by adding function with $j.fn.
.
In complex pages when I call blockUI I receive the error that $j.fn.block cannot be found.
Is there a best practise for resolving conflicts with pages that load the same Javasript library multiple times?
- Should I rename $j in every place?
- Should I dynamically load
libraries by using
$j.getScript('{!$Resource.jquery_blockUI_js}');
noConflict
. Just attaching a jQuery from static resource withapex:includeScript
and use jQuery instead of $ – Sergej Utko Jan 17 '13 at 14:11