11

I am new to using jquery in visualforce and seem to be stuck just getting the static resource to work correctly. I have two js files, one is the jquery the other is a qrcode generator. Both are loaded as static resources and find my pages in the "where it is used" function. I have followed the doc as best I can but still cannot get the JS to work.

Code chunk inside my VF page is as follows:

<html>
<body>
<p>
   <b> QR Code </b>
</p>

<div id="output"></div>
<apex:includeScript value="{!$Resource.jquery}"/>
<apex:includeScript value="{!$Resource.jsqr}"/>
<script>
jquery.noConflict();
jquery(function(){
    jquery('#output').qrcode("testqrcode.com");
})
</script>

</body>
</html>
11

javascript is case sensitive with shortcuts like jquery so use jQuery instead as your shortcut...

more like:

<script type="text/javascript">
    $.noConflict();
    (function($) {
        // Code that uses jQuery's $ can follow here.
    }(jQuery);
</script>
  • @user31 sounds good to me! – jordan.baucke Jan 30 '13 at 22:51
  • 1
    Duh, it was the case sensitivity problem, thanks to all – Gordon Derk Jan 31 '13 at 18:44
4

First, +1's jordan's answer - keep things case sensitive.

However, there's no reason to just call:

$.noConflict();

Because noConflict() is basically returning a handler to the main jQuery function, and what you want is not need to use the $ shortcut, but your own. So use:

j$ = jQuery.noConflict();

Or the like instead. And now you can refer to that:

j$('.accountDiv').hide();

And in a VF page, you'll probably want to wrap that in the onReady event so that you know the DOM is loaded:

j$ = jQuery.noConflict();
j$(document).ready(function() {
   j$('#output').qrcode("testqrcode.com");
}
0

Even though you have imported jQuery followed by the other JS file in your VF page, sometimes Salesforce doesn't maintain that order of import in the rendered HTML (View Source). I had this experience several times myself. In such a case, you really can't do much except move the import statements around in your VF, hoping that Salesforce will render the jQuery import statement before the other JavaScript imports, in the rendered HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.