Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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>
share|improve this question
    
Do you have Firebug or similar tool? Use it to check if JS files load up properly or maybe do they throw any errors in the JS console? Are both JS files just that, script files? If you have uploaded zipped static resource you'll have to specify a path to actual file within, similar to stackoverflow.com/a/14470254/313628 –  eyescream Jan 30 '13 at 21:30
1  
plus URLFOR() around your $Resource globals :-) –  user320 Jan 30 '13 at 21:53
1  
Take a look at the code recipe "Using jQuery in a Visualforce Page" by Josh Birk –  Peter Knolle Jan 30 '13 at 22:10
2  
See also: wiki.developerforce.com/page/Developing_Apps_with_jQuery ... also, by, um Josh Birk. –  joshbirk Jan 31 '13 at 0:48
    
@user31 - if there's no zip, I think you can skip using URLFOR. i.e., if the Static Resource is just the single file. –  joshbirk Jan 31 '13 at 21:18
show 1 more comment

3 Answers

up vote 9 down vote accepted

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>
share|improve this answer
    
@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
add comment

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");
}
share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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